在網(wǎng)頁(yè)中常常可以看到整個(gè)頁(yè)面或者是某些模塊是圓角的，這使網(wǎng)頁(yè)和模塊顯得更圓潤(rùn)，本例運(yùn)用<div>塊的圓角化，實(shí)現(xiàn)網(wǎng)站建設(shè)時(shí)使模塊看起來(lái)更圓潤(rùn)的方法。

【操作步驟】

第1步，構(gòu)建網(wǎng)頁(yè)基本結(jié)構(gòu)。在本例中首先用<div>標(biāo)記設(shè)置container容器，在此容器中，分別用<div>定義了header、menu、content和footer4部分。

<div class="container">

<div class="header"></div>    

<div class="menu">        

<ul>            

<li>首頁(yè)</li>            

<li>熱門(mén)推薦</li>            

<li>精華帖</li>            

<li>交流區(qū)</li>            

<li>經(jīng)典收藏</li>            

<li>歷史記錄</li>            

<li>通訊錄</li>            

<li>關(guān)于我們</li>        

</ul>    

</div>    

<div class="content"></div>    

<div class="footer">@2015版權(quán)所有|關(guān)于我們|聯(lián)系我們|</div></div>

第2步，定義網(wǎng)頁(yè)基本屬性、container容器的樣式。

body{/*網(wǎng)頁(yè)基本屬性*/    

text-align:center;              /*居中對(duì)齊*/    

background-color:#CCCCCC;       /*背景顏色*/    

font-family:黑體;}

.container{   /*container容器樣式*/    

width:800px;    

margin:0 auto;                  /*居中*/

}以上代碼中，首先設(shè)置了body的背景顏色，在container中設(shè)置了容器寬度為800px。

第3步，定義網(wǎng)頁(yè)header部分的樣式。

.header{/*header樣式*/    

width:100%;                             /*相對(duì)寬度*/    

height:200px;    background-image:url(images/bg.gif);    /*定義背景圖片*/    

border-top-left-radius:10px;            /*左上角圓角化*/

border-top-right-radius:10px;           /*右上角圓角化*/    

border:green 2px solid;                 /*給header加邊框*/}

以上代碼中，首先定義了header樣式，其寬度為相對(duì)寬度，父標(biāo)記的100%，border-top-left-ra-dius: 10px和border-top-right-radius:10px兩句定義了header模塊的左上角和右上角顯示為圓角。雖然這種方法比其他實(shí)現(xiàn)圓角的方法簡(jiǎn)單，但是由于在設(shè)計(jì)網(wǎng)頁(yè)時(shí)此方法的兼容性差，F(xiàn)irefox支持，所以請(qǐng)讀者還是謹(jǐn)慎使用為好。此時(shí)網(wǎng)頁(yè)的顯示效果如圖所示。從圖中可以看到，header部分的左上和右上角變?yōu)閳A角，使header顯得圓潤(rùn)了許多。

第4步，第3步實(shí)現(xiàn)了header部分的設(shè)置，接下來(lái)為menu部分添加CSS樣式。

.menu{/*menu樣式*/   

width:800px;                       /*寬度*/   

height:35px;   

padding-top:5px;   

text-align:center;   

border-left:green 2px solid;       /*左側(cè)邊框*/      

border-right:green 2px solid;   /*右側(cè)邊框*/   

background-color:#f0d835;          /*背景顏色*/}ul{   

margin:0px;   

padding:0px;      

list-style-type:none;           /*不顯示項(xiàng)目標(biāo)記*/}

li{   float:left;                        /*左浮動(dòng)*/   

padding:0px 20px;                  /*內(nèi)邊距*/}

在以上代碼中，首先設(shè)置了menu的寬度為800px；在ul中定義了菜單的樣式，其中用list-style(-?)type:none語(yǔ)句定義列表不顯示項(xiàng)目符號(hào)；在li中定義了標(biāo)簽<li>的樣式，其中float語(yǔ)句的作用是使項(xiàng)目列表中的各項(xiàng)左浮動(dòng)，在這里使用此語(yǔ)句，可以達(dá)到使原本縱向排列的列表各項(xiàng)橫向排列。

第5步，從圖9.104中可以看出，網(wǎng)頁(yè)的菜單部分已經(jīng)設(shè)置完畢，接下來(lái)定義content樣式。

.content{ /*正文樣式*/    

width:800px;    

height:200px;    

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

border-left:green 2px solid;     /*左側(cè)邊框*/    

border-right:green 2px solid;    /*右側(cè)邊框*/    

border-top:green 2px solid;      /*頂部邊框*/}

在content中定義了正文容器的樣式。

第6步，設(shè)置網(wǎng)頁(yè)footer部分的樣式。

.footer{/*footer部分樣式*/width:800px;    

height:80px;    

background:url(images/footer_bg.jpg);     /*footer部分的背景圖片*/    

border-bottom-left-radius:10px;           /*設(shè)置左下邊框的圓角化*/    

border-bottom-right-radius:10px;          /*設(shè)置右下邊框的圓角化*/    

border:green 2px solid;                   /*邊框*/    padding-top:20px;}

提示：以上網(wǎng)頁(yè)在網(wǎng)頁(yè)設(shè)計(jì)時(shí)由于使用了border-radius屬性，所以對(duì)瀏覽器的兼容性有一定要求，在IE瀏覽器中無(wú)法顯示圓角，所以請(qǐng)讀者在Firefox瀏覽器中瀏覽。