CSS簡單重疊線效果

發表日期：2015-12-19 文章編輯：南昌開優網絡瀏覽次數：4576 標簽：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>

返回列表

上一篇：DIV實現input垂直居中兼容IE6... 下一篇：CSS布局：中欄固定寬度,左右兩欄寬度自...

欧美日韩一区二区三区四区不卡,日韩欧美视频一区二区三区四区,久久精品欧美一区二区三区不卡,国产精品久久久乱弄

CSS簡單重疊線效果