CSS网页制作布局实例教程

相关文章：用CSS建设网站的实例
原文博客：veerle
翻译整理：西米CC
来自国外博客veerle的一个系列教程，分八个部分讲解一张完整CSS页面的构建过程。虽然它不是每个步骤都解释得非常详细，但是其中提及的很多技巧和经验都很值得初学者借鉴，从界面设计到页面构建，强调了很多细节的设计理念。在翻译的过程中，个人觉得本教程比较薄弱的环节是页面整体布局的搭建，篇幅不是很充分，不过大家仍然可以通过观察源文件进行查漏补缺。
本教程最终效果如下（浏览示例页面）：
本教程素材及页面源代码下载

教程的每个部分都有其侧重点，其中前三节都是关于素材制作与设计的，要求有一定的Photoshop操作基础，我想这也是网页设计必备的基础技能之一。
英文原文
#p#

CSS混沌初开I：导航菜单素材的设计
现在开始我们将学习如何一步一步的构建一张CSS页面。本教程分成以下几个部分：第一讲主要是关于如何在PS中制作导航按钮素材；第二部分主要针对的内容是背景，接着是页面的整体布局以及顶部解析，最后一部分是如何整合CSS和XHTML。
有些人可能会疑惑为什么要从导航按钮图片的制作开始，事实上我的初衷是让大家了解进而注重素材制作中的一些细节处理，这对最终的作品效果有很大的影响，至少在视觉上而言。首先看一下完成的效果：

玻璃质感导航图片的制作：
首先我们在Photoshop中建立一个178x22像素的RGB空白文档，添加一个新图层命名为“按钮”，并用灰色#ECECEC进行填充。再新建一个图层命名为“高光”，在其上、左边缘各绘制1px的白色线条，你用画笔或单像素选取工具都可以。然后我们用橡皮工具把左边缘白线的底部擦除一段，在这里我使用的是大小20px透明度为50%的橡皮刷：

新建一个名为“网点”的图层，用1px的铅笔工具在适当的位置绘制几个小点，示例中的颜色是#727272，当然这里你可以自由发挥设计更有创意的小点组合，关键就是要让它们看起来精致有序：

接着我们可以通过钢笔工具绘制路径创建选区，并在选区内填充#d6d6d6颜色，来模拟玻璃的质感效果。整个图片素材的制作过程虽然不是很复杂，但是最终效果看起来也不是很差，不是么？

鼠标经过导航时的翻转图片：
创建翻转效果图片，我们只要简单的在原有素材基础上调整色调就即可，关于文本的添加在这里就不细说了。我们可以为每个图层调整色调，在示例中我主要使用了一下几种颜色：背景#BFE3FF、玻璃质感#A5D1F3、网点#E4001B。这部分教程涉及到一些Photoshop的基本知识，如果你不是很了解，建议先学习一些PS的入门基础，毕竟Adobe合并了Macromedia之后，其旗下软件尤其是PS与网页设计的关联性已经越来越紧密了，大多时候你要设计出优秀美观的网页，都离不开这些软件的帮助。当然颜色选择要视乎你的需要，制作的方法大致还是相通的，你也可以发挥创意进行更好的细节设计：

下载本例素材源文件
#p#

CSS混沌初开II:背景图案及配色
本教程的第二部分主要有两个重点：一是如何正确选择导航菜单中所涉及的颜色，虽然它没有很多的技术含量，但使用的颜色是否恰当，与后期出来的效果是有很大影响的；另外一部分主要是关于页面背景的，侧重于制作背景图片素材时的一些细节问题。
在第一讲中，我主要是介绍一种实现玻璃材质按钮的快捷途径，现在来讲颜色的选择似乎有点滞后了。不过鉴于网站的风格存在差异，素材色系的选择也是界面设计阶段很重要的一块内容，网络上也有很多关于网页色彩的文章，大家可以依据其中介绍的一些基本知识进行参考，虽然良好的色彩感觉需要很长一段时间来培养。
选择你的色彩体系
事实上色系的选择会体现很多个人因素，毕竟每个人都会有各自的色彩偏好，你的选择也会彰显你的个人风格。没人能建议你“必须选择什么颜色”，这里我也只能提供一些个人认为比较实用的意见：

使用至少一种高饱和度、高辨识度的色彩，并以其色调定义站点的整体基调。把这个色彩运用在文本链接上，能使其更加显眼、引人关注； 谨记不要在一张页面中使用过多的颜色，这样只会让你的网页看起来很花哨繁杂。我的建议是最好保持在三种之内：一个强调色和两个辅色；

在颜色的搭配上，不论是主色还是辅助色，都要善于通过它们明度变化来衍生更多的色彩，如果只是反复的使用三种以下的颜色未免会让人感觉单调，当然这也不是意味着颜色变化越多你的页面看起来就会越出色，仍然要视乎网站的整体风格和设计者对颜色的驾驭能力：

在PS中我们可以通过在色相/饱和度（Ctrl U）面板中调整参数来调配颜色。事实上图中的几组颜色就是通过这种方法调制出来的，当然在这个面板中可以变化出很多颜色，具体哪个参数应该为什么值都没有硬性的规定，网络上有很多推荐的色彩组合并明确给出了RGB值，大家在利用这种方法配色的时候也可以参考那些文章教程。
如果你看了上面的讲解之后仍然不知道如何着手，这段关于颜色的影片 或许会对你有所帮助。事实上我觉得每个人都应该去看一下这个影片，不仅因为它本身设计得相当有趣，更重要的是对于认识和了解大众化的色彩体验和感知从而运用到网页设计中，它都是一个很好的引导和巩固。
是时候开始绘制背景图案了
现在我们开始讨论网页的背景图案。当我们在PS等软件中创作背景图案时，往往要精细到像素，尤其是那些平铺填充的背景。首先我们在PS中新建一个30x像素的空白文档，填充适当的颜色，并用铅笔工具在其上绘制一些单像素小点，下面是一些例子：

如第一讲中导航按钮上的小点一样，在这里你也可以尽量的发挥自己的创意，但是还是有几个需要注意的地方，比如小点的颜色，不能跟背景色反差太大，不然平铺以后它们会变得很刺眼。如果要利用小点来组合出一些图案或线条，我通常会采用复制图层并通过方向键调整其位置的方法，适当的时候还会变化其图层模式或透明度等。

制作这些背景图案的一个难点就是，如何保证图案平铺时能实现无缝接合，毕竟背景的面积往往比较大，它上面若有割裂就会很显眼。我通常采用的方法是利用PS中的矩形选框工具，比如下图中，正方形选区左上角标识出的像素必须与其它三个标识区一致，那么当我们把这样一块区域截取下来进行平铺的时候就不会有问题：

当然这个问题是否容易解决，也是视乎你最初设计的背景图案，如果我们动手的时候就把可能遇到的一些问题考虑在内，那么到解决的时候也不会太费力甚至返工了。
下载本例素材源文件
#p#

CSS混沌初开III:顶部图片视觉修饰
这节是关于素材设计的最后一部分了，设计工作完成后将会开始讲解如何切片以及在CSS和XHTML中构建最终页面。首先看一下这节设计的效果图：

在制作按钮时，我用了粉红和暗绿两种色调，可能看起来有点怪，但个人很钟意这个组合。在设计网页整体界面的过程中，我会给出一些意见和建议，重点是顶部的图片，如何增加一些细节，让它看起来更加的美观、精致。
顶部图片的视觉处理
在教程的前两部分中，提到过导航按钮的颜色选择，现在我们来看一下如何处理一张花卉图像的色调，使其与页面的风格达到统一。在用到的花卉图像素材中，大家可以发现它上面也有红和绿两种色调，我要做的事情就是把其中的颜色调制成粉红和暗绿，就好似导航菜单中使用的色调一样：

首先来看一下图片中花朵的颜色，它的色调偏向于大红，还是使用PS中的色相/饱和度命令来对它进行调整。利用快捷键按Ctrl U调出色相/饱和度面板，在“编辑”项的下拉列表中选择“红色（Ctrl 1）”，这样我们就能只针对图像中的红色进行调整了。拖动色相滑块调制出我们需要的红色，具体的数值依据实际情况，比如我这里是大致是-30左右：

下一步就是通过修饰细节增加一些辅助色调来增进视觉效果，为接下来的滤镜处理作一些预处理。顶部图片的处理对创意有一定的要求，如果有相关的经验的话也就不是件难事，所以素材处理能力以及个人的美工基础都会对设计过程、设计结果产生影响：

在之前的步骤中图片的尺寸和体积无疑已经进行了调整，但是如果有比较多的细节要处理的话，建议还是在原始尺寸上操作，像示例中的图片我刚开始也是在1600 1200的原始大小下进行处理的。我为图像添加了个人比较偏爱的绘画涂抹滤镜（滤镜菜单—艺术效果），效果如下图。在PS中，滤镜的运用是很有趣的一件事情，调节其中的参数就可以达到很多意想不到的效果，加之在CS版本中提供了可用滤镜效果的缩略图预览，让这个实用的工具用起来更加方便：

接着我们添加一些波浪线条来营造虚幻的意境，可以用笔刷或者钢笔绘制一些曲线，当然也可以用渐变工具制作，只要达到下图中渐隐效果即可。事实上我们只需要做出其中一条就可以了，然后复制图层调整其透明度、角度、扭曲制作出其它的线条。这里使用的颜色还是推荐使用粉红，为了区别于花朵的颜色，可以把线条的粉红明度调大一点。在图片的右边，我利用Tamuz字体添加了一个修饰符号，效果如下：

如果对以上操作有疑问，可以 下载QuickTime演示影片 观看！
在图片上添加BLOG标题
Blog的标题反映了你网站的内容主题，其文字组织因人而异，一般还会加上一个图标或LOGO，毕竟每个人都想自己的Blog与众不同，有一些标志性的元素，在这里我就简单的选用一个仙人掌标志：

下面是一些关于字体或修饰符号的资源链接： Minion修饰符和Tamuz字体 Adobe提供的修饰性字体 一系列免费的Dingbats字体
最终的界面设计效果
至今为止，不论是在导航按钮还是顶部图片的制作，我们都还没有遇到什么棘手的难题。现在让我们把做出来的素材整合在一起，拼合成一张 最终的界面效果 。这已经是界面设计的最后一个阶段了，所有若还有什么可添加的修饰元素，最好都在界面效果图中体现出来。在我的示例页面中，文章标题和友情链接的前面我都用精致的图标进行修饰，效果看起来还可以，当然你们可以选择自己喜欢的素材替换，最好也能在设计过程中体会到乐趣！
#p#

CSS混沌初开V：侧边栏导航菜单的实现
首先对教程的第四部分作一点补充。有人建议Blog的标题最好使用H1标签，以文本的形式表现标题内容，原因是不论是在CSS关闭的情况下，还是对于搜索引擎的抓取，H1标签结合文本的形式都具有更好的可访问性。这个提议很有道理，很多人也是这么做的，所以我也建议大家对之前的代码进行调整。
若使用H1标签来实现Blog标题，又想保持原来标题位置的图片的话，那么就有必要了解一下CSS中很经典的图像替换文本技术。简单点说就是在XHTML中包含了文本，并为其设置背景图片，但是要通过CSS“隐藏”文本而仅仅显示背景图片。若你对这个技术不是很了解，本站也有一篇专门关于 图像替换文本技术 的文章，希望对你有所帮助。
图像替换文本技术
这个技术有时候我们也称之为文本替换或图像替换，其强调的核心是在HTML代码中我们使用文本，然后通过一些方法将文本“隐藏”，而仅显示背景或其它形式的图片，这样在保证可访问性的同时，也使得页面因图像的应用而更加美观。比如我们可以将图片设置为背景，让后利用text-indent使文本有足够的缩进实现隐藏，代码如下：
h1 {
width: 692px;
height: 90px;
text-indent: -9999px;
background: url(images/header.jpg);
margin: 0;
padding: 0;
}
其中的width和height是必须定义的，且需和背景图片的尺寸保持一致。text-align: center被转移到了body标签中，这样页面中所有的内容都被定义为居中显示，而那些不需要居中的内容，如文章正文，我们可以再添加text-align: left进行覆盖。当然对于外围容器而言，我们利用margin: 0px auto使其在水平方向上保持在页面的中部。
导航菜单的实现
首先定义导航外围容器的样式：
#left {
width: 178px;
}
现在外围容器我们只要简单的定义其宽度，并赋予left的id名。在left容器中，我们添加一个名为navcontainer的子容器来放置导航菜单。实现导航的标签推荐使用无序列表ul，通过CSS我们可以改变其外观和形式。HTML结构如下：
<div id="navcontainer">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About me</a></li>
<li><a href="#">ximicc</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Photo roll</a></li>
</ul>
</div>

ul和li标签构建了一个简单的项目列表，其项目符号默认为小圆点，这是我们不需要的。利用CSS可以去掉那些小圆点，并用背景图片的形式替换以我们制作好的图标：

#navcontainer {
width: 178px;
}
#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
font: bold 12px/22px Verdana, Arial, Helvetica, sans-serif;
text-indent: 20px;
letter-spacing: 1px;
border-bottom: 1px solid #fff;
}
第一段代码还是定义导航容器的宽度，其值与left容器相同。第二段代码主要用于改变列表的外观，margin和padding确保导航项目的周围没有空隙，并去除了列表项默认的缩进，list-style-type则定义了列表的项目符号为无。text-indent使文本左边空出一定的空间，以便在之后的步骤中定义背景图片，并保证背景图不会被文本遮盖。最后一行代码在每个导航项目的底部生成一条白线，兼具美化和分界的功能。
接下来是链接外观的定义：
#navcontainer a {
display: block;
width: 178px;
height: 22px;
}
以上代码是对导航内a标签的CSS定义，作用于导航中的每个链接元素。display: block将链接对象转换为块级元素，然后再定义其宽和高，使得链接能具有类似按钮一样矩形的触发区域，并且让我们可以利用伪类a:hover来定义鼠标经过链接时的翻转效果，如在第二段代码中展示的简单的改变背景色或背景图片：

#navcontainer a:link, #navcontainer a:visited {
background: url(images/bg_navbutton.gif);
color: #5C604D;
text-decoration: none;
}
#navcontainer a:hover {
background: url(images/bg_navbutton_over.gif);
color: #A5003B;
text-decoration: none;
}
第一段代码定义了链接文本的颜色，并设置text-decoration属性为none来去除链接默认的下划线。导航的设计往往要求简洁、明了，并且具有很强的指示性，所以我在这里定义了一个额外的样式#current来表现当前页面处于导航中的哪个项目：
#navcontainer li a#current {
background: url(images/bg_navbutton_over.gif);
color: #A5003B;
text-decoration: none;
}
名为current的样式针对的是列表项目li中的链接元素，其属性的定义与链接的hover状态样式是一样的，现在我们要做的事情就是把这个样式应用到HTML中：
<div id="navcontainer">
<ul>
<li><a href="#" id="current">Home</a></li>
<li><a href="#">About me</a></li>
<li><a href="#">Contact me</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Photo roll</a></li>
</ul>
</div>
现在的current样式是应用在第一个li上，也就是浏览器解析后“Home”菜单较之其它的菜单项目有其独特的外观，表明当前的页面是属于“Home”这里栏目的。当然页面变化了，current样式应用的li对象也就不一样了。

#p#

CSS混沌初开IV：页面DIV布局解构
在前三讲的教程中我们已经完成了网页界面设计的工作，从本节开始，我们将关注如何对效果图进行解构，并初步拟定网页文件的DIV结构。
首先我们必须明确几个问题，比如设计好的界面应该划分成几块？每块对应网页中的哪部分内容？只有对这些问题有了概念之后，我们才能开始进行切片和导出的操作。如果对页面构建的整个流程很熟悉，那么以上几个问题并没有太大的难度，可能你在PS中设计素材的时候就已经开始考虑之后的DIV划分了。当然，我们是要有一定的应变能力，合理的组织CSS和XHTML，让最终出炉的网页具有更好的灵活性和可访问性。
本例中页面模块划分的规划

页面顶部（the header）； 左侧边栏（the left）； 主体内容（the content）； 页脚（the footer）；

必须进行切片并导出JPF或GIF的几块区域

顶部图片（header）； 默认导航图片（bg_navbutton） 翻转导航图片（bg_navbutton_over） 友情链接图标（bullet_extlink） 文章标题图标（bullet_title）

也许你会想：“那背景图片呢?”我没有把它罗列在其中，因为背景图片比较特殊，不论在何种分辨率下我们都要保持主体内容的居中，所以我们需要一种更聪明的方法。这是我们要导出的背景图片，它的尺寸是1600X5px，应该够用了，除非你拥有Apple公司30英寸的超宽屏显示器。
利用CSS定义页面的背景
下面的CSS代码可以让我们的页面背景保持居中显示：
body {
background: #F7F7F6 url(images/background.gif) repeat-y 50% 0;
background-attachment: fixed;
}
背景图片只有5px高度，所以我们将其设置为纵向平铺，然后利用参数50%使其水平居中，参数fixed的用处是让背景不随内容的滚动而滚动，它是“凝固”的。这里的选择符我们使用body，因为背景效果是针对整张页面而言的。

构建页面的DIV结构
首先来看一下顶部版块的CSS定义：
#header {
text-align: center;
}
顶部版块的样式我们使用id选择符，注意在同一个文档中id选择符必须是唯一的。网页的顶部也需要居中，这也是我们为什么定义text-align的原因。下面这段代码我们要添加在body标签之间：
<div id="header">
<img src="images/header.jpg" alt="ximicc" width="692" height="90" />
</div>
你可能也注意到了，当顶部图片应用到网页中的时候，其上边缘和浏览器边界之间有一定的间隙，所以在这里我们要用margin和padding进行完善：

body {
background: #F7F7F6 url(images/background.gif) repeat-y 50% 0;
background-attachment: fixed;
margin: 0;
padding: 0;
}
如果你对以上涉及的CSS还不是很熟悉的话，这个 入门教程（英文的，节哀...）建议你去看一下，相信会有很大的帮助。
#p#

CSS混沌初开VI：正文与图片的混排
现在我们可以开始在网页中添加内容了，在后续教程中将会介绍友情链接版块以及页脚的制作。
首先在CSS中添加一个id选择符，在其中定义一个宽度值514px (692-178)：
#content {
width: 514px;
float: left;
}
因为导航菜单浮动在页面主体的左边，所以我们要在#left中添加一条float: left语句，#content中的左浮动是针对其外围容器的，解析之后它将显示在导航右边的正文版块：
#left {
width: 178px;
float: left;
}
接下来在XHTML中添加如下代码：
<div id="content">this is the right</div>
如果你对上面的CSS和XHTML组织感到疑惑，下面的教程可能会对你有所帮助： CSS中的Float属性入门 浮动属性Float的应用
你会发现正文的内容跟导航菜单贴得很紧，我们可以利用padding来增加一点间隙：
#content {
width: 479px;
float: left;
padding-top: 15px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 20px;
}
也可以将代码简化成：
[/code]#content {
width: 479px;
float: left;
padding: 15px 0 10px 20px;
}
[/code]
不论是padding还是margin，若其后跟着四个数值，对应的边缘顺序是上右下左，即顺时针方向。大家会发现现在#container中定义的宽度由原来的514变成了479，因为我们为了让正文文本与左右边框空出一点距离，左边缘用padding实现，而右边缘因为整个DIV是左浮动的，所以我们直接将DIV的宽度缩减15px，所以width的值就变成了514-20-15=479px。

你可能会疑问：“为什么不直接使用"width: 494px" 和 "padding-right: 15px"呢？”刚开始的时候我也是这么做的，出来的效果在Safari, FireFox 和Mozilla还算正常，但在IE中就不行了，正文版块跳到了导航的下面，好像右边没有足够的空间容纳下正文DIV，具体问题出在哪里我也说不清楚，可能也是IE的一个Bug吧。
添加正文的文章标题
先来看一下主内容版块的结构：

我们把文章的标题放在H2标签中：
<h2>This is the title</h2>
针对文章标题的CSS定义如下：
#content h2 {
font: normal 18px Georgia, Times New Roman, Times, serif;
color: #80866A;
background: transparent url(images/bullet_title.gif) no-repeat;
width: 454px;
padding: 0 0 0 30px;
margin: 0;
}
这里我们使用#content h2的选择符组合，当然也可以直接对H2标签进行定义，但是会对页面中所有的H2元素都起作用。这个CSS样式的定义中，除了常规的字体集、颜色、字号之外，还利用padding属性在标题文本左边空出30px的缩进，目的是不要遮盖背景图片。背景background属性中，除了图片的路径及其平铺方式，还定义了其背景色为透明transparent，使整个标题更好的与其它元素融合
添加正文文本
下面一个class类.text定义了正文文字的样式：
.text {
font: 11px/18px Verdana, Arial, Helvetica, sans-serif;
color: #5B604C;
margin-bottom: 10px;
}
与id不同的是，class类可以在一张页面中重复使用，里面的属性比较简单，需要补充一下的是，11px/18px表示字体大小是11px，行高是18px。在XHTML中，我们添加一个段落标签P来放置文本，并应用.text样式：
<p class="text">Here comes the text</p>
在正文中添加混排图像
下面是应用在图像上的样式：
.imageright {
float: right;
padding: 7px;
background-color: #ffffff;
border: 1px solid #bac1a3;
}
这里我们还是使用class类，因为以后可能还会用到它。float:right让图片在文本块中居右，而白色的背景和四边均为7px的padding，使得图片的四周有了类似7像素白边的效果，目的是让图片内容与边框保持7px的间距。而真正的边框由border定义，1像素实线。如果在文本块中有居左的图片，我们可以再添加一个名为.imageleft的class类，具体的属性设置只要把float: right改成float: left就可以了。
#p#

CSS混沌初开VII：页脚的构建
在开始第七部分的教程之前，我要先纠正一个小错误。之前在添加正文内容时，我把它放在了一个DIV容器中，事实上如果我们用段落标签P作容器可以达到相同的效果，而且当CSS关闭时也能正常显示。用P标签来实现的话，还可以用margin来控制段落的上、下边距，也就不需要什么换行标签了。
首先要提醒大家的是，相对于表格布局方式，CSS中页脚的实现有着很大的区别。遗憾的是Safari作为一个新生浏览器，其对Web标准的支持还不是很完善，比如min-width和min-height属性在Safari中还没能得到良好的支持，但是页脚的实现我们往往需要用到它们。在继续本节教程之前，希望大家去了解一下这篇Bobby Van Der Sluis文章，它对CSS中的垂直定位和页脚实现作了很到位的讲解。
首先还是要先明确一下文档的DIV结构，之前制作的内容比如顶部、导航、正文等我们都封装到一个id名为container的DIV中，这组容器标签紧跟在body标签之后，接着就是一个id名为footer的页脚容器，代码如下：
<html>
...
<body>
<div id="container"> ... </div>
<div id="footer"> ... </div>
</body>
</html>
页脚DIV的CSS设置如下：
#footer {
margin: 0px auto;
position: relative;
background-color: #717F51;
border-top: 9px solid #F7F7F6;
width: 692px;
padding: 5px 0;
clear: both;
}
我们为页脚设置暗绿色的背景以及9px的上边框，宽度定义为692px。Clear属性用于清除浮动，简单点说就是在其左边或右边不允许有任何浮动元素。margin: 0px auto的语法在之前的教程中已经出现过了，其作用就是让页脚在页面中居中显示。为了不让页脚文字和边框贴得太近，我们用padding在上、下空出5px的填充空间。
接下来为页脚中的文字和链接定义样式：
#footer h2 {
maring: 0;
text-align: center;
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
color: #D3D8C4;
}
#footer h2 a:visited, #footer h2 a:link {
color: #D3D8C4;
text-decoration: none;
border-bottom: 1px dotted #D3D8C4;
}
#footer h2 a:hover {
color: #F7F7F6;
text-decoration: none;
border-bottom: none;
background-color: #A5003B;
}
页脚中的文字我们放置到H2标签中：
<div id="footer"><h2>....</h2></div>
上面这行代码我们添加在名为container的DIV闭合标签后面，也即是在body的闭合标签之前。接下来我们要添加一段Bobby Van Der Sluis建议采用的JS脚本，让页脚在Safari浏览器中也能固定在浏览器底部。
确保你使用的ID名跟在JS中定义的函数名保持一致。
完成JS的添加后，如果你在浏览器中预览，你会发现页脚并没有显示出来。这可能是因为有两个浮动容器(#left and #content)都需要进行浮动清除，在的文章中有很详细的介绍。我们需要添加下面的代码进行修正，首先添加一个用于清除浮动的DIV：
<div class="clear"> </div>
然后为其定义CSS：
.clear {
clear: both;
}
#p#
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欢迎大家的光临。

最新评论