CSS混沌初开VIII：侧边栏友情链接

这是本教程的最后一部分，讲解如何实现友情链接版块。需要说明的是，这部分我们将把样式表转换为外联式来实现CSS样式的设定。

首先是XHTML代码：

<div id="favlinks">
<h2>My Favorite Sites</h2>
<ul class="extlinks">
    <li><a href="http://stopdesign.com/">Stopdesign</a></li>
    <li><a href="http://www.simplebits.com/">SimpleBits</a></li>
    <li><a href="http://www.mezzoblue.com/" >Mezzoblue</a></li>
    <li><a href="http://www.ximicc.com/">Ximicc</a></li>
</ul>
</div>

我们把所有的链接放置在一个名为fav的DIV容器中，并将在CSS中定义其width、margin和padding等属性。栏目标题利用H2标签实现，而链接链表则还是用无序列表ul来实现。

接下来定义favlinks容器的样式：

#favlinks {
    width: 163px;
    padding-left: 15px;
    margin-top: 10px;
}

其中定义的三个属性都比较简单，你可能会注意到width值与导航菜单的宽度178不相等，原因仍然是padding-left中定义了15px的内填充，所以其宽度值应该是178-15=163px。如果你对此不是很理解，建议你去参考一些介绍CSS中盒模型原理的文章。

下面是栏目标题文字的CSS定义：

#favlinks h2 {
    font: normal 16px Georgia, Times New Roman, Times, serif;
    color: #5C604D;
    margin: 0 0 10px 0;
    padding: 0;
}

除了设置文字的字体和颜色之外，padding和margin的定义也是必须的，因为如果不明确指定的话，栏目标题和链接列表之间的间隔可能会不可预期，在这里我直接用margin属性定义了10px的下边距。

无序列表ul的CSS定义：

#favlinks ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

这里的属性设置与第五部分教程中实现导航的ul设置一样，主要是隐藏了默认的小圆点项目符号，并把边距和填充设置为0。

为列表中各个链接添加图标：

ul.extlinks li {
    background: url(images/bullet_extlink.gif) no-repeat 0 3px;
    font: normal 11px/16px Verdana, Arial, Helvetica, sans-serif;
    padding-left: 12px;
}

在XHTML中我们把名为extlinks的class类应用在了ul标签上，所以这里用ul.extlinks li的选择符组合来定义. Extlinks下级中的li元素样式。图标还是采用背景的方式实现，属性中为其定义了坐标，即Y轴方向下移3px，目的是为了让图标与其后的链接文字实现更好的对齐。Padding中只定义了一个左填充，防止链接文字与图标产生重叠。

链接样式的定义：

.extlinks a:link {
    color: #A5003B;
    text-decoration: none;
    border-bottom: 1px dotted #A5003B;
}

.extlinks a:visited {
    color: #6F2D47;
    text-decoration: none;
    border-bottom: 1px dotted #959E79;
}

.extlinks a:hover {
    background-color: #C3C9B1;
    color: #A5003B;
    text-decoration: none;
    border-bottom: 1px solid #A5003B;
}

在鼠标经过的状态中，除了背景色外，我们还用边框属性定义了一条1px的实线下边框，相应的也就需要设置doc属性来消除默认的链接下划线。关于字体的定义不是必须的，因为在li标签的CSS中已经体现过了。对访问之后的链接，我们将文字及下边框的颜色作了细微的淡化，使其不会那么显眼，并提示访问者这个链接你已经点击过了。定义链接样式的时候，注意四个链接转台的顺序，正确的应该是LVHA，否则鼠标经过等效果可能会不能正常显示，这里有一种很好很有趣的方法希望能帮你牢记这个顺序：LOVE/HATE。

点击浏览效果

创建外部样式表

现在所有的界面设计和页面构建工作已经完成了，还剩下最后一项工作。在本教程的学习中，你可能会发现我经常使用内联样式，事实上在很多人的概念中外部样式表才是王道，我们应该把CSS样式定义在一个单独的样式表文件中，然后与网页文档连接起来。现在我们可以把之前的样式定义剪切出来，粘贴到一个新文档中，命名为ximicc.css 。

连接外部样式表

<link rel="stylesheet" type="text/css" media="screen" href="ximicc.css" />

因为这里的样式我们只要显示在电脑屏幕上，所以连接代码里的media参数设置为screen，若需要打印页面，则把该参数设置为print会有更好的打印效果。关于该参数更多的设置，可以 参考这里 。

该系列教程至此结束，希望大家能真正学到一点东西。若你对该教程有什么心得或建议，欢迎评论或浏览。另外由于水平有限，翻译的过程中难免有不妥之处，也希望大家多多纠正，西米CC欢迎大家的光临。

经典论坛交流：
http://bbs.blueidea.com/thread-2864629-1-1.html

本文链接：http://www.blueidea.com/tech/web/2008/5893.asp　

出处：蓝色理想
责任编辑：bluehearts

上一页 页脚的构建 下一页

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。