变幻菜单效果：
当鼠标移动到菜单上相应位置时，该位置的中文变成英文。
主要使用了css来控制样式。
代码如下
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>变幻菜单</title>
5 <meta charset="utf-8">
6 <style type="text/css">
7 .top_nav{
8 font-size:12px;
9 font-weight:bold;
10 list-style-type:none;
11 border-bottom:8px solid red;
12 overflow:auto;
13 }
14
15 .top_nav li{
16 float:left;
17 margin-right:1px;
18 }
19
20 .top_nav li a{
21 text-decoration:none;
22 display:block;
23 line-height:20px;
24 width:80px;
25 color:#666;
26 background:#ddd;
27 text-align:center;
28 }
29
30 .top_nav a span{
31 display:none;
32 }
33
34 .top_nav li a:hover span{
35 display:block;
36 }
37
38 .top_nav li a:hover{
39 margin-top:-20px;
40 background:red;
41 color:#fff;
42
43 }
44
45
46 </style>
47 </head>
48 <body>
49 <div>
50 <ul class="top_nav">
51 <li><a href="#">首页<span>Home</span></a></li>
52 <li><a href="#">前端乱煮<span>Front</span></a></li>
53 <li><a href="#">阳光小厨<span>Kichen</span></a></li>
54 <li><a href="#">光影天地<span>Photo</span></a></li>
55 <li><a href="#">事务大厅<span>Room</span></a></li>
56 </ul>
57 </div>
58 </body>
59 </html>
主要使用的小技巧有：
1 如果将英文和中文分别放在两个链接里会很麻烦，所以这里将所有的英文放在了span标签里面，这样可以统一控制。
2 当鼠标移到相应位置时中文消失，英文显示，则是利用了margin-top属性，让它的值为-20px，恰好等于a标签的行高，这样中文就从当前位置消失，相应的，下方的英文就出现了。
3 当给菜单设置下边框时，会发现边框并未出现在下边，而是偏上很多，这是因为受到了浮动影响，容器并不能完全包裹浮动元素，所以应该在加上overflow：auto;
时间： 2024-07-31 22:02:41