这个例子是下拉菜单的，我进行了一点点改动，原理的确很简单，但是作者的代码层次感很清楚，值得学习；另外一点，作者在交互过程中的颜色变化，甚至精确到边框线之间的变化，虽然从旁观者的角度看基本上看不出来这个有什么变化，但是这种细致入微的思考和设计是值得学习和思考的，所谓细微之处方见技艺是否成熟，我觉得这是有道理的！不说了，上代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>滑动门航条</title>
6 <style type="text/css">
7 *{margin:30 0;padding: 0;list-style: none;}
8 ul.main,ul.main ul{
9 float:left;
10 border:1px solid #486B02;
11 background-color:#8BD400;
12 }
13 ul.main li{
14 float:left;
15 width:120px;
16 height:30px;
17 line-height:30px;
18 text-align:center;
19 }
20 ul.main li ul{
21 width:120px;
22 position:absolute;left:-999em;
23 }
24 ul.main li:hover ul{
25 left:auto;//AUTO时它会自动悬浮在下方
26 }
27 ul.main a{
28 display:block;
29 color:#2B3F00;
30 border-left:1px solid #E4FFD3;
31 border-right:1px solid #486B02;
32 text-decoration:none;
33 }
34 ul.main li li a{
35 border-top:1px solid #E4FFD3;
36 border-bottom:1px solid #486B02;
37 border-left:0;
38 border-right:0;
39 }
40 ul.main li:last-child a{
41 border-bottom:0;
42 border-right:0;
43 }
44 ul a:hover,ul a:focus{
45 color:#E4FFD3;
46 background-color:#6DA203;
47 }
48 </style>
49 </head>
50 <body>
51 <ul class="main">
52 <li><a href="#" class="selected">首页</a></li>
53 <li><a href="#">教学</a>
54 <ul>
55 <li><a href="#">本科生教学</a></li>
56 <li><a href="#">研究生教学</a></li>
57 <li><a href="#">中小学教学</a></li>
58 <li><a href="#">远程教育</a></li>
59 </ul>
60 </li>
61 <li><a href="#">科研</a>
62 <ul>
63 <li><a href="#">论文发表</a></li>
64 <li><a href="#">实验室</a></li>
65 <li><a href="#">产品展示</a></li>
66 </ul>
67 </li>
68 <li><a href="#">后勤</a>
69 <ul>
70 <li><a href="#">规章制度</a></li>
71 <li><a href="#">资料下载</a></li>
72 <li><a href="#">设施开放时间</a></li>
73 <li><a href="#">通知公告</a></li>
74 </ul>
75 </li>
76 <li><a href="#">安全保障</a>
77 <ul>
78 <li><a href="#">保卫处</a></li>
79 <li><a href="#">网上报警</a></li>
80 <li><a href="#">案件公示</a></li>
81 </ul>
82 </li>
83 <li><a href="#">关于我们</a>
84 <ul>
85 <li><a href="#">学校简介</a></li>
86 <li><a href="#">校歌校徽</a></li>
87 <li><a href="#">校内导航</a></li>
88 <li><a href="#">学校历史</a></li>
89 <li><a href="#">学校荣誉</a></li>
90 </ul>
91 </li>
92 <li><a href="#">联系我们</a>
93 <ul>
94 <li><a href="#">写邮件</a></li>
95 <li><a href="#">联系电话</a></li>
96 <li><a href="#">校区地址</a></li>
97 </ul>
98 </li>
99 </ul>
100 </body>
101 </html>
时间： 2024-12-28 08:40:10