为你的有序列表添加个性样式
作者:暴风彬彬 来源:彬Go 时间:2009-02-23 13:12:00
在默认情况下,大多数浏览器都会将有序列表中的数字序列的与其列表文字内容显示为相同的字体。这篇快速教程将教你如何使用有序列表(ol)和段落(p)来设计华丽的列表数字。
预览
基本上讲,你需要做的只是为ol元素定义Georgia字体,然后为p元素(在ol内)定义Arial字体。
1.HTML源代码
创建一个有序列表,不要忘了将列表中的文字放在闭合的<p>标记内。
<ol>
<li>
<p>This is line one</p>
</li>
<li>
<p>Here is line two</p>
</li>
<li>
<p>And last line</p>
</li>
</ol>
以下是无序列表的默认样式:
2.ol元素
为ol元素添加样式:
ol {
font: italic 1em Georgia, Times, serif;
color: #999999;
}
列表会变成这样:
3. ol p 元素
现在为ol p 元素添加样式:
ol p {
font: normal .8em Arial, Helvetica, sans-serif;
color: #000000;
}
你的有序列表的最终样式:
来看看完整的预览Demo吧
标签:有序列表,样式,文字,字体
0
投稿
猜你喜欢
Django的URLconf中使用缺省视图参数的方法
2021-05-03 17:46:29
Java+mysql本地图片上传数据库及下载示例
2023-07-23 19:49:13
微信小程序 数据缓存实现方法详解
2024-04-19 09:49:22
Python绘制牛奶冻曲线(高木曲线)案例
2022-04-05 16:35:08
php获取访问者IP地址汇总
2023-11-14 12:14:06
parser.add_argument中的action使用
2023-05-18 05:35:57
CentOS 7.4下安装Oracle 11.2.0.4数据库的方法
2024-01-24 20:36:20
Python实现检测文件的MD5值来查找重复文件案例
2021-08-14 01:28:02
"模板化"——限制还是激发
2009-03-26 11:36:00
Python简明入门教程
2021-07-30 08:48:18
Python3控制路由器——使用requests重启极路由.py
2023-05-20 08:07:54
使用Tkinter制作信息提示框
2023-12-15 02:13:30
Go语言判断文件或文件夹是否存在的方法
2024-05-09 14:50:55
Mac包管理器Homebrew的安装方法
2023-02-16 06:20:19
Go语言基础变量的声明及初始化示例详解
2024-04-27 15:46:37
javascript中解析四则运算表达式的算法和示例
2024-04-28 09:41:37
纯python进行矩阵的相乘运算的方法示例
2021-04-28 11:34:06
vue引入jq插件的实例讲解
2024-04-30 10:23:11
利用python实现查看溧阳的摄影圈
2021-09-05 21:33:16
Mango Cache缓存管理库TinyLFU源码解析
2023-09-02 12:27:51