为你的有序列表添加个性样式
作者：暴风彬彬 来源：彬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输出HTML文件？<!--#include file="top.inc"--><
- 说明：本函数作用是截取指定英汉混合字符串，并保持显示长度一至。就是将一个汉字当两英文来截取。用途：一般会用在标题显示列表，可以避免截取的字符
虽然淘宝商城的名字中带有“商城”两字，但是很显然的，淘宝商城并不是一个B2C商城，淘宝商城仍只是一个C2C平台，充其量只是个收费版的淘宝。在- 背景在吉日嘎拉的软件编程走火入魔之：数据库事务处理入门（适合初学者阅读）文章中关于MS SQL Server和Oracle对数据库事务处理的
- 示例：mysql> DELIMITER //mysql> CREATE PROCEDURE `statis`()
- 以前我就是一篇博文 就给出一个好用的函数，它在我几篇博文中被广泛运用的。最近看了不少东西，于是便有了这篇博文，以梳理我学到的新东西。毫无疑问
- 代码如下:<％@LANGUAGE="VBSCRIPT"％> <％ option&n
- 随着信息技术的飞速发展，数据处理不仅在数量上要求越来越大，而且在质量上也要求越来越高。操作系统的稳定对数据库来说是十分紧要的，在数据库可操作
- Microsoft? SQL Server? 2000 提供了两种主要机制来强制业务规则和数据完整性：约束和触发器。触发器是一种特殊类型的存
- rem ---表单提示函数 Being-----------------------------CODE Copy ... Fu
- CSS文件的链接方式·附加链接：外部CSS文件·导入CSS：常用应用多个CSS文件时，将多个CSS导入一个CSS文件中CSS规则定义有三种：
- 前两天看的时候，所用的歌曲地址加密方式已变更。将以前的发出来供大家赏玩。解密函数是从flash里面反编译出来的，加密函数是自己根据解密函数写
- asp函数实现把数字格式化为每3个数字时以逗号间隔的数字见下：<％Function Comma(str)If No
- 平时每逢alexa排名更新时，我都需要将所有相关的同类网站的排名整理一下，看一下这些对手网站的排名更新情况。做的多了，也就烦了，虽然也才30
- 嗯，你可以说我很无聊。最近疯狂加班，今天才得以有时间搞一个CSS的像素图来消遣休息下。先看效果：运行代码框<!DOCTYPE html
- 有没有想过用尺子来直接量网页上的区块间距，文字行高？屏幕标尺就是干这个的。这个功能非常适合F2E在调试样式尺寸的时候使用。打开屏幕标尺，屏幕
- 上期回顾:亚马逊购物用户体验分析 (一)“查找内部”功能书是在亚马逊最常被购买的产品之一，所以毋庸置疑亚马逊的开发小组已经建立了一个关于“查
- 根据 Dotzler 的统计，IE6 的份额正在缩水，这可能是 2009 年本人听到的第一个好消息。于此同时，Gmail 的浏览器支持列表中
- 一个简单的JS显示日期代码，可以显示星期几<script type="text/javascript">fu
- 阅读上一片：微软建议的ASP性能优化28条守则(1)技巧 3：将数据和 HTML 缓存在 Web 服务器的磁盘上有时，数据可能太多，无法都缓
