繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 有序列表和段落设计华丽的网页列表数字
- CSS样式表
- 介绍IE8的CSS hack
- CSS教程:解析CSS列表样式属性list-style
- CSS教程:CSS页面布局的技巧
- 对付CSS兼容问题的十个超级技巧
- CSS3教程:box-sizing属性
- CSS教程:29个特殊的CSS导航技术
- CSS教程:CSS控制浏览器滚动条的源代码
- DIV+CSS制作网页之如何设置z-index
- 制作网页表单的标签和输入区
- 网页文件上传表单的制作
- 网页表单标签水平右对齐更适合中文网站
- CSS在各个网页版邮箱中的支持情况
- 彻底弄清楚haslayout概念
- CSS教程:滑动门与选项卡
- 总结关于网页表单反馈的一些问题
- CSS Sprite操作:用CSS处理圆角
- 网站栅格化设计
- 减少网站加载时间:CSS Sprites
- 通过CSS实例实现清除浮动
- CSS教程:实例讲解定位Position
CSS样式表 中的 有序列表和段落设计华丽的网页列表数字
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-09 浏览: 150 ::
收藏到网摘: n/a
在默认情况下，大多数浏览器都会将有序列表中的数字序列的与其列表文字内容显示为相同的字体。这篇快速教程将教你如何使用有序列表(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吧
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
评论 (0) All
