在網(wǎng)頁設計時為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容器的寬度左右兩側(cè)各少10px,目的同樣是為了設計網(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語句清除了左右浮動,然后設置正文容器的寬度為790px。在h2中定義了標題樣式。
設置網(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)邊距*/}