原文：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 推薦指數：
相關推薦
下划線css
...
奇妙的CSS3—導航欄下划線跟隨效果
先來看一下效果： 1、基本效果就是這樣的 ，鼠標懸停，下划線划入。鼠標離開，下划線划出 2、下划線的划入是有方向的，從左側划入懸停，下划線由左向右伸長。從右側划入，下划線由又往左伸長 實現思路 1、導航是由ul+li組成的，在這里顯然li 的寬度是不固定 ...
JS滑動下划線導航菜單實現原理
效果如下：http://campus.51job.com/test/zengxl/js html: css： js: ...
實現導航欄下划線跟隨效果
滑動（其實也可以用偽類元素實現，不過效果不夠好） 再根據左側導航的寬度總和，計算出下划線左移的距離 ...
用CSS下划線距離
但在我在CSS中新加了TEXT-DECORATION: underline; 后發現下划線離文本太近了，很難看。 代碼一： 代碼二： 代碼三： ...
CSS樣式下划線
樣式之文字下划線 第一 text-decoration: underline; 缺點是不好修改顏色 不要修改下划線的位置，優點就是一行代碼解決 可以使用line-height: 20px; 也能調整位置; 第二種更全面 使用span標簽而且不會變形 ...