CSS實現(xiàn)文本周圍插入內(nèi)容的方案

本文要討論的是如何在文本的周圍插入圖標，怎么樣控制它們之間的位置關系，通過HTML結構合理性與CSS屬性的使用來比較不同方案所實現(xiàn)效果的優(yōu)缺點。

常見設計稿要求

• 在文本前、后、上、下插入圖標、線條、三角形、圓形

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

理倫知識

• 靈活使用display、background等屬性

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

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

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

實踐操作

• 解法一：改變HTML結構，通過在文本元素前或后增加標簽如<span></span>和<i></i>

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

• 必須有content屬性

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

線條

html

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

css

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

分析

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

• 對于inline,inline-block等，可使用line-height實現(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標簽相對使用偽元素:before和:after更加清晰明了。

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

• 該屬性在ie7中失效

• 可使用margin-top實現(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寬，所以這里設置78px*/
    border-left: 78px solid transparent;
    border-right: 78px solid transparent;
    border-bottom: 10px solid #fff;
}

分析

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

• 注意的是，我們可以使用position屬性使:before和:after插入到任意位置，不僅僅是“前”或“后”�？梢詫崿F(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;
    /*畫圓*/
    -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'類 */
}

分析

• 這里是banner輪播圖等需求的做法，因為是連續(xù)的按鈕，只要利用border-radius的屬性畫出圓形。

• border-radius在IE8以下無法使用，需要強制

• Trick1：用圖片background替代

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

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

2. z-index值一定要比周圍元素的要高

自定義圖標

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

分析

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

擴展的知識

• 關于如何居中元素，這里有個作弊工具：如何居中元素

總結

• 如果是連續(xù)多個圖標符號，則使用HTML標簽表示。

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

以上就是利用CSS實現(xiàn)在文本的周圍插入內(nèi)容的詳細內(nèi)容，更多請關注php中文網(wǎng)其它相關文章！