PSD模板转XHTML/CSS文档教程(4)

CSS样式设置

打开”styles.css”，开始编辑HTML元素body和container DIV的样式，代码如下：

对于body，只是简单的增加背景图片，并重复出现。对于container，设置margin为auto，是能让导航图片居中显示，宽度正是导航图片的宽度。

接下来设置nav DIV的样式，代码如下：

我们必须意识到nav DIV的高度和宽度都是固定的，正是导航图片的高度和宽度，而且文本要缩进到-9999px，这样是为了隐藏文本。

接下来设置每个无序列表LI的样式：

背景图片都是一样的，但是宽度和位置不一样。宽度可以在photoshop中测量出来，如下所示：

最后设置LI元素在激活状态下的CSS样式：同样也是要调整背景图的位置。

好了，关于代码就写在这了。当然还有其它方式来实现这种效果，需要各位多多实践！