設(shè)置圓潤(rùn)的欄目模塊
在網(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瀏覽器中瀏覽。