设置圆润的栏目模块

  • 2020-01-14 16:04:44
  • 阅读次数:
  • 作者:盈岚科技小编
  • 来源:http://www.zwxs1.com

在网页中常常可以看到整个页面或者是某些模块是圆角的,这使网页和模块显得更圆润,本例运用<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显得圆润了许多。

c988dfd12d8302a9182b500dd8acf5a8.jpg

第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浏览器中浏览。

当前文章标题:设置圆润的栏目模块

当前URL:http://www.zwxs1.com/news/wzzz/3156.html

上一篇:在网页设计中设置带花纹边框(二)

下一篇:网页色彩基础

网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)
免费全部高h视频在线观看,国产精品v欧美精品v日本精品,亚洲性线免费观看视频成熟,老汉色av影院 网站地图