CSS网页制作布局实例教程

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欢迎大家的光临。

最新评论