欄目圓角化是網(wǎng)頁設(shè)計(jì)中的一種美化網(wǎng)頁的方法，本例運(yùn)用之前介紹過網(wǎng)頁設(shè)計(jì)中的圖片圓角化方法，通過設(shè)置一個(gè)名為《精品文摘》的網(wǎng)頁，從而進(jìn)一步講述CSS設(shè)置圖片的方法。

【操作步驟】

第1步，啟動(dòng)Dreamweaver，新建文檔，保存為index.html。

第2步，構(gòu)建網(wǎng)頁結(jié)構(gòu)。本例首先用<div>標(biāo)簽設(shè)置container容器，然后分別用<div>標(biāo)簽將頁面分為header和main兩部分。以下為部分代碼，完整代碼請參考本節(jié)示例源代碼。

<div class="container">

<div class="header"> 

<img class="bgimg" src="images/bg.jpg"> </div>    

<div class="main">        

<div class="lanmu b1">            

<div class="headline"><img class="c" src="images/bg1.gif"></div>            

<div class="content1">                

<h3>散文隨筆</h3>                

<ul class="topic">                    

<li>[生活感悟]   晴，----簡單生活，感受美好，期待明天</li>                    

<li>[生活感悟]   多年后，我們或許會(huì)嫁給這樣的他  </li>                    

<li>[生活感悟]   從今以后，試著做個(gè)這樣的人</li>                    

<li>[生活感悟]   人最大的不幸，就是不知道自己是幸福的</li>                    

<li>[生活感悟]   人生至境是不爭 恬靜出塵心自寧  </li>                    

<li>[生活感悟]   沒有如意的生活，只有看開的人生</li>

</ul>                

<p class="more"><a href="#">更多內(nèi)容</a>

</p>            

</div>        

</div>        

……    

</div>

</div>

在整體的container框架下，頁面分為header和main兩部分。在header下，定義了<img>標(biāo)簽，用于設(shè)置banner圖片。在main下，又分為4部分，分別定義了4個(gè)欄目。在lanmu標(biāo)簽中定義了每個(gè)欄目的具體內(nèi)容。

每一個(gè)欄目是一個(gè)<div>塊，在此塊下又分為兩部分，分別是headline和con-tent，也就是圓角圖片和欄目的文字信息。

第3步，定義網(wǎng)頁基本屬性。

* {/*定義頁面中所有標(biāo)簽的統(tǒng)一樣式*/    

margin: 0;   

padding: 0;    

font-size: 12px;

text-align: center;}body { background: #d3d3d3;             /*頁面背景色*/ }

.container {    

width: 844px;    

margin: 0 auto;                    /*居中顯示*/}

.bgimg {    width: 840px;    border: 2px #fff solid;            /*給header部分圖片定義2px寬的邊框*/}

.c {    width: 422px;    height:33px;}

在以上代碼中，*{}表示將頁面中所有的標(biāo)簽都設(shè)置為此樣式。body標(biāo)簽定義了背景色。在con-tainer中定義了container容器的寬度為844px，另外在container中定義了margin:0px auto，目的是使container容器水平居中。bgimg{border:2px#fff solid}設(shè)置了header部分圖片的邊框，在這里可以很容易地理解為什么在網(wǎng)站建設(shè)時(shí)把container容器的寬度設(shè)置為844px了，因?yàn)閔eader部分的圖片寬是840px，而其邊框?qū)挒?px，所以border-left+bor-der-right=4px，所以相加為844px。

第4步，以上的效果離我們想要的網(wǎng)頁似乎距離很遠(yuǎn)，請讀者不要著急，網(wǎng)頁結(jié)構(gòu)搭建好以后，可以逐步設(shè)置每個(gè)部分的樣式，以實(shí)現(xiàn)最終的效果，接下來設(shè)置欄目的樣式。

.lanmu {    

width: 412px;    

float: left;    

-moz-border-radius: 10px;       /*僅Firefox支持，實(shí)現(xiàn)圓角效果*/    

-webkit-border-radius: 10px;    /*僅Safari，Chrome支持，實(shí)現(xiàn)圓角效果*/    

-khtml-border-radius: 10px;     /*僅Safari，Chrome支持，實(shí)現(xiàn)圓角效果*/    

border-radius: 12px;            /*Firefox，Opera，Safari，Chrome支持，實(shí)現(xiàn)圓角效果*/    

overflow:hidden;    

margin:4px;}

.b1 {border:solid 1px #C2188D;}

.b2 {border:solid 1px #DF290F;}

.b3 {border:solid 1px #F7C63C;}

.b4 {border:solid 1px #3E71A5;}

在上方代碼中，首先定義了lanmu容器的樣式，設(shè)置了容器的寬度為412px，也就是container寬度的一半。同時(shí)定義圓角顯示，考慮到外包含框被定義圓角，其內(nèi)部內(nèi)容可能會(huì)覆蓋圓角效果，使用overflow:hidden;可以把超出的區(qū)域隱藏起來，以便顯示圓角。設(shè)置margin:4px;，調(diào)整每個(gè)欄目之間的距離，定義4個(gè)邊框樣式類，分別為不同欄目定義不同顏色的邊框。

第5步，設(shè)置content1和content2容器的樣式。此容器中包含了<h3>標(biāo)簽和<ul>標(biāo)簽，分別是標(biāo)題和欄目內(nèi)容。

.content1 {     

height: 250px;     

background: #fff;     

margin-right: 2px;} 

.content2 {     

height: 250px;     

background: #fff;}

在以上代碼中，分別設(shè)置了content1和con-tent2標(biāo)簽的樣式，這里為什么還要分為content1和content2呢？由于本例中的欄目分為左右兩邊，為了讓左右兩邊的欄目有一個(gè)2px寬的間隙，在這里設(shè)置了左邊欄目也就是content1的右側(cè)補(bǔ)白為2px。而右邊欄目也就是content2并沒有如此設(shè)置。

第6步，定義欄目中的標(biāo)題樣式。

h3 {     padding: 20px 30px;     

font-size: 16px; 

color: #000066;     

text-align: left;}

在以上代碼中，padding:20px 30px定義了上、下內(nèi)邊距為20px，左、右內(nèi)邊距為30px。定義了對齊方式為左對齊

第7步，設(shè)置欄目中的文本樣式，其中包括一個(gè)<ul>標(biāo)簽的樣式、一個(gè)<li>標(biāo)簽的樣式和一個(gè)<p>標(biāo)簽的樣式，代碼如下：

ul { padding-left: 40px; }li {     

text-align: left;     

list-style: disc;     

line-height: 1.8em;}

.more {     

text-align: right;     

padding-right: 20px;}

在上方代碼中，首先定義了列表<ul>的樣式padding-left:40px，即左側(cè)內(nèi)邊距為40px。<li>標(biāo)簽中定義了list-style:disc樣式，也就是列表前的項(xiàng)目符號(hào)為實(shí)心圓。在more類樣式中，定義了欄目右下角的“更多內(nèi)容”文字的樣式。