栏目圆角化是网页设计中的一种美化网页的方法，本例运用之前介绍过网页设计中的图片圆角化方法，通过设置一个名为《精品文摘》的网页，从而进一步讲述CSS设置图片的方法。

【操作步骤】

第1步，启动Dreamweaver，新建文档，保存为index.html。

第2步，构建网页结构。本例首先用<div>标签设置container容器，然后分别用<div>标签将页面分为header和main两部分。以下为部分代码，完整代码请参考本节示例源代码。

<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="#">更多内容</a>

</p>            

</div>        

</div>        

……    

</div>

</div>

在整体的container框架下，页面分为header和main两部分。在header下，定义了<img>标签，用于设置banner图片。在main下，又分为4部分，分别定义了4个栏目。在lanmu标签中定义了每个栏目的具体内容。

每一个栏目是一个<div>块，在此块下又分为两部分，分别是headline和con-tent，也就是圆角图片和栏目的文字信息。

第3步，定义网页基本属性。

* {/*定义页面中所有标签的统一样式*/    

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部分图片的边框，在这里可以很容易地理解为什么在网站建设时把container容器的宽度设置为844px了，因为header部分的图片宽是840px，而其边框宽为2px，所以border-left+bor-der-right=4px，所以相加为844px。

第4步，以上的效果离我们想要的网页似乎距离很远，请读者不要着急，网页结构搭建好以后，可以逐步设置每个部分的样式，以实现最终的效果，接下来设置栏目的样式。

.lanmu {    

width: 412px;    

float: left;    

-moz-border-radius: 10px;       /*仅Firefox支持，实现圆角效果*/    

-webkit-border-radius: 10px;    /*仅Safari，Chrome支持，实现圆角效果*/    

-khtml-border-radius: 10px;     /*仅Safari，Chrome支持，实现圆角效果*/    

border-radius: 12px;            /*Firefox，Opera，Safari，Chrome支持，实现圆角效果*/    

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宽度的一半。同时定义圆角显示，考虑到外包含框被定义圆角，其内部内容可能会覆盖圆角效果，使用overflow:hidden;可以把超出的区域隐藏起来，以便显示圆角。设置margin:4px;，调整每个栏目之间的距离，定义4个边框样式类，分别为不同栏目定义不同颜色的边框。

第5步，设置content1和content2容器的样式。此容器中包含了<h3>标签和<ul>标签，分别是标题和栏目内容。

.content1 {     

height: 250px;     

background: #fff;     

margin-right: 2px;} 

.content2 {     

height: 250px;     

background: #fff;}

在以上代码中，分别设置了content1和con-tent2标签的样式，这里为什么还要分为content1和content2呢？由于本例中的栏目分为左右两边，为了让左右两边的栏目有一个2px宽的间隙，在这里设置了左边栏目也就是content1的右侧补白为2px。而右边栏目也就是content2并没有如此设置。

第6步，定义栏目中的标题样式。

h3 {     padding: 20px 30px;     

font-size: 16px; 

color: #000066;     

text-align: left;}

在以上代码中，padding:20px 30px定义了上、下内边距为20px，左、右内边距为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，即左侧内边距为40px。<li>标签中定义了list-style:disc样式，也就是列表前的项目符号为实心圆。在more类样式中，定义了栏目右下角的“更多内容”文字的样式。