利用CSS实现在文本的周围插入内容

巴扎黑

Lepaskan： 2017-07-18 17:23:11

asal

1270 orang telah melayarinya

CSS实现文本周围插入内容的方案

本文要讨论的是如何在文本的周围插入图标，怎么样控制它们之间的位置关系，通过HTML结构合理性与CSS属性的使用来比较不同方案所实现效果的优缺点。

常见设计稿要求

在文本前、后、上、下插入图标、线条、三角形、圆形
插入的元素要和文本实现间距、对齐（居中、顶部、基线）等位置关系。

理伦知识

灵活使用display、background等属性
通过:before和:after配合content属性来实现插入内容。
通过absolute、vertical、margin、line-height等属性实现文本与符号位置关系。
能够使用CSS属性画出的图形则用CSS属性，否则用background属性显示背景图片

实践操作

解法一：改变HTML结构，通过在文本元素前或后增加标签如<span></span>和<i></i>
解法二：直接使用伪元素:before和:after（Ie7以下不支持）

必须有content属性
插入的元素的是内联元素，需要显示地定义为块级元素，才能设置高度，填充，边距等

线条

利用CSS实现在文本的周围插入内容

html

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

Salin selepas log masuk

css

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

Salin selepas log masuk

分析

直接利用该文本的容器使用border-left、border-right、border-top、border-bottom可以分别实现只显示文本上、下、左、右的线条。
对于inline,inline-block等，可使用line-height实现文本与竖线的居中。

利用CSS实现在文本的周围插入内容

html

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

Salin selepas log masuk

css

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

Salin selepas log masuk

分析

在文本前后添加i、span标签相对使用伪元素:before和:after更加清晰明了。
vertical-align:middle实现线与文本垂直居中。

该属性在ie7中失效
可使用margin-top实现（前提知道parent-element高度

html

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

Salin selepas log masuk

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

Salin selepas log masuk

分析

通过transparent属性配合border实现三角形。
注意的是，我们可以使用position属性使:before和:after插入到任意位置，不仅仅是“前”或“后”。可以实现右图的线条位于文字“成为我们的志愿者”的正下边。

圆形

利用CSS实现在文本的周围插入内容

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>

Salin selepas log masuk

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'类 */
}

Salin selepas log masuk

分析

这里是banner轮播图等需求的做法，因为是连续的按钮，只要利用border-radius的属性画出圆形。
border-radius在IE8以下无法使用，需要强制

Trick1：用图片background替代
Trick2：调用脚本 ie-css3.htc，使IE浏览器支持css3属性。

当前元素一定要有定位属性，像是position:relative或是position:absolute属性。
z-index值一定要比周围元素的要高

自定义图标

利用CSS实现在文本的周围插入内容

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>

Salin selepas log masuk

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

Salin selepas log masuk