這個例子是下拉菜單的,我進行了一點點改動,原理的確很簡單,但是作者的代碼層次感很清楚,值得學習;另外一點,作者在交互過程中的顏色變化,甚至精確到邊框線之間的變化,雖然從旁觀者的角度看基本上看不出來這個有什麼變化,但是這種細致入微的思考和設計是值得學習和思考的,所謂細微之處方見技藝是否成熟,我覺得這是有道理的!不說了,上代碼:
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>