CSS基础应用学习系列(4)――用CSS对列表应用样式

1. 基本列表非常简单。假设有下面这个任务列表：
<ul>
<li>北京</li>
<li>福建</li>
<li>上海</li>
<li>广东</li>
<li>香港</li>
</ul>

为了添加定制的列表符号，可以使用list-style-image属性。但是，这种方法对符号图像的位置控制能力不强。更常用的方法是关闭列表符号，并且将定制的符号作为背景添加在列表元素上。然后可以使用背景图像的定位属性精确地控制定制符号的对准方式。

首先需要将列表的空白边(margin)和填充(padding)设置为零，从而去掉这个缩进。要去掉默认的符号，只需将列表样式类型设置为none:
ul {
margin: 0;
padding: 0;
list-style-type: none;
}

添加定制的符号非常简单。在列表项左边添加填充，为符号留出所需的空间。然后将符号图像作为背景图像应用于列表项。如果列表项跨越多行，你可能希望将符号放在接近列表项顶部的位置。但是，如果知道列表项的内容不会跨越多行，那么可以将垂直位置设置为middle或50%，从而让符号垂直居中：
li {
background: url(item.gif) no-repeat 0 50%;
padding-left: 30px;
}

如图所示：


2. 下面用第一篇(http://www.cnblogs.com/liping13599168/archive/2007/09/27/908480.html)用到的技术，创建垂直导航条和CSS翻转

与平常一样，首先需要一个良好的HTML结构：
<ul>
<li><a href=”beijing.htm”>北京</a></li>
<li><a href=”fujian.htm”>福建</a></li>
<li><a href=”shanghai.htm”>上海</a></li>
<li><a href=”Guangzhou.htm”>广东</a></li>
<li><a href=”hongkong.htm”>香港</a></li>
</ul>

首先要做的就是去掉默认的符号并将空白边和填充设置为零：
ul {
margin: 0;
padding: 0;
list-style-type: none;
}

使用第1篇学习的翻转图像技术，作为背景图像应用于锚链接
a {
display:block;
width:100px;
height:40px;
line-height:40px;
color:# 00FF00;
text-decoration:none;
background:#94B8E9 url(images/pixy_rollover.png) no-repeat left bottom;
text-align:center;
}

这样表现出来的就是带有背景图片的导航条了。为了完成这个效果，最后还需要应用鼠标停留和被选择状态。为此，只需将锚链接上的背景图像移动到右边，露出鼠标停留状态图像。当鼠标停留在锚链接上是，这个样式应用于锚链接。它还应用于具有类selected的父列表项中的锚。
a:hover, .selected a {
background-color:#369;
background-position:right bottom;
}

如果所示：

一个垂直导航条出来了！您可以自己制作一个图片，来达到更加漂亮的效果！

源代码下载