上門一對一計算機家教
當前位置: 首頁 > 建站心得 >

兩邊橫線,中間標題的樣式,用CSS應該怎么寫

點擊: 時間:2016-04-28 來源:北京家教網
這個方法很多 一般都是重疊的,不是說一個標簽就實現的。一般有先來一個橫線標簽,在來一個標簽把文字包含在span標簽內,最后在通過位置吧span標簽移動到上面。具體步驟如下: 一、外層定義一個盒子,用來控制寬度,如: .title{ width:
這個方法很多 一般都是重疊的,不是說一個標簽就實現的。一般有先來一個橫線標簽,在來一個標簽把文字包含在span標簽內,最后在通過位置吧span標簽移動到上面。具體步驟如下:
一、外層定義一個盒子,用來控制寬度,如:
.title{ width:800px; margin:0 auto;}
二、定義中間線,.xian{ height:20px; border-bottom:1px solid #f00; margin-bottom:-10px; float:left;width: 100%; }
說明:總的高度是20px,然后使用margin負數向上移動一半,即-10px,使線在中間
三、定義中間文字使用float和寬度100%來自適應外層寬度:.biaoti{ text-align:center; float:left;width: 100%; height:20px; line-height:20px;}
四、把中間文字加到span里面,同時間定義一個背景色,壓住文字所占的中間線,不然中間線在字背后穿過
.biaoti span{ background:#fff; padding:0 10px;}
完整代碼如下:
<style type="text/css">
.title{ width:800px; margin:0 auto;}
.xian{ height:20px; border-bottom:1px solid #f00; margin-bottom:-10px; float:left;width: 100%; }
.biaoti{ text-align:center; float:left;width: 100%; height:20px; line-height:20px;}
.biaoti span{ background:#fff; padding:0 10px;}
</style>
<div class="title">
<div class="xian"></div>
<div class="biaoti"><span>我是標題我在中間,寬度由外層決定,并且兩邊還有點空距</span></div>
</div>由北京計算機家教網原創,轉移請說明出處http://www.befwot.tw
 
------分隔線----------------------------
30选5开奖查询