在网页设计时为menu部分添加CSS样式。

#menu {/*menu容器样式*/ 

clear: both;                             /*清除左浮动和右浮动*/    

width: 790px;                            /*menu宽度*/    

margin: 0 auto;                          /*menu容器居中*/    

height:36px;                             /*menu容器的高度*/}#menu ul { /*ul样式*/    

float: left;    width:790px;                             /*ul宽度*/    

height:36px;    list-style: none;                        /*不显示项目符号*/    

border-top:#FFFFFF 2px solid;            /*设置菜单的上边框*/    

border-bottom:#FFFFFF 2px solid;         /*设置菜单的下边框*/    

background:#f7f392;                      /*ul的背景颜色*/}

#menu ul li a { /*设置链接样式*/    

float: left;                             /*左浮动*/    

height: 28px;    

width: 100px;    

padding: 10px 0 0 10px;    

font-size: 16px;    

font-weight: bold;    

text-decoration: none;    

color: #f54f06;                          /*字体颜色*/

以上代码中，首先设置了menu的宽度为790px，同样比container容器的宽度左右两侧各少10px，目的同样是为了设计网页时显示出container的背景图片，clear:float语句是为了清除浮动，由于前面的代码中使用了浮动，所以为了消除左右浮动的影响，使用此语句；在ul样式中定义了菜单的样式，其中用border语句定义了ul的上下边框；在a中定义了菜单的链接样式，其中float:left语句在这里的作用是使列表项目横向显示。

这时的网页制作已初见效果，接下来定义content样式和<h2>标题样式。

#content { /*正文样式*/    

clear: both;              /*清除浮动*/    

width: 790px;    

margin: 0 auto;    

padding-bottom:20px;    

padding-top:20px;         /*顶端内边距*/    

background:#FFFFFF;       /*正文部分背景颜色*/} 

h2{/*标题样式*/    

padding:40px auto;        /*标题内边距*/}

在content中定义了正文容器的样式，用clear:both语句清除了左右浮动，然后设置正文容器的宽度为790px。在h2中定义了标题样式。

设置网页footer部分的样式。

#footer { /*footer部分样式*/    

margin: 0 auto;                    /*居中*/    

width: 790px;                      /*footer部分的宽度*/    

height:50px;    color: #033a5d;                    /*字体颜色 */    

font-size:14px;    background:#999999;                /*footer部分的背景颜色*/

border-bottom:2px #FFFFFF solid;   /*footer部分的下边框*/    

border-top:2px #FFFFFF solid;      /*footer部分的上边框*/    

padding-top:20px;                  /*内边距*/}