在網(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)邊距*/}

6d1885219312ee4d163dd29fccf3298c.jpg

網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷咨詢專線:0871-63535511(點(diǎn)擊可一鍵撥號(hào))