CSS多种方法实现分隔线

2024-09-05 12:17:02

字体：大中小

来源：转载

供稿：网友

代码中演示了几种用CSS实现分隔线的方法，有的是使用单标签实现，有的是使用颜色搭配来实现，有的则是使用inline-block实现，或者用浮动来实现，当然也可直接用字符来现，具体选用哪一种方法，就看你的爱好了，仁者见仁，智者见智。

<!DOCTYPE HTML><html><head><meta charset="UTF-8" /><title>CSS实现分隔线的几种方法</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></head><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 class="line_01">小小分隔线 单标签实现</div><br><br><div class="line_02"><span>小小分隔线 巧用色实现</SPAN>
</div>
</div>
<div class=page1>
<p align="center" class="pageLink"></p>
</div>

<div class="fenxiang">

<div style="text-align:left">上一篇：<a href='/wen/2024/09-05/1556468.html'>纯CSS3实现的饼形图和倒三角统计图效果</a></div>
<br>
<div style="text-align:left">下一篇：<a href='/wen/2024/09-05/1556470.html'>9种样式CSS3 渐变按钮集合</a></div>
<br>
<script src=/d/js/acmsd/gao21.js></script>

</div>

<div class="pinglun">

<script>
		  function CheckPl(obj)
		  {
		  if(obj.saytext.value=="")
		  {
		  alert("您没什么话要说吗？");
		  obj.saytext.focus();
		  return false;
		  }
		  return true;
		  }
		  </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost">

学习交流