利用CSS實現在文本的周圍插入內容

CSS實現文本周圍插入內容的方案

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

常見設計稿要求

• 在文字前、後、上方、下方插入圖示、線條、三角形、圓形

• 插入的元素要和文字實現間距、對齊（居中、頂部、基線）等位置關係。

理倫知識

• 靈活使用display、background等屬性

• 透過 :before和:after配合content屬性來實現插入內容。

• 透過absolute、vertical、margin、line-height等屬性實作文字與符號位置關係。

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

##實作動作

• 解法一：改變HTML結構，透過在文字元素前後增加標籤如

  與< /i>

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

• 必須有content屬性

• 插入的元素的是

  內嵌元素，需要顯示地定義為區塊級元素，才能設定高度，填充，邊距等

線條

html

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

css

.article-block-title {
    height: 44px;
    /*实现文本与竖线对齐*/
    line-height: 44px;
    border-left: 3px solid #72b16a;
    padding-left: 20px;
}

分析

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

• 對於inline,inline-block等，可使用line-height實作文字與垂直線的居中。

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實作線與文字垂直居中。

• 該屬性在ie7中失效

• #可使用margin-top實作（前提知道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實作三角形。可以實作右圖的線條位於文字「成為我們的志工」的正下邊。 ##

  <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;
      /*清除行内元素的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浏览器调用脚本作用于'btn'类 */
  }

分析
#這裡是banner輪播圖等需求的做法，因為是連續的按鈕，只要利用border-radius的屬性畫出圓形。

Trick2：呼叫腳本ie-css3.htc，使IE瀏覽器支援css3屬性。一定要有定位屬性，像是position:relative或是position:absolute屬性。

#自訂圖示

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的屬性顯示圖片。元素，這裡有個作弊工具：如何居中元素

• 總結

• 如果是連續多個圖示符號，則使用HTML標籤表示。

如果是插入單一符號的話，在不考慮相容性的情況下，使用偽元素> 額外新增HTML標籤。

以上是利用CSS實現在文本的周圍插入內容的詳細內容。更多資訊請關注PHP中文網其他相關文章！