>>> 下载【朝花夕拾 – DIV+CSS布局实战系列视频教程】图片素材
继续上节教程的内容，我们接下来讲解如何设置左栏中列表的外观。事实上学习了导航菜单的样式定义之后，很多东西应该怎么做大家心里都有底了，如果想详细了解CSS对列表元素的外观控制，可以参考一些利用列表制作导航菜单的教程，如《DIV+CSS制作基于UL列表的横向导航菜单 》。首先去除项目列表默认的圆点符号：
- .postlist{
- list-style:none;
- }
然后为每个列表项添加下划虚线，事实上是虚线下边框：
- .postlist li {
- border-bottom:1px dashed #D6E4A7;
- }
为了更加明确之后的步骤，我们先来看看至今为止的效果图：
接下来的样式定义主要就是针对列表项中的链接元素了，除了设置颜色、去除下划线修饰等基本工作之外，最主要的是每个链接前面的图标修饰。关于如何用图标修饰网页中的元素，有很多技巧性的教程，如《一目了然：为你的链接添加图标提示 》、《图标修饰的精美CSS按钮 》等，仔细研习的话，相信对大家思路的开阔很有帮助。
由于小图标并没有直接在HTML中添加，所以这里我们用背景来实现它，在下面的CSS代码中你会发现在设置背景的时候我们又多定义了几个属性：
- .postlist li a{
- display:block;
- color:#666;
- text-decoration:none;
- background:#F7FAEF url(images/bullet.jpg) no-repeat 10px 10px;
- }
注意背景属性中最后面的两个数值，它们分别代表背景图片在X轴、Y轴方向的偏移量。它们的取值跟传统数学意义上的坐标又有所区别，数学坐标中两个正数所表征的点处于右上角象限，我也不记得是第几象限了…而在CSS中，两个正数所表征的点则处于右下象限，而这个点所表示的意义就是背景图像左上角所处的位置，不知道这样讲大家能不能理解，真是汗…
CSS中背景图像的左上角默认是对齐元素的左上角的，像上面CSS背景属性中定义了两个10像素数值之后，就表示图像的左上角向右、下各偏移10个像素。觉得理解不了的话，可以把这两个数值调整一下看看效果，实践是真理之母嘛，这两个值也可以取负数，甚至是百分比，具体细节大家可以参考《百分比进行背景图片定位》。
现在浏览器中作为背景的小图标是被链接文本遮盖住的，我们可以通过定义padding来将链接左侧的空间腾出来容纳图标，顺便也利用它来增加点行高：
- .postlist li a{
- ... ...
- padding:5px 0 5px 25px;
- }
最后添加鼠标经过链接变换文本颜色和背景色的效果：
- .postlist li a:hover{
- background-color:#FFFEE6;
- color:#000;
- }
在这里我们使用了background-color属性，在这个属性中我们只能定义背景颜色。事实上我们之前所使用的background是CSS中的一个复合属性，如果明确的划分开来，它里面除了background-color之外，还有background-image、background-repeat及background-position等单一属性，只不过每个都单独书写的话会增加很多CSS代码量，所以习惯上我们还是一般用background来综合定义背景属性。之前罗嗦了一大堆的两个数值，事实上就是所谓的background-position属性，我们不妨在之前的:hover中再添加一条CSS规则：
- .postlist li a:hover{
- ... ...
- background-position:12px 10px;
- }
这样一来链接文本的触发效果就更明显了。现在网络上很多针对CSS技巧或经验的文章中，都会提到背景定位属性的应用，创意够好的话，可以利用它来实现出很多巧妙的效果，像《巧用CSS为图片添加修饰点缀效果》、《纯CSS实现图片缩略与延展效果》、《别开生面纯CSS实现相册滑动浏览》等都是不错的教程。
喜欢的就爱屋及乌 被雷了就诛连九族
欢迎您访问西米CC博客，本文被浏览了196次。若需要转载西米CC的原创文章，请接受如下的小小要求，所转载日志文章开端或者末尾做如下标识：
本文转载自：西米CC - http://ximicc.com
