css实现简单重叠线的效果

发布时间:2020-01-26编辑:脚本学堂
本文介绍下,用css实现简单重叠线效果的一段代码,有需要的朋友参考下。

css代码实现简单的重叠线效果,代码如下:
 

复制代码 代码示例:

 <!DOCTYPE HTML>
<html lang="en-US">
<head>
 <meta charset="UTF-8">
 <title>重叠线效果-www.jb200.com</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>