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

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

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

공통 디자인 초안 요구 사항

• 텍스트 앞, 뒤, 위, 아래에 아이콘, 선, 삼각형, 원을 삽입하세요.

• 삽입된 요소는 텍스트와 간격을 두고 정렬되어야 합니다(가운데, 위쪽, 기준선) 및 기타 위치 관계.

윤리적 지식

• 디스플레이, 배경 등의 속성을 유연하게 사용

• 콘텐츠 속성과 함께 :before 및 :after를 사용하여 콘텐츠를 삽입하세요. :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

• 절대, 수직, 여백, 줄 높이 및 기타 속성을 통해 텍스트와 기호 간의 위치 관계를 실현합니다.

CSS 속성을 사용하여 그릴 수 있는 그래픽은 CSS 속성을 사용합니다. 그렇지 않으면 배경 속성을 사용하여 배경 이미지를 표시합니다.
실습
해결책 1: 텍스트 앞이나 뒤에 태그를 추가하여 HTML 구조를 변경합니다. <span></span> 및 <i></i>

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

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

• 삽입된 요소는

  인라인 요소

  이며, 이를 위해서는
블록 수준 요소
• 로 명시적으로 정의되어야 합니다. 높이, 패딩, 여백 등을 설정합니다.

Lines

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

분석

1. 텍스트 앞뒤에 i 및 span 태그를 추가하면 의사 요소(앞과 :뒤)를 사용하는 것보다 더 명확해집니다.

2. vertical-align:middle은 줄과 텍스트의 수직 중심을 달성합니다.

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

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

ana 용해

통과 투명 속성은 테두리와 함께 삼각형을 구현하는 데 사용됩니다.
위치 속성을 사용하여 "앞"이나 "뒤"뿐만 아니라 모든 위치에 :before 및 :after를 삽입할 수 있습니다.

Circle
• html

  rrreee

  css
rrreee

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

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