CSS简单重叠线效果—CSS学习心得|开优网络原创整理

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<style type="text/css"> 
*{padding:0;margin:0;}
.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>