CSS를 사용하여 텍스트 주위에 콘텐츠 삽입

巴扎黑

풀어 주다： 2017-07-18 17:23:11

원래의

1290명이 탐색했습니다.

텍스트 주위에 콘텐츠를 삽입하는 CSS 솔루션

이 글에서는 텍스트 주위에 아이콘을 삽입하는 방법, 텍스트 사이의 위치 관계를 제어하는 방법, HTML 구조의 합리성과 CSS 속성 사용을 통해 다양한 솔루션의 구현을 비교합니다. 효과의 장점과 단점.

공통 디자인 초안 요구 사항

텍스트 앞, 뒤, 위, 아래에 아이콘, 선, 삼각형, 원을 삽입하세요.
삽입된 요소는 텍스트와 간격을 두고 정렬되어야 합니다(가운데, 위쪽, 기준선) 및 기타 위치 관계.

윤리적 지식

디스플레이, 배경 등의 속성을 유연하게 사용
콘텐츠 속성과 함께 :before 및 :after를 사용하여 콘텐츠를 삽입하세요. :before和:after配合content属性来实现插入内容。
通过absolute、vertical、margin、line-height等属性实现文本与符号位置关系。
能够使用CSS属性画出的图形则用CSS属性，否则用background属性显示背景图片

实践操作

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

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

线条

CSS를 사용하여 텍스트 주위에 콘텐츠 삽입

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实现文本与竖线的居中。

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>

로그인 후 복사

css

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

로그인 후 복사

分析

在文本前后添加i、span
절대, 수직, 여백, 줄 높이 및 기타 속성을 통해 텍스트와 기호 간의 위치 관계를 실현합니다.

와 같은 요소 해결 방법 2: 의사 요소를 직접 사용하세요. 및: 이후(Ie7 이하에서는 지원되지 않음)

콘텐츠 속성이 있어야 합니다

삽입된 요소는
인라인 요소
이며, 이를 위해서는
로 명시적으로 정의되어야 합니다. 높이, 패딩, 여백 등을 설정합니다.

Lines

CSS를 사용하여 텍스트 주위에 콘텐츠 삽입

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

로그인 후 복사

Analytics

border-left, border-right, border-top, border-bottom 텍스트를 사용하여 컨테이너를 직접 사용하면 각각 텍스트의 위쪽, 아래쪽, 왼쪽, 오른쪽 줄만 표시할 수 있습니다.
인라인, 인라인 블록 등의 경우 line-height를 사용하여 텍스트와 세로선을 중앙에 배치할 수 있습니다.

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

로그인 후 복사

분석

텍스트 앞뒤에 i 및 span 태그를 추가하면 의사 요소(앞과 :뒤)를 사용하는 것보다 더 명확해집니다.
vertical-align:middle은 줄과 텍스트의 수직 중심을 달성합니다.

이 속성은 ie7에서 유효하지 않습니다

CSS를 사용하여 텍스트 주위에 콘텐츠 삽입 margin-top을 사용하여 구현할 수 있습니다(전제 조건은 상위 요소 높이를 아는 것입니다

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

로그인 후 복사

html
rrreee
css

Analytics🎜🎜🎜🎜여기에 방법이 있습니다. 배너 캐러셀 및 기타 요구 사항은 연속적이기 때문에 원을 그리려면 border-radius 속성을 사용하세요. 🎜🎜🎜🎜border-radius는 IE8 이하에서는 사용할 수 없으며 🎜🎜🎜🎜 🎜Trick1: 이미지 배경을 🎜🎜🎜🎜로 교체합니다. 즉, css3.htc 스크립트를 호출하면 IE 브라우저가 css3 속성을 지원할 수 있습니다. 🎜🎜🎜🎜🎜🎜현재 요소에는 position:relative 또는 같은 위치 지정 속성이 있어야 합니다. 위치:절대 속성. 🎜🎜🎜🎜Z-색인 값은 주변 요소보다 높아야 합니다. 🎜🎜🎜🎜🎜맞춤 아이콘🎜🎜🎜🎜🎜html🎜rrreee🎜css🎜rrreee🎜Analytic🎜🎜 🎜🎜다음은 배경 속성을 사용하여 이미지를 표시하는 평가 및 기타 요구 사항에 대한 몇 가지 사례입니다. 🎜🎜🎜 🎜 확장된 지식 🎜🎜🎜🎜 요소를 중앙에 배치하는 방법에 대한 치트 도구는 다음과 같습니다. 요소를 중앙에 배치하는 방법 🎜🎜🎜🎜 요약 🎜🎜🎜🎜여러 개의 아이콘 기호가 연속된 경우 HTML 태그를 사용하세요. 🎜🎜🎜🎜단일 기호를 삽입하려면 의사 요소 >를 사용하여 호환성을 고려하지 않고 HTML 태그를 추가하세요.

위 내용은 CSS를 사용하여 텍스트 주위에 콘텐츠 삽입의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!