CSS를 사용하여 텍스트 주위에 콘텐츠 삽입
- 巴扎黑원래의
- 2017-07-18 17:23:111230검색
텍스트 주위에 콘텐츠를 삽입하는 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- 절대, 수직, 여백, 줄 높이 및 기타 속성을 통해 텍스트와 기호 간의 위치 관계를 실현합니다.
- 실습
- 해결책 1: 텍스트 앞이나 뒤에 태그를 추가하여 HTML 구조를 변경합니다.
- CSS 속성을 사용하여 그릴 수 있는 그래픽은 CSS 속성을 사용합니다. 그렇지 않으면 배경 속성을 사용하여 배경 이미지를 표시합니다.
<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>
.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은 줄과 텍스트의 수직 중심을 달성합니다.
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
위 내용은 CSS를 사용하여 텍스트 주위에 콘텐츠 삽입의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!