在网页中常常可以看到整个页面或者是某些模块是圆角的，这使网页和模块显得更圆润，本例运用<div>块的圆角化，实现网站建设时使模块看起来更圆润的方法。

【操作步骤】

第1步，构建网页基本结构。在本例中首先用<div>标记设置container容器，在此容器中，分别用<div>定义了header、menu、content和footer4部分。

<div class="container">

<div class="header"></div>    

<div class="menu">        

<ul>            

<li>首页</li>            

<li>热门推荐</li>            

<li>精华帖</li>            

<li>交流区</li>            

<li>经典收藏</li>            

<li>历史记录</li>            

<li>通讯录</li>            

<li>关于我们</li>        

</ul>    

</div>    

<div class="content"></div>    

<div class="footer">@2015版权所有|关于我们|联系我们|</div></div>

第2步，定义网页基本属性、container容器的样式。

body{/*网页基本属性*/    

text-align:center;              /*居中对齐*/    

background-color:#CCCCCC;       /*背景颜色*/    

font-family:黑体;}

.container{   /*container容器样式*/    

width:800px;    

margin:0 auto;                  /*居中*/

}以上代码中，首先设置了body的背景颜色，在container中设置了容器宽度为800px。

第3步，定义网页header部分的样式。

.header{/*header样式*/    

width:100%;                             /*相对宽度*/    

height:200px;    background-image:url(images/bg.gif);    /*定义背景图片*/    

border-top-left-radius:10px;            /*左上角圆角化*/

border-top-right-radius:10px;           /*右上角圆角化*/    

border:green 2px solid;                 /*给header加边框*/}

以上代码中，首先定义了header样式，其宽度为相对宽度，父标记的100%，border-top-left-ra-dius: 10px和border-top-right-radius:10px两句定义了header模块的左上角和右上角显示为圆角。虽然这种方法比其他实现圆角的方法简单，但是由于在设计网页时此方法的兼容性差，Firefox支持，所以请读者还是谨慎使用为好。此时网页的显示效果如图所示。从图中可以看到，header部分的左上和右上角变为圆角，使header显得圆润了许多。

第4步，第3步实现了header部分的设置，接下来为menu部分添加CSS样式。

.menu{/*menu样式*/   

width:800px;                       /*宽度*/   

height:35px;   

padding-top:5px;   

text-align:center;   

border-left:green 2px solid;       /*左侧边框*/      

border-right:green 2px solid;   /*右侧边框*/   

background-color:#f0d835;          /*背景颜色*/}ul{   

margin:0px;   

padding:0px;      

list-style-type:none;           /*不显示项目标记*/}

li{   float:left;                        /*左浮动*/   

padding:0px 20px;                  /*内边距*/}

在以上代码中，首先设置了menu的宽度为800px；在ul中定义了菜单的样式，其中用list-style(-?)type:none语句定义列表不显示项目符号；在li中定义了标签<li>的样式，其中float语句的作用是使项目列表中的各项左浮动，在这里使用此语句，可以达到使原本纵向排列的列表各项横向排列。

第5步，从图9.104中可以看出，网页的菜单部分已经设置完毕，接下来定义content样式。

.content{ /*正文样式*/    

width:800px;    

height:200px;    

background-color:#FFFFFF;        /*正文部分背景颜色*/    

border-left:green 2px solid;     /*左侧边框*/    

border-right:green 2px solid;    /*右侧边框*/    

border-top:green 2px solid;      /*顶部边框*/}

在content中定义了正文容器的样式。

第6步，设置网页footer部分的样式。

.footer{/*footer部分样式*/width:800px;    

height:80px;    

background:url(images/footer_bg.jpg);     /*footer部分的背景图片*/    

border-bottom-left-radius:10px;           /*设置左下边框的圆角化*/    

border-bottom-right-radius:10px;          /*设置右下边框的圆角化*/    

border:green 2px solid;                   /*边框*/    padding-top:20px;}

提示：以上网页在网页设计时由于使用了border-radius属性，所以对浏览器的兼容性有一定要求，在IE浏览器中无法显示圆角，所以请读者在Firefox浏览器中浏览。