欄目圓角化是網(wǎng)頁設計中的一種美化網(wǎng)頁的方法，本例運用之前介紹過網(wǎng)頁設計中的圖片圓角化方法，通過設置一個名為《精品文摘》的網(wǎng)頁，從而進一步講述CSS設置圖片的方法。
【操作步驟】
第1步，啟動Dreamweaver，新建文檔，保存為index.html。
第2步，構建網(wǎng)頁結(jié)構。本例首先用<div>標簽設置container容器，然后分別用<div>標簽將頁面分為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>[生活感悟] 多年后，我們或許會嫁給這樣的他 </li>
<li>[生活感悟] 從今以后，試著做個這樣的人</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>標簽，用于設置banner圖片。在main下，又分為4部分，分別定義了4個欄目。在lanmu標簽中定義了每個欄目的具體內(nèi)容。
每一個欄目是一個<div>塊，在此塊下又分為兩部分，分別是headline和con-tent，也就是圓角圖片和欄目的文字信息。
第3步，定義網(wǎng)頁基本屬性。
* {/*定義頁面中所有標簽的統(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;}
在以上代碼中，*{}表示將頁面中所有的標簽都設置為此樣式。body標簽定義了背景色。在con-tainer中定義了container容器的寬度為844px，另外在container中定義了margin:0px auto，目的是使container容器水平居中。bgimg{border:2px#fff solid}設置了header部分圖片的邊框，在這里可以很容易地理解為什么在網(wǎng)站建設時把container容器的寬度設置為844px了，因為header部分的圖片寬是840px，而其邊框?qū)挒?px，所以border-left+bor-der-right=4px，所以相加為844px。
第4步，以上的效果離我們想要的網(wǎng)頁似乎距離很遠，請讀者不要著急，網(wǎng)頁結(jié)構搭建好以后，可以逐步設置每個部分的樣式，以實現(xiàn)最終的效果，接下來設置欄目的樣式。
.lanmu {
width: 412px;
float: left;
-moz-border-radius: 10px; /*僅Firefox支持，實現(xiàn)圓角效果*/
-webkit-border-radius: 10px; /*僅Safari，Chrome支持，實現(xiàn)圓角效果*/
-khtml-border-radius: 10px; /*僅Safari，Chrome支持，實現(xiàn)圓角效果*/
border-radius: 12px; /*Firefox，Opera，Safari，Chrome支持，實現(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容器的樣式，設置了容器的寬度為412px，也就是container寬度的一半。同時定義圓角顯示，考慮到外包含框被定義圓角，其內(nèi)部內(nèi)容可能會覆蓋圓角效果，使用overflow:hidden;可以把超出的區(qū)域隱藏起來，以便顯示圓角。設置margin:4px;，調(diào)整每個欄目之間的距離，定義4個邊框樣式類，分別為不同欄目定義不同顏色的邊框。
第5步，設置content1和content2容器的樣式。此容器中包含了<h3>標簽和<ul>標簽，分別是標題和欄目內(nèi)容。
.content1 {
height: 250px;
background: #fff;
margin-right: 2px;}
.content2 {
height: 250px;
background: #fff;}
在以上代碼中，分別設置了content1和con-tent2標簽的樣式，這里為什么還要分為content1和content2呢？由于本例中的欄目分為左右兩邊，為了讓左右兩邊的欄目有一個2px寬的間隙，在這里設置了左邊欄目也就是content1的右側(cè)補白為2px。而右邊欄目也就是content2并沒有如此設置。
第6步，定義欄目中的標題樣式。
h3 { padding: 20px 30px;
font-size: 16px;
color: #000066;
text-align: left;}
在以上代碼中，padding:20px 30px定義了上、下內(nèi)邊距為20px，左、右內(nèi)邊距為30px。定義了對齊方式為左對齊
第7步，設置欄目中的文本樣式，其中包括一個<ul>標簽的樣式、一個<li>標簽的樣式和一個<p>標簽的樣式，代碼如下：
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>標簽中定義了list-style:disc樣式，也就是列表前的項目符號為實心圓。在more類樣式中，定義了欄目右下角的“更多內(nèi)容”文字的樣式。