详解：33案例（qq新闻）

贵哥的编程之路

发布于 2020-10-28 11:39:52

2830

发布于 2020-10-28 11:39:52

核心之点：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>