标题重叠下划线CSS代码

效果图：

CSS代码：

 1 .line { 
 2     border-bottom: 2px solid #EBEBEB; 
 3     margin-top: 10px; 
 4     margin-bottom: 10px; 
 5 } 
 6 /*margin:10px 0;在实际项目中因为左右0px的权重影响其他样式，多做就知道了。*/ 
 7 h2 { 
 8     border-bottom: 2px solid skyblue; 
 9     font-size: 14px; 
10     line-height: 20px; 
11     display: inline-block; 
12 *display:inline; 
13 *zoom:1; 
14     /*兼容inline-block----这里可以以用浮动代替*/ 
15 /*inline-block遇到text-indent会有兼容问题，原因是 ie6/7 其实还是inline*/ 
16     margin-bottom: -2px; 
17 }

DIV布局代码：

 1 <div class="line"> 
 2   <h2>标题</h2> 
 3 </div> 
 4 <div class="line"> 
 5   <h2>标题标题</h2> 
 6 </div> 
 7 <div class="line"> 
 8   <h2>这里是个标题</h2> 
 9 </div> 
10 <div class="line"> 
11   <h2>这里是个演示标题</h2> 
12 </div> 

更多代码请访问JS代码站

posted @ 2013-04-23 09:47  似水星辰  阅读(250)  评论(0)  编辑  收藏  举报