当前位置:Gxlcms > html代码 > 利用CSS实现在文本的周围插入内容

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

时间:2021-07-01 10:21:17 帮助过:23人阅读

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;
}
分析
  • 在文本前后添加ispan标签相对使用伪元素: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属性。

    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的属性显示图片。

扩展的知识

  • 关于如何居中元素,这里有个作弊工具:如何居中元素

总结

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

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

以上就是利用CSS实现在文本的周围插入内容的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行