为你的有序列表添加个性样式
作者:暴风彬彬 来源:彬Go 时间:2009-02-23 13:12:00
在默认情况下,大多数浏览器都会将有序列表中的数字序列的与其列表文字内容显示为相同的字体。这篇快速教程将教你如何使用有序列表(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吧
标签:有序列表,样式,文字,字体
0
投稿
猜你喜欢
最大限度优化你的Asp性能
2007-10-01 18:04:00
09七夕节各大搜索引擎LOGO欣赏
2009-08-27 15:34:00
提高MySQL数据库查询效率的三个实用技巧
2008-12-03 16:40:00
如何编写一个创建FTP站点的函数?
2009-11-07 18:51:00
关于网站导航设计的探讨
2008-02-28 13:20:00
如何用SA-FileUp上传一个单纯的HTML文件?
2010-05-18 18:29:00
Javascript 利用 DOM 特性的两个小技巧
2009-02-28 14:07:00
DIV+CSS常见错误及解决方法
2008-04-25 22:46:00
运行asp.net程序 报错:磁盘空间不足
2011-11-03 17:16:22
ASP获取ACCESS数据库的表名以及表名对应的字段名和字段类型
2009-12-25 18:57:00
《写给大家看的设计书》阅读笔记之色彩
2009-07-30 12:45:00
MySQL数据库之UPDATE更新语句精解
2009-03-20 15:21:00
扫盲大讲堂:mysql出错的代码解析及解答
2009-09-05 10:08:00
SQL Server讲堂:备份和恢复措施
2009-05-22 10:21:00
选择一个优秀正文字体的15个技巧
2008-03-20 13:36:00
5个css+div导航菜单
2011-04-29 12:38:00
让长字符自动换行 比如URL和Email地址等
2008-07-01 14:41:00
Date对象格式化方法
2009-11-16 13:17:00
省市级联菜单的可用性
2009-02-24 16:32:00
web版Photoshop来了
2008-04-21 13:39:00