细节处理 

通过上面的美化好，整个框架已经出来了，但是还不是那么令人满意。

如果你能完全掌握上面所提到的,基本细节部分也可以自己做了.

头像和账号信息列边距太近，我们修改成下面，下划线部分为新增。

/*头像列设置*/
#userRelations{
margin-left:10px;}

/*账号信息列设置*/
#userUpdates{
width:610px;
margin-right:20px;}

设置下有多少人看过那部分，也就是个人状态栏

#userStatus {
margin:0;
padding:10px 0px 10px 10px;}

小提示：如果没有上面的代码，你会发现个人状态那一栏会变得很宽

顶部导航

小提示：这里说明一下，一般我们要先两个颜色，一种浅颜色，一种深颜色。

浅颜色:#9E988C

深颜色:#686357

这两种颜色在下面会反复出现，就是为了区别鼠标在链接上的样式。

先修改下导航那蓝色背景

#navigation {
background: #9E988C;}

发现左边还有个1像素的蓝色边框,你可更换颜色(#600051是颜色代码),也可以去掉.

这是换颜色
border-left:#600051;

这是去掉，建议使用去掉。
border:0;

导航中每个链接中间都有一个分隔竖线,我也可以换成自己喜欢的图片,也可以去掉

这是换图片
#navigation ul li{background-image:url(图片URL)!important;} 

这是去掉,建议使用去掉。
#navigation ul li{background-image:none !important;} 

保存下，看一下效果，效果还行，鼠标移上去，背景不协调，我们修改一下链接移去的样式。

这里插入CSS伪类--动态链接

概念就不说了，看下面

a:link {} /* 未访问的链接 */
a:visited {} /* 已访问的链接 */
a:hover {} /* 鼠标在链接上 */
a:active {} /* 激活链接 */

一般情况下a:link和a:visited的样式是一样的。

因为只是修改导航部分的链接，所以在前面加上导航的ID。

#navigation a:link, #navigation a:visited{
color:#fff;
background:#9E988C;}

分析:

上面的意思导航条的未访问链接和已访问链接样式是：颜色为#fff,背景为#9E988C

小提示：属性一样的样式可以用逗号（,）隔开。

那么鼠标在链接的代码要怎么写呢，大家自己先动手写一写。

#navigation a:hover {
background:#686357;}

因为我们只要修改背景就行，颜色还是#fff就不能再写了。

我们把鼠标移到学校后面的小倒三角，发现样式还是原先的。这里说明下，这是因为列表嵌套，子列表有他自己的样式，我现在修改子列表的样式

先修改子列表的整体样式

#navigation ul ul{
background:#9E988C;
border: 1px solid #686357;}

分析：

你注意到那两个ul了没，这个就是修改嵌套里面的子列表样式
这里修改到背景颜色和边框

再修改未访问链接和已访问链接样式

#navigation ul ul a, #navigation ul ul a:visited {
color:#fff;
border-bottom: 1px solid #686357;
background:#9E988C;}

小提示: a:link可以略写成a就可以

分析:

上面修改到颜色和底边框和背景

再修改鼠标在链接样式

#navigation ul ul a:hover {
color:#fff;
background: #686357;

导航部分最后代码是

顶部导航做好了,下面做整体页面的文字颜色及链接颜色,还记得整何等用什么选择符么?

注意:文字分有链接文字和无链接文字

这里说明一下,为了保持整体色调一致,一般我们写代码之前就应该要好选配好色的.

为了配合导航色调,我们采用整体颜色为#9E988C

body {   
color:#9E988C;
padding:0;   
margin:0;     
background:url(upload/2007_12/071228043573731.gif) repeat;}

小提示:以后如果需要用到以前用过的选择符,我都会把整个代码复制下面,新增加的会加粗.

将上面代码覆盖到原先的body上,保存一下,看看是不是整个页面上的基本颜色都变,但是有链接部分的还是蓝色的,现在我们要处理这些链接样式.

a:link,a:visited{
color:#9E988C;}

分析:

还记得上面我们是怎么做导航的么,是不是有点像,因为前面没有id,所以表示整体的链接样式.还有就是未访问的链接和已访问的链接一般都是一样的,一样的属性,可以用逗号隔开,使代码简洁,这些我上面都说过了.不懂大家有印象没.

下面做鼠标在链接时的样式

a:hover{
color:#686357;}

整体链接样式的代码

将上面代码放到涂鸦板保存一下,现在不是大部分颜色都变成我们设置的.

这里提示下,链接样式不单单只有改颜色这一种美化方法,也可以加背景颜色,边框等,有兴趣自己试下,代码上面都出现.

不过底部的链接却不见了,原来我的设置的颜色和背景色混在一起了.现在我们再修改下底部链接的样式.

既然是底部,前面一定得加相应的选择符#footer,前面我们已经用到这过个选择符,我们复制下面,加个文字颜色和链接颜色就行

/*底部设置*/
#footer {
width:880px;
background:#9E9986;}
/*底部文字样式*/
#footer p{
padding:0 10px;
color:#686357;}

/*底部链接样式*/
#footer a:link,#footer a:visited,#footer a:hover{
color:#686357;}

分析: 

底部文字样式那边#footer后面为什么要加个p,直接加在底部设置那边不行么?
因为文字部分是在<p></p>里面,校内网已经有设置p样式,所以我们要覆盖他的p样式.padding出现了，大家明白他作用么？不明白？你先去掉padding:0 10px;

保存一下，对比下有和没有的区别就明白了。另有的同学不喜欢#footer那边的文字，你可以在上面隐藏版块那边加个#footer p,这样底下就什么字都没了，你只要加个图片就OK。