CSS实现的重叠线效果

浏览数：24 / 时间：2015年06月09日 
<!DOCTYPE HTML>
    <html lang="en-US">
    <head>
    <meta charset="UTF-8">
    <title>CSS实现的重叠线效果丨</title>
    <style type="text/css">
    *{padding:0;margin:0;}/*demo偷懒充值样式，实际项目切勿模仿*/
    .line{border-bottom:2px solid #EBEBEB;margin-top:10px;margin-bottom:10px;}
    /*
    margin:10px 0;在实际项目中因为左右0px的权重影响其他样式，多做就知道了。
    */
    h2{border-bottom:2px solid skyblue;font-size:14px;line-height:20px;
    display:inline-block;
    *display:inline;
    *zoom:1;
    /*兼容inline-block----这里可以以用浮动代替*/
    /*inline-block遇到text-indent会有兼容问题，原因是 ie6/7 其实还是inline*/
    margin-bottom:-2px;
    }
    </style>
    </head>
    <body>
    <div class="line">
    <h2>蓝悦</h2>
    </div>
    <div class="line">
    <h2>石家庄电缆附件</h2>
    </div>
    <div class="line">
    <h2>前端开发板块</h2>
    </div>
    <div class="line">
    <h2>石家庄玻璃隔断</h2>
    </div>
    </body>
    </html>
    <br><br><hr>

 

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style log com http html si it 问题 class style log com http html si it 问题

相关文章

随机文章

您可能还喜欢

您可能还喜欢