为你的有序列表添加个性样式

在默认情况下,大多数浏览器都会将有序列表中的数字序列的与其列表文字内容显示为相同的字体。这篇快速教程将教你如何使用有序列表(ol)和段落(p)来设计华丽的列表数字。

预览

基本上讲,你需要做的只是为ol元素定义Georgia字体,然后为p元素(在ol内)定义Arial字体。

CSS-有序列表

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>

以下是无序列表的默认样式:

ol-css

2.ol元素

为ol元素添加样式:

ol {
font: italic 1em Georgia, Times, serif;
color: #999999;
}

列表会变成这样:

ol-css-实例

3. ol p 元素

现在为ol p 元素添加样式:

ol p {
font: normal .8em Arial, Helvetica, sans-serif;
color: #000000;
}

你的有序列表的最终样式:

ol-css

来看看完整的预览Demo

留意更新

订阅彬Go以查看前端开发/CSS框架最新教程及资源。

英文原文:Style Your Ordered List
翻译原文:为你的有序列表添加个性样式(暴风彬彬)

转载声明:
原载:彬Go——集前端开发/网页设计/网站可用性/用户体验于一体的趣味互联网生活
本文链接:http://blog.bingo929.com/style-your-ordered-list-div-css.html
如需转载必须以链接形式注明原载或原文地址,谢谢合作

24 Comments

发表评论