NEC学习 ---- 模块 - 带点文字链接列表

带点文字链接列表, 实现的效果是, 调整字体大小, 点的位置不会跟着变动.

HTML如下:

<div class="container"><div class="m-list2"><ul><li><i class="dot"></i><a href="#">带点文字链接列表，方点，颜色继承文字</a></li><li><i class="dot"></i><a href="#">带点文字链接</a></li><li><i class="dot"></i><a href="#">带点文字链接</a></li><li><i class="dot"></i><a href="#">带点文字链接</a></li><li><i class="dot"></i><a href="#">带点文字链接</a></li></ul></div>
</div>

CSS代码:

<style>.container {width:600px;margin:45px auto;}.m-list2 {padding-top:1px;font-size:14px;}.m-list2 ul{margin-top:-6px; // -6px 是怎么来的? 因为li的margin-top:5px, 且 .m-list2的padding-top为 1px 为了恢复到中间,ul的margin-top 正好需要设置-6px;}.m-list2 li {line-height:1.5;//设置数字, 此数字和当前字体尺寸相乘灵活设置行间距color:#777;position:relative;padding-left:10px;margin-top:5px;zoom:1;}.m-list2 li .dot{position:absolute;top:0.75em;left:0;width:0;height:0;overflow:hidden;border:2px solid;margin-top:-3px;}
</style>

关键点:

① li的line-height:1.5; //设置为数字表示, line-height和字体尺寸做乘积, 得到的值来设置行高, 此例中font-size:14px; 行高是14px*1.5= 21px;

② .dot(点)元素: top的为0.75em; //em是一个相对大小单位, 总是继承父类中设置的字体大小, 比如这个例子中的font-size:14px;所以这里的0.75em的top值就是10.5px;

观察①和②:

发现.dot元素的top值始终是在li的中间, 而dot自身也有大小: border:2px solid;(颜色继承父级)所以.dot元素的margin-top向上设置了-3px(四舍五入)就是这么来的.

转载于:https://www.cnblogs.com/Zell-Dinch/p/4547094.html

NEC学习 ---- 模块 - 带点文字链接列表相关推荐

0005 前端 Html 04 AutoFileName 图片的显示文字链接图片链接页面内链接列表加超链接的列表
以下为学习笔记,用来备忘.交流工具:Sublime Text 3 渲染:谷歌浏览器 AutoFileName工具的安装安装过程参见添加Emmet插件参考我上面安装Emmet插件的过程,基本一样. ...
php 滚动彩色文字,滚动文字特效大全 -★用彩色生成器加文字,图片加文字,带背景的链接滚动文字...
霍斯的滚动文字特效大全http://www.sudu8.cn/sudu8_article/87/471.html 带背景的链接滚动文字http://font.itbulo.com/ 代码如下: 对 ...
FFmpeg深度学习模块的历史、现状和计划
本文来自英特尔资深图形图像软件工程师郭叶军在LiveVideoStack线上分享的内容,详细介绍了FFmpeg中深度学习模块的历史.现状及未来计划,并针对深度学习模块总体架构与代码实践做详细解析. ...
小猪的Python学习之旅 —— 13.文字识别库pytesseract初体验
小猪的Python学习之旅 -- 13.文字识别库pytesseract初体验标签:Python 引言度过了短暂的春节假期,又要开始继续搬砖了,因为还处于节后综合征,各种散漫,不想看任何代码相关 ...
（私人收藏）[开发必备]HTML5最全快速查找离线手册（可查询可学习，带实例）...
[开发必备]HTML5最全快速查找离线手册(可查询可学习,带实例) HTML5最全快速查找离线手册:https://pan.baidu.com/s/19seE8TJQSx4IsWgXtKQS0A j9 ...
Python学习打卡【Task4】列表，字典和元组
目录一.学习知识点概要(review) 二.学习内容(record) 三.学习问题与解答(analysis) 四.学习思考与总结(summary) 一.学习知识点概要(review) ...
python模块捆绑器组件_让我们学习模块捆绑器如何工作，然后自己编写
python模块捆绑器组件 by Adam Kelly 通过亚当凯利让我们学习模块捆绑器如何工作,然后自己编写 (Let's learn how module bundlers work and t ...
周志华组最新论文提出“溯因学习”，受玛雅文字启发的神经逻辑机
假设你在踢足球,球来了,你把球传给队友,"传球"这一个动作,实际上涉及两种不同的思维过程. 首先,你需要意识到脚下有个球,相当于识别(感知):其次,你需要判断把球传给哪个队友,这是 ...
如何在JavaScript中实现链接列表
If you are learning data structures, a linked list is one data structure you should know. If you do ...

NEC学习 ---- 模块 - 带点文字链接列表

NEC学习 ---- 模块 - 带点文字链接列表相关推荐

最新文章

热门文章