• <cite id="ls72a"></cite>

  • <rp id="ls72a"><nav id="ls72a"></nav></rp>
    <b id="ls72a"></b>

    设置圆润的栏目模块

    • 2020-01-14 16:04:44
    • 阅读次数:
    • 作者:盈岚科技小编
    • 来源:http://www.0737dz.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.0737dz.com/news/wzzz/3156.html

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

    下一篇:网页色彩基础

    网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)
    日本三级香港三级人妇99,亚洲欧美中文日韩综合图区,欧美黄网站色视频免费,哈啊往里噗嗤好深bl纯肉np 网站地图