主頁 > 知識庫 > css實現(xiàn)文章分割線樣式的多種方法總結(jié)

css實現(xiàn)文章分割線樣式的多種方法總結(jié)

熱門標簽:400電話唐山辦理 電話機器人鑰匙扣 廣西房產(chǎn)智能外呼系統(tǒng)推薦 漯河外呼調(diào)研線路 電銷外呼系統(tǒng)是違法的嗎 威力最大的電銷機器人 旅游地圖標注線路 電銷專用外呼線路 地圖標注位置怎么弄圖

這篇文章整理css如何實現(xiàn)文章分割線的多種方式,分割線在頁面中可以起到美化作用,那么就來看看使用css實現(xiàn)分割線樣式的多種方法。效果如下:

方式一:單個標簽實現(xiàn)分隔線:

html:

<div class="line_01">小小分隔線 單標簽實現(xiàn)</div>

css:

.demo_line_01{  
    padding: 0 20px 0;  
    margin: 20px 0;  
    line-height: 1px;  
    border-left: 190px solid #ddd;  
    border-right: 190px solid #ddd;  
    text-align: center;  
}

優(yōu)點:代碼簡潔

方式二、巧用背景色實現(xiàn)分隔線:

html:

<div class="line_02"><span>小小分隔線 巧用色實現(xiàn)</span></div>

css:

.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;  
}

優(yōu)點:代碼簡潔,可自適應寬度

方式三、inline-block實現(xiàn)分隔線:

html:

<div class="line_03"><b></b><span>小小分隔線 inline-block實現(xiàn)</span><b></b></div>

css:

.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;  
}

方式四、浮動實現(xiàn)分隔線:

html: 

<div class="line_04"><b></b><span>小小分隔線 浮動來實現(xiàn)</span><b></b></div>

css:

.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;  
}

方式五、利用字符實現(xiàn)分隔線:

html:

<div class="line_05">———————————<span>小小分隔線 字符來實現(xiàn)</span>————————————</div>

css:

.demo_line_05{  
    letter-spacing: -1px;  
    color: #ddd;  
}  
.demo_line_05 span{  
    letter-spacing: 0;  
    color: #222;  
    margin:0 20px;  
}

優(yōu)點:代碼簡潔 以上簡單介紹了分隔線的寫法,也許還有其它比較合適的寫法,看環(huán)境各取所需吧! 

到此這篇關(guān)于css實現(xiàn)文章分割線樣式的多種方法總結(jié)的文章就介紹到這了,更多相關(guān)css分割線樣式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!

標簽:試駕邀約 湖北 湘西 焦作 欽州 銅陵 綏化 無錫

巨人網(wǎng)絡通訊聲明:本文標題《css實現(xiàn)文章分割線樣式的多種方法總結(jié)》,本文關(guān)鍵詞  css,實現(xiàn),文章,分割線,樣式,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡,涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《css實現(xiàn)文章分割線樣式的多種方法總結(jié)》相關(guān)的同類信息!
  • 本頁收集關(guān)于css實現(xiàn)文章分割線樣式的多種方法總結(jié)的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章