DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 《精通CSS》一個下拉菜單的例子
《精通CSS》一個下拉菜單的例子
編輯:CSS詳解     

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

  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>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved