核心之点:counter:是css计数器,只能跟content属性在一起使用的时候才起作用,而content属性专用在before/after伪元素上
核心之点:我举个例子把,好吧
<style>
.box{width:300px; height:200px; background:#000; color:#fff; padding:30px;}
p{font-size:20px;counter-reset:count 4;}
p:after{
content:counter(count);
}
</style>
<div class="box">
<p>3的后面是</p>
</div>
如果p只有一个的话,就可以设counter-reset: count;在p里面,如果很多的p的话,那不能了,因为设的话,就代表一次设完就具有重复性了呀(注意点)
问题:12345678910那里是用什么代码做的呀,
好,这位同学你问到核心点了,很好
counter-reset: count;
counter-increment: count 1;
content:counter(count);
这三句代码修饰的呀,
同学们,你们知道怎么使文字垂直水平居中吗?
我知道我知道,用两句代码搞定,
height: 20px;
line-height: 20px;
text-align: center;三步搞定
那同学们,你们知道怎么玩margin吗?我知道我知道,那好,陈业贵同学你来回答一下
margin:40px;同学们知道是什么意思吗?代表上下左右都40px距离,
老师那怎么证明呢?好同学们,我来为你们证明一下
算了·,大家还是看我的margin加深理解文章把,那里面有哈哈哈哈
text-indent: 15px;什么意思?应该注意什么呢老是
缩进15px,距离所在的父级缩进的哈
老是,那转换行级为块级怎么做?
display: block;
同学们:老是真棒,
老师;就哈哈哈
overflow: hidden;
text-overflow: ellipsis;
这意思在详解:32哈,我懒得解释解释过的内容哈
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
这三句话配合使用的哈,具体作用看详解32
完毕,再见兄弟们。
剩下的垃圾交给你们了,拜拜,我得去写详解34了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<style type="text/css">
body{
font:12px/1.5 'Hiragino Sans GB','\5FAE\8F6F\96C5\9ED1',tahoma,arial,sans-serif;
color:#222;
}
.news-list{
width: 300px;
margin:100px;
counter-reset: count;
/*border:1px solid red;*/
}
.hot-title{
height:40px;
}
.hot-title h2{
border-left:4px solid #ec5353;
height: 20px;
line-height: 20px;
margin-top: 10px;
text-indent: 15px;
}
.news-list .hot-news li{
margin:10px 0;
}
.hot-news li a{
display: block;
height: 30px;
font-size:14px;
color:#404040;
/*border:1px solid pink;*/
white-space: nowrap;
line-height: 30px;
overflow: hidden;
text-overflow: ellipsis;
}
.hot-news li:before{
counter-increment: count 1;
content:counter(count);
float:left;
width: 15px;
height: 15px;
background-color: #ec5353;
line-height: 15px;
text-align: center;
margin-top:7px;
margin-right:15px;
margin-left:5px;
}
</style>
</head>
<body>
<div class="news-list">
<div class="hot-title"><h2>热度排行</h2></div>
<div class='hot-news'>
<ul>
<li><a href="#">日本为“自杀式攻击”申遗遭质疑:美化战争</a></li>
<li><a href="#">日本为“自杀式攻击”申遗遭质疑:美化战争</a></li>
<li><a href="#">日本为“自杀式攻击”申遗遭质疑:美化战争</a></li>
<li><a href="#">日本为“自杀式攻击”申遗遭质疑:美化战争</a></li>
<li><a href="#">日本为“自杀式攻击”申遗遭质疑:美化战争</a></li>
<li><a href="#">日本为“自杀式攻击”申遗遭质疑:美化战争</a></li>
<li><a href="#">日本为“自杀式攻击”申遗遭质疑:美化战争</a></li>
<li><a href="#">日本为“自杀式攻击”申遗遭质疑:美化战争</a></li>
<li><a href="#">日本为“自杀式攻击”申遗遭质疑:美化战争</a></li>
<li><a href="#">日本为“自杀式攻击”申遗遭质疑:美化战争</a></li>
</ul>
</div>
</div>
</body>
</html>