发表于: 2021-03-01 19:56:03

1 1043


今天完成的事情:完成了任务十五的第二个页面

明天计划的事情:完成任务十五

收获:

知道css有个content属性吗?有什么作用?有什么应用?

css有一个属性叫做content。content只能使用在:after和:before之中。它用于在元素之前或者元素之后加上一些内容

:before和:after的作用就是在指定的元素内容(而不是元素本身)之前或者之后插入一个包含content属性指定内容的行内元素.需要注意的是如果没有content属性,伪类元素将没有任何作用。但是可以指定content为空。

应用

1.生成文字

p::before {
    content"文字";
 }

2.通过attr()插入元素的属性值

a::after {
    contentattr(href);
 }
 
 <a href="#">此标签的href值是:</a>

3.清除浮动

.clearfix::after {
    content"";
    display: block;
    clear: both;
}

4.创建小图标

div::after {
    contenturl(logo.png);
}

5.计数器

ol {
    list-style-type:none;       
    counter-reset:sectioncounter;
}                      
 
ol li:before {
    content:"" counter(sectioncounter) ": "
    counter-increment:sectioncounter;
}
 
<ol>
     <li><img src="m1.jpg" width="128" height="96" /></li>
     <li><img src="m2.jpg" width="128" height="96" /></li>
</ol>

<ol>标签应用counter-reset属性,<li>标签应用counter-increment属性,值均为sectioncounter,再配合content属性,以及counter计数器就可以实现递增的效果了。


返回列表 返回列表
评论

    分享到