详解:33案例(qq新闻)
核心之点: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>
详解:33案例(qq新闻)相关推荐
- Springboot 整合 Dubbo/ZooKeeper 详解 SOA 案例
摘要: 原创出处:www.bysocket.com 泥瓦匠BYSocket 希望转载,保留摘要,谢谢! "看看星空,会觉得自己很渺小,可能我们在宇宙中从来就是一个偶然.所以,无论什么事情,仔 ...
- EMD算法之Hilbert-Huang Transform原理详解和案例分析
目录 Hilbert-Huang Transform 希尔伯特-黄变换 Section I 人物简介 Section II Hilbert-Huang的应用领域 Section III Hilbert ...
- DL之ShuffleNetV2:ShuffleNetV2算法的简介(论文介绍)、架构详解、案例应用等配图集合之详细攻略
DL之ShuffleNetV2:ShuffleNetV2算法的简介(论文介绍).架构详解.案例应用等配图集合之详细攻略 目录 ShuffleNetV2算法的简介(论文介绍) 1.论文特点 2.基于硬件 ...
- DL之SqueezeNet:SqueezeNet算法的简介(论文介绍)、架构详解、案例应用等配图集合之详细攻略
DL之SqueezeNet:SqueezeNet算法的简介(论文介绍).架构详解.案例应用等配图集合之详细攻略 目录 SqueezeNet算法的简介(论文介绍) 1.轻量级的CNN架构优势 2.主要特 ...
- DL之DSSD:DSSD算法的简介(论文介绍)、架构详解、案例应用等配图集合之详细攻略
DL之DSSD:DSSD算法的简介(论文介绍).架构详解.案例应用等配图集合之详细攻略 相关文章 DL之DSSD:DSSD算法的简介(论文介绍).架构详解.案例应用等配图集合之详细攻略 DL之DSSD ...
- DL之DilatedConvolutions:Dilated Convolutions(膨胀卷积/扩张卷积)算法的简介(论文介绍)、架构详解、案例应用等配图集合之详细攻略
DL之DilatedConvolutions:Dilated Convolutions(膨胀卷积/扩张卷积)算法的简介(论文介绍).架构详解.案例应用等配图集合之详细攻略 目录 Dilated Con ...
- DL之ShuffleNet:ShuffleNet算法的简介(论文介绍)、架构详解、案例应用等配图集合之详细攻略
DL之ShuffleNet:ShuffleNet算法的简介(论文介绍).架构详解.案例应用等配图集合之详细攻略 相关文章 DL之ShuffleNet:ShuffleNet算法的简介(论文介绍).架构详 ...
- DL之MobileNetV2:MobileNetV2算法的简介(论文介绍)、架构详解、案例应用等配图集合之详细攻略
DL之MobileNet V2:MobileNet V2算法的简介(论文介绍).架构详解.案例应用等配图集合之详细攻略 目录 MobileNetV2算法的简介(论文介绍) MobileNet V2算法 ...
- DL之MobileNet:MobileNet算法的简介(论文介绍)、架构详解、案例应用等配图集合之详细攻略
DL之MobileNet:MobileNet算法的简介(论文介绍).架构详解.案例应用等配图集合之详细攻略 目录 MobileNet算法的简介(论文介绍) 1.研究背景 2.传统的模型轻量化常用的方法 ...
- DL之DenseNet:DenseNet算法的简介(论文介绍)、架构详解、案例应用等配图集合之详细攻略
DL之DenseNet:DenseNet算法的简介(论文介绍).架构详解.案例应用等配图集合之详细攻略 目录 DenseNet算法的简介(论文介绍) DenseNet算法的架构详解 3.DenseNe ...
最新文章
- incremental backup恢复错误一例
- iOS性能分析-Xcode Instruments Allocations 分析APP内存使用情况
- 一个“程序员的自我修养”是什么?
- python模块相互引用_python中如何相互引用两个包中的模块
- ssh 方式git clone 代码仓库
- 计算机硬盘格式分类,win7 下默认的硬盘分区表类型是MBR还是GUID ?-win7的硬盘格式,win7装win10硬盘格式调整...
- Android Studio 中Locat使用包名过滤无法显示的问题
- PS调出唯美冷色情侣婚纱写真照
- java dead store_jcip Java并发编程实战源码,这本书名为《 践》有些抹杀了它的价值,其中 Develop 238万源代码下载- www.pudn.com...
- Windows电脑垃圾的清理
- dell 730xd硬raid配置
- qt对excel的基本操作
- 异常处理·EF·准备命令定义时发生错误。有关详细信息,请参阅内部异常
- 淘宝淘口令解密,解析,转换接口,API对接
- 数据分析入门需要了解的统计学知识【持续更新】
- 基于STC15系列单片机课程中讲到的汇编指令(二)
- HTML 视频(Videos)播放
- 如何成为一名好的程序员[转]
- js 屏幕滚动到固定位置
- text pad java_错误:无法在Textpad 8中找到或加载主类