软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > Web前端 > Html/css > CSS教程:样式化顺序列表

CSS教程:样式化顺序列表

  绝大多数的浏览器解释显示列表序号字体大小默认的和文本一样大小。这是一个简单的CSS教程利用有序列表和段落标签来设计一个时髦的编号列表。

  概要

  定义<ol>的字体为:Georgia font,然后把<p>的字体设为:Arial。

ol-overview

  1.Html源代码

  写一个有序列表,不要忘记用<p>包裹文本

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com]
<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-1

  2.ol 元素

  样式ol元素

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com]
ol {
font: italic 1em Georgia, Times, serif;
color: #999999;
}

  列表变成这样

ol-2

  3.ol p元素

  现在样式化ol p元素

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com]
ol p {
font: normal .8em Arial, Helvetica, sans-serif;
color: #000000;
}

  于是就变成了最终的样子

ol-3

  英文原文http://www.cnblogs.com/island205/翻译。

    相关阅读
    网友评论
    栏目导航
    推荐软件