原文：CSS导航下划线实现
在做页面的时候发现页面导航栏有一个很棒的效果。具体的效果就是，当鼠标移到一个导航栏时，导航栏下方会缓慢出现一条线。 当用ui内联的方式实现普通的导航后，在html中的li添加一个class用来控制下划线的移动。 html部分： lt div class top gt lt ul gt lt li gt 首页 lt li gt lt li gt 最新活动 lt li gt lt li gt 项目介 ...
2016-10-13 23:29 0 4096 推荐指数：
相关推荐
...
先来看一下效果： 1、基本效果就是这样的 ，鼠标悬停，下划线划入。鼠标离开，下划线划出 2、下划线的划入是有方向的，从左侧划入悬停，下划线由左向右伸长。从右侧划入，下划线由又往左伸长 实现思路 1、导航是由ul+li组成的，在这里显然li 的宽度是不固定 ...
效果如下：http://campus.51job.com/test/zengxl/js html: css： js: ...
滑动（其实也可以用伪类元素实现，不过效果不够好） 再根据左侧导航的宽度总和，计算出下划线左移的距离 ...
但在我在CSS中新加了TEXT-DECORATION: underline; 后发现下划线离文本太近了，很难看。 代码一： 代码二： 代码三： ...
样式之文字下划线 第一 text-decoration: underline; 缺点是不好修改颜色 不要修改下划线的位置，优点就是一行代码解决 可以使用line-height: 20px; 也能调整位置; 第二种更全面 使用span标签而且不会变形 ...