CSS實(shí)現(xiàn)文本周?chē)�插入�?nèi)容的方案

本文要討論的是如何在文本的周?chē)�插入圖標(biāo)，怎么樣控制它們之間的位置關(guān)系，通過(guò)HTML結(jié)構(gòu)合理性與CSS屬性的使用來(lái)比較不同方案所實(shí)現(xiàn)效果的優(yōu)缺點(diǎn)。

常見(jiàn)設(shè)計(jì)稿要求

• 在文本前、后、上、下插入圖標(biāo)、線條、三角形、圓形

• 插入的元素要和文本實(shí)現(xiàn)間距、對(duì)齊（居中、頂部、基線）等位置關(guān)系。

理倫知識(shí)

• 靈活使用display、background等屬性

• 通過(guò):before和:after配合content屬性來(lái)實(shí)現(xiàn)插入內(nèi)容。

• 通過(guò)absolute、vertical、margin、line-height等屬性實(shí)現(xiàn)文本與符號(hào)位置關(guān)系。

• 能夠使用CSS屬性畫(huà)出的圖形則用CSS屬性，否則用background屬性顯示背景圖片

實(shí)踐操作

• 解法一：改變HTML結(jié)構(gòu)，通過(guò)在文本元素前或后增加標(biāo)簽如<span></span>和<i></i>

• 解法二：直接使用偽元素:before和:after（Ie7以下不支持）

• 必須有content屬性

• 插入的元素的是內(nèi)聯(lián)元素，需要顯示地定義為塊級(jí)元素，才能設(shè)置高度，填充，邊距等

線條

html

<div class="article-block-title">
    <h2 class="title">
        <span>前端技術(shù)</span><i>前端技術(shù)前端技術(shù)</i>
    </h2>
</div>

css

.article-block-title {
    height: 44px;
    /*實(shí)現(xiàn)文本與豎線對(duì)齊*/
    line-height: 44px;
    border-left: 3px solid #72b16a;
    padding-left: 20px;
}

分析

• 直接利用該文本的容器使用border-left、border-right、border-top、border-bottom可以分別實(shí)現(xiàn)只顯示文本上、下、左、右的線條。

• 對(duì)于inline,inline-block等，可使用line-height實(shí)現(xiàn)文本與豎線的居中。

html

<p class="text-info">
    <i class="line line-left"></i>resto restaurant home page website template<i class="line line-right"></i>
</p>

css

.text-info .line {
    display: inline-block;
    width: 40px;
    border-top: 1px solid #fff;
    /*使橫線居中*/
    vertical-align: middle;
    /*for IE7*/
    *margin-top: 22px;
}

分析

• 在文本前后添加i、span標(biāo)簽相對(duì)使用偽元素:before和:after更加清晰明了。

• vertical-align:middle實(shí)現(xiàn)線與文本垂直居中。

• 該屬性在ie7中失效

• 可使用margin-top實(shí)現(xiàn)（前提知道parent-element高度

html

<div class="menu-tips">The menu</div>

css

.menu-tips:after {
    position: absolute;
    left: 0;
    bottom: 0;
    content: "";
    width: 0;
    height: 0;
    /*menu是156px寬，所以這里設(shè)置78px*/
    border-left: 78px solid transparent;
    border-right: 78px solid transparent;
    border-bottom: 10px solid #fff;
}

分析

• 通過(guò)transparent屬性配合border實(shí)現(xiàn)三角形。

• 注意的是，我們可以使用position屬性使:before和:after插入到任意位置，不僅僅是“前”或“后”�？梢詫�(shí)現(xiàn)右圖的線條位于文字“成為我們的志愿者”的正下邊。

圓形

html

<div class="btn-group">
    <a href="" class="btn"></a>
    <a href="" class="btn active"></a>
    <a href="" class="btn"></a>
    <a href="" class="btn"></a>
</div>

css

.index-panel-header .btn-group {
    float: right;
    /*清除行內(nèi)元素的4px空白間距*/
    font-size: 0;
}

.index-panel-header .btn {
    display: inline-block;
    margin-left: 11px;
    width: 9px;
    height: 9px;
    background: #dedede;
    /*畫(huà)圓*/
    -moz-border-radius: 5px; /* Firefox */
    -webkit-border-radius: 5px; /* Safari 和 Chrome  */
    border-radius:5px; /* Opera 10.5+, 以及使用了IE-CSS3的IE瀏覽器 */
    /*for ie7、8*/
    position: relative;
    z-index:2;
    behavior: url(../ie-css3.htc); /* 通知IE瀏覽器調(diào)用腳本作用于'btn'類(lèi) */
}

分析

• 這里是banner輪播圖等需求的做法，因?yàn)槭沁B續(xù)的按鈕，只要利用border-radius的屬性畫(huà)出圓形。

• border-radius在IE8以下無(wú)法使用，需要強(qiáng)制

• Trick1：用圖片background替代

• Trick2：調(diào)用腳本 ie-css3.htc，使IE瀏覽器支持css3屬性。

1. 當(dāng)前元素一定要有定位屬性，像是position:relative或是position:absolute屬性。

2. z-index值一定要比周?chē)�元素的要�?/p>

自定義圖標(biāo)

html

<div class="star-bar">
    <span class="star"></span>
    <span class="star"></span>
    <span class="star"></span>
    <span class="star"></span>
    <span class="star nostar"></span>
</div>

css

.star-bar {
    font-size: 0px;
}

.star {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 5px;
    background: url("../images/index-star.png") no-repeat;
}

.nostar {
    background-position: 0 -10px;
}

分析

• 這里是一些評(píng)分等需求的做法，利用background的屬性顯示圖片。

擴(kuò)展的知識(shí)

• 關(guān)于如何居中元素，這里有個(gè)作弊工具：如何居中元素

總結(jié)

• 如果是連續(xù)多個(gè)圖標(biāo)符號(hào)，則使用HTML標(biāo)簽表示。

• 如果是插入單個(gè)符號(hào)的話，在不考慮兼容性的情況下，使用偽元素 > 額外添加HTML標(biāo)簽。

以上就是利用CSS實(shí)現(xiàn)在文本的周?chē)�插入�?nèi)容的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！