在默认情况下，大多数浏览器都会将有序列表中的数字序列的与其列表文字内容显示为相同的字体。这篇快速教程将教你如何使用有序列表(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吧

留意更新

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

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