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

【操作步驟】

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

<div class="container">

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

<div class="menu">        

<ul>            

<li>首頁</li>            

<li>熱門推薦</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)頁基本屬性、container容器的樣式。

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

text-align:center;              /*居中對齊*/    

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

font-family:黑體;}

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

width:800px;    

margin:0 auto;                  /*居中*/

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

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

.header{/*header樣式*/    

width:100%;                             /*相對寬度*/    

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

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

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

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

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

第4步，第3步實現(xiàn)了header部分的設(shè)置，接下來為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;           /*不顯示項目標記*/}

li{   float:left;                        /*左浮動*/   

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

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

第5步，從圖9.104中可以看出，網(wǎng)頁的菜單部分已經(jīng)設(shè)置完畢，接下來定義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)頁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)頁在網(wǎng)頁設(shè)計時由于使用了border-radius屬性，所以對瀏覽器的兼容性有一定要求，在IE瀏覽器中無法顯示圓角，所以請讀者在Firefox瀏覽器中瀏覽。