您现在的位置：相关信息> JS特效
太原网站建设-CSS简单重叠线效果
发表于：2016-10-26 来源：黑马网络 以阅：
太原网站建设-CSS简单重叠线效果
<!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>