欄目圓角化是網(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兩部分。以下為部分代碼，完整代碼請(qǐng)參考本節(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)，請(qǐng)讀者不要著急，網(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。定義了對(duì)齊方式為左對(duì)齊
第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)容”文字的樣式。