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

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(四舍五入)就是这么来的.

NEC学习 ---- 模块 - 带点文字链接列表的更多相关文章

  1. NEC学习 ---- 模块 - 上图下文图文列表

    上图下文图文列表的效果如下图: 可以看到三个红色框中的三中"上图下文的图文列表"; 这里的代码其实没什么问题, 对于这种布局, 其实可以参考我上一篇介绍: NEC学习 ---- 模 ...

  2. NEC学习 ---- 模块 - 左图右文图文列表

    该模块效果图: 这个模块也是在开发中经常使用的一种: HTML代码: <div class="container"> <div class="m-lis ...

  3. NEC学习 ---- 模块 -文本圆角背景导航

    下图是效果图: 然后, 左右两边的圆角图片和背景图片如下 (因为截图工具的原因, 可能图片不是很清晰. 这个图片有4个部分, 分别是中间的背景图, 左右圆角以及栏目分隔白线) 思路: 利用inline ...

  4. NEC学习 ---- 模块 -水平文字链接列表

    HTML代码: <div class="container"> <div class="m-list1"> <ul class=& ...

  5. NEC学习 ---- 模块 -简易文字链接列表

    为了方便查看, 在最外面设置了一个粉色框. html代码: <div class="container"> <ul class="m-list" ...

  6. NEC学习 ---- 模块 - tab[含标题]

    简要介绍, 默认居左, Tab不定宽,  “标题”和“更多”可删, 扩展类可以自由组合, 依赖于reset.css(之前的模块以及布局都依赖这个css) 那么这个效果是怎么实现的呢? CSS代码: . ...

  7. NEC学习 ---- 模块 -多行式面包屑导航

    如上面形式面包屑的写法: HTML如下, <div class="m-crumb"> <ul class="f-cb"> <li& ...

  8. 微信公众平台回复链接可以直接访问,但不能是锚文字链接<a>标签

    最近在学习微信公众平台开发,由于编辑模式和开发模式不可同时开启,在开发模式下如果访客发送关键字过来暂时无法实现关键词自动回复,客服人员先用链接网址直接回复订阅用户,但请注意不能是文字链接,即<a ...

  9. (私人收藏)[开发必备]最全Java离线快速查找手册(可查询可学习,带实例)

    (私人收藏)[开发必备]最全Java离线快速查找手册(可查询可学习,带实例) https://pan.baidu.com/s/1L54VuFwCdKVnQGVc8vD1TQnwmj java手册 Ja ...

随机推荐

  1. Lost Cows

    Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 9669   Accepted: 6228 Description N (2 ...

  2. Jquery和JS获取ul中li标签

    js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElemen ...

  3. 自定义UICollectionViewLayout之瀑布流

    目标效果 因为系统给我们提供的 UICollectionViewFlowLayout 布局类不能实现瀑布流的效果,如果我们想实现 瀑布流 的效果,需要自定义一个 UICollectionViewLay ...

  4. XIII Open Cup named after E.V. Pankratiev. GP of Saratov

    A. Box Game 注意到局面总数不超过$50000$,而且每次操作都会改变石子的奇偶性,因此按奇偶可以将状态建成二分图,然后求出最大匹配. 如果状态数是偶数,那么先手必胜,策略就是每次走匹配边, ...

  5. Colorado Potato Beetle(CF的某道) & 鬼畜宽搜

    题意: 一个人在一张大图上走,给你路径与起点,求他走出的矩形面积并.(大概这个意思自行百度标题... SOL: 与其说这是一道图论题不如说是一道生动活泼的STL-vector教学.... 离散化宽搜, ...

  6. 封装一个通用递归算法,使用TreeIterator和TreeMap来简化你的开发工作。

    在实际工作中,你肯定会经常的对树进行遍历,并在树和集合之间相互转换,你会频繁的使用递归. 事实上,这些算法在逻辑上都是一样的,因此可以抽象出一个通用的算法来简化工作. 在这篇文章里,我向你介绍,我封装 ...

  7. 不需要了解任何底层知识,就可以汉化!Let`s go!!!

    汉化?莫要被这两个字吓到. 其实你也可以汉化,跟着我的步骤来,你也可以进行汉化,Let`s go!!!(大鸟飘过) 这里汉化的是微软企业类库的配置管理工具EntLibConfig.exe.当然,这里的 ...

  8. IP地址分类整理

    什么是IP地址? IP地址就是计算机在网络中地址. IP地址有多少个? IP地址范围是:0.0.0.0~225.225.225.255,这只是人为了方便记录才转为十进制的,ip地址实际是一个32位地址 ...

  9. git两种合并方法 比较merge和rebase

    18:01 2015/11/18git两种合并方法 比较merge和rebase其实很简单,就是合并后每个commit提交的id记录的顺序而已注意:重要的是如果公司用了grrit,grrit不允许用m ...

  10. static的本质

    通过反编译发现,static的本质是abstract sealed.因此,无法继承System.Math类,因为它是static的.