加入收藏 | 设为首页 | 会员中心 | 我要投稿 湘西站长网 (https://www.0743zz.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 创业 > 经验 > 正文

CSS教程:样式化顺序列表

发布时间:2018-09-12 12:47:47 所属栏目:经验 来源:站长网
导读:绝大多数的浏览器解释显示列表序号字体大小默认的和文本一样大

  绝大多数的浏览器解释显示列表序号字体大小默认的和文本一样大小。这是一个简单的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/翻译。

(编辑:湘西站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读