点击下载
本文文档

当前位置：首页 - 科技 - 知识百科 - 正文

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

来源：动视网责编：小采时间：2020-11-27 15:29:02

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

利用CSS实现在文本的周围插入内容:CSS实现文本周围插入内容的方案本文要讨论的是如何在文本的周围插入图标，怎么样控制它们之间的位置关系，通过HTML结构合理性与CSS属性的使用来比较不同方案所实现效果的优缺点。常见设计稿要求在文本前、后、上、下插入图标、线条、三角形、圆形插入的元素要

推荐度：

点击下载本文 文档为doc格式

导读利用CSS实现在文本的周围插入内容:CSS实现文本周围插入内容的方案本文要讨论的是如何在文本的周围插入图标，怎么样控制它们之间的位置关系，通过HTML结构合理性与CSS属性的使用来比较不同方案所实现效果的优缺点。常见设计稿要求在文本前、后、上、下插入图标、线条、三角形、圆形插入的元素要

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属性

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

线条

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实现三角形。

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

圆形

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;
 /*清除行内元素的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的属性画出圆形。

border-radius在IE8以下无法使用，需要强制

Trick1：用图片background替代

Trick2：调用脚本 ie-css3.htc，使IE浏览器支持css3属性。

当前元素一定要有定位属性，像是position:relative或是position:absolute属性。
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的属性显示图片。

扩展的知识

关于如何居中元素，这里有个作弊工具：如何居中元素

总结

如果是连续多个图标符号，则使用HTML标签表示。

如果是插入单个符号的话，在不考虑兼容性的情况下，使用伪元素 > 额外添加HTML标签。

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

推荐度：

点击下载本文 文档为doc格式

标签：文字加入利用

热门焦点

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

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

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

常见设计稿要求

理伦知识

实践操作

线条

html

css

分析

html

css

分析

css

分析

圆形

html

css

分析

自定义图标

html

css

分析

扩展的知识

总结

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

最新推荐

猜你喜欢

热门推荐