css巧妙实现分隔线
2016-03-23 20:18 孤独大兔子 阅读(326) 评论(0) 编辑 收藏 举报单个标签实现分隔线
.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; }
优点:代码简洁
背景色实现分隔线
.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; }
优点:代码简洁,可自适应宽度
inline-block实现分隔线
.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; }
优点:文字可多行
浮动实现分隔线
.demo_line_04{ width:600px; } .demo_line_04{ overflow: hidden; _zoom: 1; } .demo_line_04 b{ background: #ddd; margin-top: 8px; float: left; width: 26%; height: 1px; _overflow: hidden; }
利用字符实现分隔线
<div class="demo_line_05">———————————<span>小小分隔线 字符来实现</span>————————————</div>
.demo_line_05{ letter-spacing: -1px; color: #ddd; } .demo_line_05 span{ letter-spacing: 0; color: #222; margin:0 20px; }
优点:代码简洁
以上转自大前端:http://www.daqianduan.com/4258.html
还有一种利用fieldset标签实现的方法:
html:
<form class="form">
<fieldset class="fieldset">
<legend class="legend"><a href="#">可能感兴趣的人</a></legend>
<div class="btns">
<a href="#">更多</a><a href="#">111</a>
</div>
</fieldset>
</form>
css:
.form{ margin:10px auto; width:800px} .fieldset{ border-width:1px 0 0; border-color:#ccc; border-style:solid; padding-left:30px;} .legend{ padding:0 5px;} .btns{ padding:0 5px; float:right; margin:-18px 10px 0 0; background:#fff; _position:relative } .btns a{ border-radius:5px; border:1px solid #CCC; padding:3px 7px; margin:0 2px; background:#fff; display:inline-block;}
@