<! DOCTYPE html>
<meta charset= "UTF-8"/>
Several methods of <TITLE>CSS realization of dividing line </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>
<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>http://www.999jiujiu.com/</div>
<div class= "line_01" > Small Divider single label implementation </div>
<br>
<br>
<div class= "line_02" ><span> small divider line for the use of color </span></div>
<br>
<br>
<div class= "line_03" ><b></b><span> small divider Inline-block Implementation </span><b></b> </div>
<br>
<br>
<div class= "line_04" ><b></b><span> small divider floating to achieve </span><b></b></div >
<br>
<br>
<div class= "line_05" > ——————————— <span> Small separator line characters to implement </span> ———————————— </div>
</div>
</body>
CSS multiple ways to implement separator lines