纯CSS建立导航菜单之一

最新推荐文章于 2022-11-26 13:49:47 发布

宵蓝

最新推荐文章于 2022-11-26 13:49:47 发布

阅读量92

点赞数

原文链接：http://www.cnblogs.com/orange-ven/p/4664557.html

版权

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>demo</title>
 5         <meta charset="UTF-8" />
 6         <style type="text/css">
 7             ul#navlist{
 8                 list-style-type:none;
 9             }
10             ul#navlist li{
11                 display:inline;
12             }
13             a{
14                 text-decoration:none;
15                 float:left;
16                 padding:10px;
17                 background-color:#2175bc;
18                 color:#FFF;
19                 
20             }
21             ul#navlist a:hover{
22                 background-color:#2586d7;
23                 margin-top:-2px;
24                 padding-bottom:12px;
25             }
26         </style>
27     </head>
28     <body>
29         <ul id="navlist">
30             <li><a href="#">HOME</a></li>
31             <li><a href="#">ARCHIVE</a></li>
32             <li><a href="#">CONTACT</a></li>
33         </ul>
34     </body>
35 </html>

这段代码最重要的部分便是:hover了，margin-top设置负值，使得元素位置向上移动，padding-bottom的设置则有两个方面的原因：一是填充掉底部空白的部分，二是使用padding使得填充部分可以为热点区域。

这种导航菜单可以改动:hover的padding-bottom的数值，如10px;\14px;，前者使得菜单有拉升感觉，后者则有向z的拉升突出感，如果加上box-shadow，应该会更好。

demo

转载于:https://www.cnblogs.com/orange-ven/p/4664557.html

宵蓝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯CSS建立导航菜单之一

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>demo</title> 5 <meta charset="UTF-8" /> 6 <style type="text/css"> 7 ...
复制链接

扫一扫