正文
CSS多种方法实现分隔线
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>CSS实现分隔线的几种方法</title>
<style>
[url=home.php?mod=space&uid=597245]@charset[/url] "utf-8";
body,h1,h2,h3,h4,p,ul,li,ol,dl,dt,dd,input,textarea,figure,form{margin:0;padding:0}
body,input,textarea{font-size:12px;font-family:microsoft yahei}
body{text-align:center;color:#33383D;}
ul,ol{list-style:none}
img{border:0}
button,input {line-height:normal;*overflow:visible}
input,textarea{outline:none}
a{color:#3B8DD1;text-decoration:none}
a:hover{color:#8CAC52}
.demo-header{position:relative;height:22px;background-color:#33363B;line-height:22px;padding:2px 10px;text-align: left;}
.demo-name{color: #ccc;}
.demo-title,.demo-footer{height:0;overflow:hidden}
.demo-container{clear: both;padding:40px 10px 20px;text-align:left;margin:0 auto;line-height: 18px;}
.demo h2{font-size: 15px;padding-bottom: 6px;margin-bottom: 20px;border-bottom: solid 1px #ddd;}
</style>
</head>
<body>
<div class="demo-container demo">
<style type="text/css">
.demo{
width: 600px;
}
.line_01{
padding: 0 20px 0;
margin: 20px 0;
line-height: 1px;
border-left: 200px solid #ddd;
border-right: 200px solid #ddd;
text-align: center;
}
.line_02{
height: 1px;
border-top: 1px solid #ddd;
text-align: center;
}
.line_02 span{
position: relative;
top: -12px;
background: #fff;
padding: 0 20px;
}
.line_03{
width:600px;
}
.line_03 b{
background: #ddd;
margin-top: 4px;
display: inline-block;
width: 180px;
height: 1px;
_overflow: hidden;
vertical-align: middle;
}
.line_03 span{
display: inline-block;
width: 220px;
vertical-align: middle;
text-align: center;
}
.line_04{
width:600px;
}
.line_04{
overflow: hidden;
_zoom: 1;
}
.line_04 b{
background: #ddd;
margin-top: 12px;
float: left;
width: 26%;
height: 1px;
_overflow: hidden;
}
.line_04 span{
padding: 0 10px;
width: 32%;
float: left;
text-align: center;
}
.line_05{
letter-spacing: -1px;
color: #ddd;
}
.line_05 span{
letter-spacing: 0;
color: #222;
margin:0 20px;
}
</style>
<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>
<div class="line_01">小小分隔线 单标签实现</div>
<br>
<br>
<div class="line_02"><span>小小分隔线 巧用色实现</span></div>
<br>
<br>
<div class="line_03"><b></b><span>小小分隔线 inline-block实现</span><b></b></div>
<br>
<br>
<div class="line_04"><b></b><span>小小分隔线 浮动来实现</span><b></b></div>
<br>
<br>
<div class="line_05">———————————<span>小小分隔线 字符来实现</span>————————————</div>
</div>
</body>
</html>
