<tt id="kjox3"><noscript id="kjox3"><samp id="kjox3"></samp></noscript></tt><tt id="kjox3"><li id="kjox3"><var id="kjox3"></var></li></tt><cite id="kjox3"><noscript id="kjox3"><delect id="kjox3"></delect></noscript></cite>

<source id="kjox3"><menuitem id="kjox3"></menuitem></source>

  • <rt id="kjox3"></rt>
      <rp id="kjox3"></rp>

    1. <cite id="kjox3"></cite>
        <tt id="kjox3"><form id="kjox3"><delect id="kjox3"></delect></form></tt><rp id="kjox3"><meter id="kjox3"><button id="kjox3"></button></meter></rp>

      1. <tt id="kjox3"></tt>

        <rt id="kjox3"><meter id="kjox3"></meter></rt>
      2. <b id="kjox3"><form id="kjox3"><label id="kjox3"></label></form></b>

          设置圆润的栏目模块

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

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

          下一篇:网页色彩基础

          网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)
          鸭子tv国产在线永久播放,天天夜日日日日碰日日摸日日澡,日本特黄特黄刺激大片,老熟妇乱子伦456在线观看 网站地图