<div class="line_01">小小分隔线 单标签实现</div>
.demo_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
<div class="line_02"><span>小小分隔线 巧用色实现</span></div>
.demo_line_02{height: 1px
border-top: 1px solid #ddd
text-align: center
}
.demo_line_02 span{
position: relative
top: -8px
background: #fff
padding: 0 20px
}
<div class="line_03"><b></b><span>小小分隔线 inline-block实现</span><b></b></div>
.demo_line_03{width:600px
}
.demo_line_03 b{
background: #ddd
margin-top: 4px
display: inline-block
width: 180px
height: 1px
_overflow: hidden
vertical-align: middle
}
.demo_line_03 span{
display: inline-block
width: 220px
vertical-align: middle
}
#welcome ul li em { display:blockfloat:leftheight:7pxmargin:6px 0border-right:1px solid #bcbcbcoverflow:hidden}#welcome ul li em [选择ID为welcom的容器下ul li 里的em元素为样式试用对象]
display:block[做为块元素显示]
float:left[靠左浮动,默认li元素是列显示,用了float可以让容器在一行内显示]
height:7px[高7像素]
margin:6px 0[子容器距父容器上下边框的距离分别为6像素,等同于margin:6px 0 6px 0]
border-right:1px solid #bcbcbc[容器右边框显示为1像素,实线,颜色为#bcbcbc]
overflow:hidden[超出容易可见面积部分内容不显示]
css中写border-bottom:1px dashed #ccc
dashed 虚线
solid 实线
dotted 点
<style>.c{float:leftwidth:200px}
li{float:leftwidth:200pxheight:30pxline-height:30pxborder-bottom:1px dashed #ccc}
</style>
<div class="c">
<ul>
<li>11111111111111111111</li>
<li>11111111111111111111</li>
<li>11111111111111111111</li>
</ul>
</div>