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

时间:2023-06-16 19:49:56

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:;
}
.m-list2 li .dot{
position:absolute;
top:0.75em;
left:;width:;height:;
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(四舍五入)就是这么来的.