css里的小分隔线

html-css0304

css里的小分隔线,第1张

#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[超出容易可见面积部分内容不显示]

你要的各种分割线都在这

<html>

<head>

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

<meta http-equiv="content-type" content="text/htmlcharset=utf-8" />

<title>css各种分割线</title>

<style>

body

{

text-align:center

}

.split-line1

{

border-top:solid 1px #999

width:100%

padding:20px 0px

margin-top:20px

}

.split-line2

{

border-top:dashed 1px #999

width:100%

padding:20px 0px

margin-top:20px

}

.split-line3

{

border-top:dotted 1px #999

width:100%

padding:20px 0px

margin-top:20px

}

.split-line4

{

border-top:double 6px #999

width:100%

padding:20px 0px

margin-top:20px

}

</style>

</head>

<body>

第一部分内容

<div class="split-line1">

实线分割线

</div>

<div class="split-line2">

虚线分割线

</div>

<div class="split-line3">

点状分割线

</div>

<div class="split-line4">

双线分割线

</div>

</body>

</html>