CSS简单实现重叠线效果

建站知识 2021-07-03 08:43www.168986.cn长沙网站建设

复制代码

代码如下:

<!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-: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>

上一篇：CSS inline-block属性概述及其使用示例下一篇：CSS左右两列自适应高布局示例代码

CSS简单实现重叠线效果

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

CSS简单实现重叠线效果

长沙网站设计

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设