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   id="l7xl5lb"   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   id="l7f7blt"   class="line_01">小小分隔線 單標簽實現</div><br><br><div   id="fhd73jl"   class="line_02"><span>小小分隔線 巧用色實現</SPAN>
</div>
</div>
<div   id="tjpzhnp"   class=page1>
<p align="center" class="pageLink"></p>
</div>

<div   id="z5ljtzf"   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   id="f7fpjnr"   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">

學習交流