<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导航栏的例子可以到这些网站上去看一下：
http://css.maxdesign.com.au/listamatic/
http://css.maxdesign.com.au/listamatic2/
http://css.maxdesign.com.au/listutorial/

这就是我们的制作导航栏的全过程，我希望大家能喜欢它，并且继续关注我们下一部分的内容！

这是我们教程的第六部分，现在我们将要填加我们网页的内容部分。

为网站的内容添加主体容器
首先我们要在我们的样式表单中添加一个ID选择器，设定他的宽度为514像素，
以下内容为程序代码

#content {
width: 514px;
float: left;
}

因为导航栏浮在左侧，我们需要添加一个“float: left;”到我们的“left”ID里，但同时我们需要添加它到我们的“content”ID里，因为它也浮在我们的主ID容器左侧：
以下内容为程序代码

#left {
width: 178px;
float: left;
}

我们填加这个到我们的Xhtml代码里：http://css.maxdesign.com.au/floatutorial/introduction.htm
以下内容为程序代码

<div id="content">this is the right</div>

如果上面的这些讲解使你感觉有一定难度，我敢保证这些将会对你很有用：
* 更多的关于Float basics
* 关于Float的教程
当然，我们的内容现在是紧贴着左边的导航栏的，而我们想要的效果是空出一些空隙的，所以我们要填加一些内容容器的样式：
以下内容为程序代码

#content {
width: 479px;
float: left;
padding-top: 15px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 20px;
}

我们也可以用下面的简短的代码来实现：
以下内容为程序代码

#content {
width: 479px;
float: left;
padding: 15px 0 10px 20px;
}

这样写同样是严密的，第一个值是定义了上端空隙，第二个定义了右端空隙，第三个定义了底端空隙，第四个定义了左端空隙。如果我们添加了空隙，我们需要编辑我们的容器的宽度了，因为实际的宽度是随着这20像素（左边20像素，右边0像素）的空隙而变化的。所以我们需要改一下容器的宽为494，但同时因为我也想要右边出现一些空白，那样文件看上去不是紧贴着右边，于是再扣除15像素，就得到了现在的值479。
可能这时有朋友会说了：“喂，你为什么不只用一个紧靠的"width: 494px"再结合一个"padding-right: 15px"？”呵呵，不错的想法，其实开始时我也是这样做的，而且在 Safari, FireFox and Mozilla浏览器上都能显示的很正常，但在IE浏览器上就不行了，在IE浏览器上显示时，整个内容跳到了我的导航栏的下面（即left ID容器的下面）。显然在IE中它没有留下足够的空白区来使右边正好适合。目前我只能这样解释。通过这样的小技巧同样是完美的在各个浏览器上显示。

添加标题
要添加标题，我们要添加一个header 标签在我们的Xhtml代码里面：
以下内容为程序代码

<h2>This is the title</h2>

现在我们要为它添加一个样式来定义它的外观：
以下内容为程序代码

#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;
}

我们使用#content h2在这里意思是我们要给content ID 里的h2定义一个样式。意思就是说在内容DIV里的所有的h2的标签的显示样式效果都是这样的。我们也可以在这个content ID的外面定义h2标签的样式，那样的话，整个网页上的h2标签里的内容都显示同样的效果。如果你想要用其它的h2样式例如在left容器，在前面添加这个id将是很方便的。
以下内容为程序代码

<div id="content">all h2 tags here will have this style</div>

在content h2中的第一行CSS设置了字体的样式： 字体的宽度 (normal),字体的大小（18px）和字体的名称。类似于padding属性。这也是用一行的简写形式，它用一行的代码为不同的字体设置了所有的这些属性值。接下来我们设置文本的颜色，第三步设置背景图片的属性。也这是以前我们曾做过的背景图。同样是用简写的代码，我定义了背景图片颜色（transparent），背景图片路径background-image和background-repeat这三个属性写在一行里就可以全部表示出来。最后两行代码是定义了我们的header的总宽度和空隙量。
添加文本内容
这是文本内容的样式：
以下内容为程序代码

.text {
font: 11px/18px Verdana, Arial, Helvetica, sans-serif;
color: #5B604C;
margin-bottom: 10px;
}

现在我们用一个class，不用在最前面，因为我们反复的要用这个样式在我们的网页中。第一行设置了字体的样式，11像素的字体大小，18像素的行高，第二行我们定义了文本的颜色，在最后我们通过在段与段之间添加10像素的底端空白来增加一些距离。
在我们的Xhtml代码中的h2标签的下面我们添加一个段落标签，用来存放我们的文本内容，并将它就用其“text”样式！
以下内容为程序代码

<p class="text">Here comes the text</p>

添加图像
这是右对齐的图像的样式：
以下内容为程序代码

.imageright {
float: right;
padding: 7px;
background-color: #ffffff;
border: 1px solid #bac1a3;
}

同样的，我们用一个class来设置它的样式，是因为我们将要能在我们的网页上多次应用这个样式。我们的图像是浮在我们的文本DIV里的，所以我们添加： "float:right"。然后我们设置一个7个像素的空隙在图像的四周，并设置了一个白色的背景，这样将颜色一个白色的区域围绕着图像。然后，我们添加了一个1像素的边，颜色为#bac1a3。你也可以再添加其它的Class为一个左对齐的图像，比如叫它“.imageleft”并用同样的属性和值，做为浮动的部分，你要修改"float: right" to "float: left".。
这是最后的结果