<p class="sycode"> <br> <br> </p> <br> <meta charset="UTF-8"> <br> <title>CSS实现分隔线的几种方法</title> <br> <style> <br /> [url=home.php?mod=space&uid=597245]@charset[/url] "utf-8"; <br /> body,h1,h2,h3,h4,p,ul,li,ol,dl,dt,dd,input,textarea,figure,form{margin:0;padding:0} <br /> body,input,textarea{font-size:12px;font-family:microsoft yahei} <br /> body{text-align:center;color:#33383D;} <br /> ul,ol{list-style:none} <br /> img{border:0} <br /> button,input {line-height:normal;*overflow:visible} <br /> input,textarea{outline:none} <br /> a{color:#3B8DD1;text-decoration:none} <br /> a:hover{color:#8CAC52} <br /> .demo-header{position:relative;height:22px;background-color:#33363B;line-height:22px;padding:2px 10px;text-align: left;} <br /> .demo-name{color: #ccc;} <br /> .demo-title,.demo-footer{height:0;overflow:hidden} <br /> .demo-container{clear: both;padding:40px 10px 20px;text-align:left;margin:0 auto;line-height: 18px;} <br /> .demo h2{font-size: 15px;padding-bottom: 6px;margin-bottom: 20px;border-bottom: solid 1px #ddd;} <br /> </style> <br> <br> <br> <div class="demo-container demo"> <br> <style type="text/css"> <br /> .demo{ <br /> width: 600px; <br /> } <br /> .line_01{ <br /> padding: 0 20px 0; <br /> margin: 20px 0; <br /> line-height: 1px; <br /> border-left: 200px solid #ddd; <br /> border-right: 200px solid #ddd; <br /> text-align: center; <br /> } <br /> .line_02{ <br /> height: 1px; <br /> border-top: 1px solid #ddd; <br /> text-align: center; <br /> } <br /> .line_02 span{ <br /> position: relative; <br /> top: -12px; <br /> background: #fff; <br /> padding: 0 20px; <br /> } <br /> .line_03{ <br /> width:600px; <br /> } <br /> .line_03 b{ <br /> background: #ddd; <br /> margin-top: 4px; <br /> display: inline-block; <br /> width: 180px; <br /> height: 1px; <br /> _overflow: hidden; <br /> vertical-align: middle; <br /> } <br /> .line_03 span{ <br /> display: inline-block; <br /> width: 220px; <br /> vertical-align: middle; <br /> text-align: center; <br /> } <br /> .line_04{ <br /> width:600px; <br /> } <br /> .line_04{ <br /> overflow: hidden; <br /> _zoom: 1; <br /> } <br /> .line_04 b{ <br /> background: #ddd; <br /> margin-top: 12px; <br /> float: left; <br /> width: 26%; <br /> height: 1px; <br /> _overflow: hidden; <br /> } <br /> .line_04 span{ <br /> padding: 0 10px; <br /> width: 32%; <br /> float: left; <br /> text-align: center; <br /> } <br /> .line_05{ <br /> letter-spacing: -1px; <br /> color: #ddd; <br /> } <br /> .line_05 span{ <br /> letter-spacing: 0; <br /> color: #222; <br /> margin:0 20px; <br /> } <br /> </style> <br> <div><a href="http://www.999jiujiu.com/"> http://www.999jiujiu.com/</a></div> <br> <div class="line_01">小小分隔线 单标签实现</div> <br> <br> <br> <br> <br> <div class="line_02"><span>小小分隔线 巧用色实现</span></div> <br> <br> <br> <br> <br> <div class="line_03"> <b></b><span>小小分隔线 inline-block实现</span><b></b> </div> <br> <br> <br> <br> <br> <div class="line_04"> <b></b><span>小小分隔线 浮动来实现</span><b></b> </div> <br> <br> <br> <br> <br> <div class="line_05">???????????<span>小小分隔线 字符来实现</span>????????????</div> <br> </div> <br> <br>
