在網(wǎng)頁設(shè)計時為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;            /*設(shè)置菜單的上邊框*/    

border-bottom:#FFFFFF 2px solid;         /*設(shè)置菜單的下邊框*/    

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

#menu ul li a { /*設(shè)置鏈接樣式*/    

float: left;                             /*左浮動*/    

height: 28px;    

width: 100px;    

padding: 10px 0 0 10px;    

font-size: 16px;    

font-weight: bold;    

text-decoration: none;    

color: #f54f06;                          /*字體顏色*/

以上代碼中，首先設(shè)置了menu的寬度為790px，同樣比container容器的寬度左右兩側(cè)各少10px，目的同樣是為了設(shè)計網(wǎng)頁時顯示出container的背景圖片，clear:float語句是為了清除浮動，由于前面的代碼中使用了浮動，所以為了消除左右浮動的影響，使用此語句；在ul樣式中定義了菜單的樣式，其中用border語句定義了ul的上下邊框；在a中定義了菜單的鏈接樣式，其中float:left語句在這里的作用是使列表項目橫向顯示。

這時的網(wǎng)頁制作已初見效果，接下來定義content樣式和<h2>標題樣式。

#content { /*正文樣式*/    

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

width: 790px;    

margin: 0 auto;    

padding-bottom:20px;    

padding-top:20px;         /*頂端內(nèi)邊距*/    

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

h2{/*標題樣式*/    

padding:40px auto;        /*標題內(nèi)邊距*/}

在content中定義了正文容器的樣式，用clear:both語句清除了左右浮動，然后設(shè)置正文容器的寬度為790px。在h2中定義了標題樣式。

設(shè)置網(wǎng)頁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;                  /*內(nèi)邊距*/}