尊敬的客户您好,经我们多年的网站制作、网络营销经验,请建站和优化同时做,以达到最好的推广效果!----创赢网络 2012-06
加入收藏设为首页
  • [2013-8-7]洛阳贷款 洛阳小额贷款公司网站上线
  • [2013-8-4]洛阳开锁公司 洛阳开锁电话优化
  • [2013-5-25]洛阳聚鑫钢绳有限公司网站上线
  • [2013-5-20]吉利区图书馆网站备案通过上线开通
  • [2013-5-13]洛阳旭晋昇商贸有限公司 食品批发零售
  • [2013-4-14]洛阳市建投节能技术服务有限公司 新版上线
  • [2013-4-11]南阳顽石玉器工作室网站上线
  • ------专业网站设计制作、网站排名优化、建设一流品牌!
    新闻正文 ·您的位置:首页 > 新闻中心 > 技术中心 > 查看新闻

    原创的纯CSS+DIV的圆角代码分享

    作者:hi379  来源:hi379  发表时间:2009-8-13 8:32:53  点击:2796

    看见网上有很多人在讨论用css制作圆角的问题,于是自己也下手试试了,不过要提醒大家的是这种方法最好只用来学习和研究,在xhtml中添加无语意的div元素是不符合web标准的。
    核心理论:深入理解盒子模型,灵活结合运用元素的border和margin属性.
    制作思路:结合下图观察xhtml代码,核心在于放置line0~line3的位置.


    xhtml代码:
    <div id=”menu”>
    <div class=”line0″></div>
    <div class=”line1″></div>
    <div class=”line2″></div>
    <div class=”line3″></div>
    <p id=”word”>home</p>
    </div>

    css代码:
    * {
    margin:0;
    padding:0;
    }
    body {
    font-family:sans-serif, Verdana, Geneva;
    font-size:10px;
    }
    #menu {
    width:100px;
    margin:0 auto;
    }
    #menu div { /*圆角盒子的共有属性*/
    height:1px;
    background:#0f0;
    overflow:hidden; /*解决在IE6中不兼容的情况*/
    border-left:1px solid #000;
    border-right:1px solid #000;
    }
    #menu .line0 {
    margin: 0px 5px;
    background:#000;
    }
    #menu .line1 {
    margin: 0px 3px;
    border-left:2px solid #000;
    border-right:2px solid #000;
    }
    #menu .line2 {
    margin: 0px 2px;
    }
    #menu .line3 {
    margin: 0px 1px;
    height:2px;
    }
    #word {
    border:1px solid #000;
    border-top:none;
    text-align:center;
    background:#0f0;
    }

     

    您的需求

    联系我们

    正确的选择

    金亚洲安全吗