在網(wǎng)頁設(shè)計(jì)中設(shè)置帶花紋邊框（二）
在網(wǎng)頁設(shè)計(jì)時(shí)為menu部分添加CSS樣式。
#menu {/*menu容器樣式*/
clear: both; /*清除左浮動(dòng)和右浮動(dòng)*/
width: 790px; /*menu寬度*/
margin: 0 auto; /*menu容器居中*/
height:36px; /*menu容器的高度*/}#menu ul { /*ul樣式*/
float: left; width:790px; /*ul寬度*/
height:36px; list-style: none; /*不顯示項(xiàng)目符號(hào)*/
border-top:#FFFFFF 2px solid; /*設(shè)置菜單的上邊框*/
border-bottom:#FFFFFF 2px solid; /*設(shè)置菜單的下邊框*/
background:#f7f392; /*ul的背景顏色*/}
#menu ul li a { /*設(shè)置鏈接樣式*/
float: left; /*左浮動(dòng)*/
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è)計(jì)網(wǎng)頁時(shí)顯示出container的背景圖片，clear:float語句是為了清除浮動(dòng)，由于前面的代碼中使用了浮動(dòng)，所以為了消除左右浮動(dòng)的影響，使用此語句；在ul樣式中定義了菜單的樣式，其中用border語句定義了ul的上下邊框；在a中定義了菜單的鏈接樣式，其中float:left語句在這里的作用是使列表項(xiàng)目橫向顯示。
這時(shí)的網(wǎng)頁制作已初見效果，接下來定義content樣式和<h2>標(biāo)題樣式。
#content { /*正文樣式*/
clear: both; /*清除浮動(dòng)*/
width: 790px;
margin: 0 auto;
padding-bottom:20px;
padding-top:20px; /*頂端內(nèi)邊距*/
background:#FFFFFF; /*正文部分背景顏色*/}
h2{/*標(biāo)題樣式*/
padding:40px auto; /*標(biāo)題內(nèi)邊距*/}
在content中定義了正文容器的樣式，用clear:both語句清除了左右浮動(dòng)，然后設(shè)置正文容器的寬度為790px。在h2中定義了標(biāo)題樣式。
設(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)邊距*/}
