这里我只介绍这些常用的 CSS 属性了，其他的请参看 CSS2.0 中文手册。 当我们写好了页面大致的 DIV 结构后，我们就可以开始细致地对每一个部分进行制作了。

　　在上一章中我们写入了一些样式，那些样式是为了预览结构而写入的，我们把 css.css 中的样式全部清除掉，重新写入以下样式代码：

　　/*基本信息*/

　　body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}

　　a:link,a:visited {font-size:12px;text-decoration:none;}

　　a:hover{}

　　/*页面层容器*/

　　#container {w idth:800px;margin:10px auto}

　　样式说明：

　　a:link,a:visited {font-size:12px;text-decoration:none;}

　　a:hover {}

　　这两项分别是控制页面中超链接的样式，具体我就不说明了，请大家参阅手册。

　　第 43 页

　　《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

　　#container {width:800px;margin:10px auto}

　　指定整个页面的显示区域。

　　width:800px 指定宽度为 800 像素，这里根据实际所需设定。

　　margin:10px auto，则是页面上、下边距为 10 个像素，并且居中显示。 上一章中我们讲过，对层的 margin 属性的左右边距设置为 auto 可以让层居中显示。

　　接下来，我们开始制作 TOP 部分，TOP 部分包括了 LOGO、菜单和 Banne r，首先我们要做的就是对设计好的图片进行切片，以下是在 FW 下完成的切片：

　　我将 TOP 部分切片为两部分，第一部分包括了 LOGO 和一条横线。由于 LOGO 图片并没有太多的颜 色，这里我于是将这一部分保存为 GIF 格式，调色板选择为精确，选择 Alpha 透明度，色版为白色(此 处颜色应与背景色相同)，导出为 logo.gif，图像宽度为 800px。

　　到这里，有的朋友就说了，* 为什么要使用 GIF 格式?使用 JPEG 不是更好吗?

　　因为 GIF 格式的图片文件更小，这样能使页面载入的速度更快，当然使用此格式之前必须确定图片并 没有使用太多的颜色，当我们使用了 GIF 格式时，从肉眼上并不能看出图片有什么太大的变化，因此这是可行的。

　　《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

　　* 接下来的 Banne r 部分还能使用 GIF 格式吗?

　　答案是不能，因为 Banner 部分是一个细致的图片，如果使用 GIF 格式颜色会有太大的损失，所以必须 使用 JPEG 格式，将文件导出为 banner.jpg。

　　* 合理的切片是非常之重要的，因为切片的方法正确与否决定了 CSS 书写的简易程度以及页面载入速 度。

　　切好片后，我们还需要对 TOP 部分进行分析并将 DIV 结构写入 Header 中代码如下：《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

　　为什么要这么写呢，因为对菜单使用列表

　　/*页面头部*/

　　#header {background:url(logo.gif) no-repeat}

　　样式说明：

　　#header {background:url(logo.gif) no -repeat}

　　给页面头部分加入一个背景图片 LOGO，并且不作填充。这里，我们没有指定 he ade r 层的高度，为什么不指定呢?

　　因为 header 层中还有菜单和 banner 项，所以层的高度暂时是未知的，而层的属性又可以让层根据内容 自动设定调整，因此我们并不需要指定高度。

　　使用列表

　　制作菜单

　　开始此节的学习前，请确认你已经参照之前的几节内容写入了 DIV、CSS 到 index.htm 和 css.css 文件中。这一节我将告诉大家如何用列表来制作菜单。

　　它们最主要的作用就是在 HTML 中以列表的形式来显示一些信息。

　　还有一点需要大家一定要分清楚的，当在 HTML 中定义为 id="divID"时，在 CSS 对应的设置语法则是

　　#divID{} ，如果在 HTML 中定义为 class="divID"时，则在 CSS 中对应的设置语法是.divID。

　　如果 id="divID"这个层中包括了，则这个 img 在 CSS 中对应的设置语法应该是#divID

　　img {}，同样，如果是包含在 class="divID"这个层中时，则设置语法应该是.divID img {}，这一点希望大家要分清楚了。

　　另外，HTML 中的一切元素都是可以定义的，例如 table、tr、td、th、form、img、input...等等，如果你 要在 CSS 中设置它们，则直接写入元素的名称加上一对大括号{}就可以了。所有的 CSS 代码都应该写 在大括号{}中。

　　按照上面的介绍，我们先在 css.css 中写入以下代码：

　　《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

　　#menu ul {list-style:none;margin:0px;}

　　#menu ul li {float:left;}

　　解释一下：

　　#menu ul {list-style:none;margin:0px;}

　　list-style :none，这一句是取消列表前点，因为我们不需要这些点。

　　margin:0px，这一句是删除 UL 的缩进，这样做可以使所有的列表内容都不缩进。

　　#menu ul li {float:left;}

　　这里的 float:left 的左右是让内容都在同一行显示，因此使用了浮动属性(float)。 到这一步，建议大家先保存预览一下效果，我们再添加下面的内容，效果如下：

　　这时，列表内容是排列在一行，我们在#menu ul li {}再加入代码 margin:0 10px

　　#menu ul {list-style:none;margin:0px;}

　　#menu ul li {float:left;margin:0 10px}

　　margin:0 10px 的作用就是让列表内容之间产生一个 20 像素的距离(左：10px，右：10px)，预览的效果

　　如下：

　　现在，雏形已经出来了，我们再来固定菜单的位置，把代码改成如下：

　　#menu {padding:20px 20px 0 0}

　　/*利用 padding:20px 20px 0 0 来固定菜单位置*/

　　#menu ul {float:right;list-style:none;margin:0px;}

　　《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

　　/*添加了 float:right 使得菜单位于页面右侧*/

　　#menu ul li {float:left;margin:0 10px}

　　这时，位置已经确定了，可是构思图中，菜单选项之间还有一条竖线，怎么办呢?

　　别忘了，我们早就已经留好了一个空的

　　.menuDiv {w idth:1px;height:28px;background:#999}

　　保存预览一下，竖线是否已经出来了?关于这段代码就不多讲了，应该是很容易理解的。

　　不过，菜单选项的文字却在顶部，我们再修改成以下代码：

　　#menu ul li {float:left;margin:0 10px;display:block;line -height:28px}