您的位置：首页 > Web前端 > CSS

CSS简单重叠线效果

2013-09-05 13:20 260 查看
<!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>

<p>查找更多代码，请访问：<a href="http://www.lanrentuku.com/" target="_blank">懒人图库</a></p><br />

<p><script type="text/javascript" src="http://d.lanrentuku.com/goto/js-preview-728x90.js"></script></p>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航