宇扬信息科技工作室

分享一个简单的重叠线效果

发布: 2012-12-05 09:17:53 | 作者: ued | 来源: 经典论坛 | 查看: 266

<!DOCTYPE HTML>

<html lang="en-US">

<head>

<meta charset="UTF-8">

<title></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>写一个简单的DEMO</h2>

</div>

</body>

</html>

简单的重叠线效果

效果图

    评论 0 次    最新评论(评论内容只代表网友观点,与本站立场无关!)
    发表评论
    点击更换验证码  

    ·本站大部分文章和内容来自互联网,如果您觉得我们侵犯了您的权益,请告诉我们!

    ·您在本站发表的作品,本站有权在网站内转载或引用!

    ·本站所提供的设计,摄影及其它作品,如需使用,请与原作者联系,版权归原作者所有。

    About 宇扬联系我们付款方式友情链接网站地图版权声明投稿须知帮助