CSS巧妙实现分隔线的几种方法

http://www.daqianduan.com/example/?pid=4258

 

<!DOCTYPE HTML><html><head><meta charset="UTF-8" /><title>实例: CSS巧妙实现分隔线的几种方法 -- 大前端</title><style>
@charset "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;background:#eee}
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:32px;background-color:#4A4A4A;line-height:32px;text-align: left;}
.demo-name{background-color: #428BCA;color: #fff;display: inline-block;padding: 0 20px;}
.demo-title{height:0;overflow:hidden}
.demo-container{clear: both;padding:30px 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><h1 class="demo-title">实例: CSS巧妙实现分隔线的几种方法 -- 大前端</h1><div class="demo-header"><a class="demo-name" href="http://www.daqianduan.com/css-a-line/">&laquo; CSS巧妙实现分隔线的几种方法</a><span style="display:none"></span></div><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 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><br><br></div></body></html>
posted @ 2013-10-10 09:38  a fine day  阅读(237)  评论(0)  编辑  收藏  举报