body {
background: #F7F7F6 url(images/background.gif) repeat-y 50% 0;
background-attachment: fixed;
}
我们的背景图是一个5像素高的“线条”，它在垂直方向上延伸重复就铺满了整个页面。在水平方向是以浏览
器窗口的50%水平方向开始平铺线条，上边距为0。Background-attachment: fixed,意思是背景将不随着内容
的滚动而变化，是固定的。我们Body标签作为我们的放置这些参数的容器，是因为它要应用到整个页面。
观看这时的结果：点这里
添加我们的第一个DIV
现在我们就要依次添加我们的DIV了。
这是我们的网页头的CSS
以下内容为程序代码
#header {
text-align: center;
}
我们用一个ID符号建立我们的网页头的容器DIV，一个ID符号总是对应仅有的一个网页上的元素。一个对此ID
的CSS描述必须是唯一的伴随这个文件，我们的header是需要居中的，所以我们用到了"text-align:
centered;"，这段代码就是添加header的内容的。
以下内容为程序代码
<div id="header"><img src="images/header.jpg"
alt="My blog" width="692" height="90" /></div>
你可能注意到这时预览结果时的图像没有在最顶上，所以我们在body标签里还要加上 "margin: 0"
and"padding: 0"
以下内容为程序代码
body {
background: #F7F7F6 url(images/background.gif) repeat-y 50% 0;
background-attachment: fixed;
margin: 0;
padding: 0;
}
观看结果：点这里
如果以上讲的这些对你非常陌生的话，那么你最好阅读一下这个
完整的关于CSS的介绍以便有一个更好的了解对
我们现在做的事情，祝你好运！
在我们以前的几个部分里，我们做过了一些很基本的CSS代码，如果是第一次来这儿的朋友可以先看看前几部分的内容：第一部分、第二部分、第三部分、第四部分，今天我们的教程里将来实现左侧导航栏的制作。
但在开始之前，当建立一个网页的时候，我们必须总是尽可能让人容易理解的写语法，如果你看了第四部分内容的评价的话，你可能注意到有人提出了一个建议是，使用h1标签元素是更好的对于网页头部分，因为那是更容易理解的代码并且它使一个站点更具有亲和力容易更好地被搜索引擎收录。想当然这些更重要一些，所以我已经把我们的代码按照这种方法来修改了。
图片更换的技术
这个技术实际上叫做图像替换技术，意思是我们用一个文本来替换真实的图片在我们的html代码中。页面头的图片在支持CSS（当我们使用“ background: url(images/header.jpg);”来设置背景图片时）的浏览器里将会显示出来，并且文本是隐藏的（因为代码：“text-indent: -9999px;”），因为我们的CSS代码将文本定位到了我们可见区域之外。在旧的浏览器上或是在盲人用的屏幕阅读器上你将会看到文本的替代，我们用这种更易理解的代码。
以下内容为程序代码
h1 {
width: 692px;
height: 90px;
text-indent: -9999px;
background: url(images/header.jpg);
margin: 0;
padding: 0;
}
网页头的背景图像的宽和高是必须定义一些空间的。为了确保我的们的图像是很精确的置于我们的页而后顶部位置 margin: 0; padding: 0;也是必须的，此外，我在body标签中放置text-align: center;是因为所有的内容都将要是居中的。然后，有些内容是不居中的，所以我们要添加text-align: left;在那里。我们的这个容器margin: 0px auto;意思是它将出现在一个最顶端（0px）和居中的（auto）。
制作导航栏
要制作左侧的导航栏按扭，首先要制作一个ID容器存放里面的内容:
以下内容为程序代码
#left {
width: 178px;
}
到目前为止我们需要做的只是定义它的宽度，在这个宽度的left容器中我们放置一个DIV容器作为这个导航，命名为：navcontainer.用CSS建立一个导航最好的方法是用它本身那些导航的点，就像以前用html做好内容,然后再定义它的CSS样式一样。就像这样：
以下内容为程序代码
<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>
这样会出一个默认的点，而因为我们不想用它的默认的这个点，而要用一个漂亮的背景上的点来代替，所以我们要在CSS中移除这些点，要进行的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;
}
第一部分代码定义了这个导航容器的宽度，第二部分定义了这个导航容器的“Ul”标签.margin: 0;padding: 0;确保了在按扭和按扭之间没有空隙并且移掉了左边的缩进。list-style-type: none;移除了标准html格式里的小点，然后是定义里面文字样式，在最后一行，是用来给我们要做的漂亮的导航按扭每行下面加一条白线。
以下内容为程序代码
#navcontainer a {
display: block;
width: 178px;
height: 22px;
}
这个定义了一个我们的导航栏的“a”标签，或者叫做“链接标签”。这样定义之后就会影响到每一个导航栏里的按扭，首先，我们使用display: block;，显示设置为一个元素的显示方式，这里设置为“block”是需要让这个链接的块儿自动调整到适合大小，后两行是设置的每个按扭的宽和高。
鼠标经过时的状态是通过交换背景图片来实现的，使用的是a:hover 的样式。这是详细的代码：
以下内容为程序代码
#navcontainer a:hover {
background: url(bg_navbutton_over.gif);
color: #A5003B;
text-decoration: none;
}
颜色的设置是通过改变Color属性的，而text-decoration: none;是用来防止正规的链接中的下划线出现的。通常状况下，为了使你的导航栏能表现的更清晰，更具体，所以我又添加了一个额外的样式current，这个用来显示当前网站所处的页面。代码如下：
以下内容为程序代码
#navcontainer li a#current {
background: url(bg_navbutton_over.gif);
color: #A5003B;
text-decoration: none;
}
这个样式的定义用在
|
