DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS綠色導航菜單制作實例
CSS綠色導航菜單制作實例
編輯:CSS詳解     

網站上的菜單大部分都是由CSS來實現的,不管是帶動畫效果,或是不帶動畫效果,不管是一級菜單或是多級菜單,不管是橫向菜單,也不管是豎向菜單,幾乎都與CSS關系密切。現在用CSS代碼實戰一款簡潔的綠色導航菜單,是一個基本型菜單,沒有使用jQuery,也沒有加入動畫效果,目的是讓CSS新手學會如何制作一個簡單的CSS菜單。

先來帖CSS菜單的代碼,為了便於理解,這裡在關鍵的地方都加入了注釋。

01 *{margin:0;padding:0;font:18px "微軟雅黑";}/*設置網頁邊距,一般為0,根據自己需要設定,設置字體為18px的微軟雅黑*/ 02 ul{list-style:none;}/*取消列表前默認的標號*/ 03 a{display:blocktext-align:center;} 04 a:link,a:visited,a:hover{text-decoration:none;} 05 a:link{color:white;} 06 a:visited{color:#F69;} 07 #wrapper{width:960px;margin:10px auto;} 08 #nav{height:28px;background:green;/*定義菜單高度為28像素,寬度不設,也就是自適應,背景色為綠色*/} 09 #nav ul{margin-left:100px;/*定義菜單列表左側空余100像素,這個可根據自己需要定義,也可以不定義*/} 10 #nav ul li{ 11 float:left;/*定義菜單項中的每一項都是左浮動,這樣後面的菜單項會自動跟在前一個菜單的後面,如果不設置,菜單是豎向排列的*/ 12 width:100px;/*每個菜單項的寬度為100像素*/ 13 line-height:30px;/*菜單行高30像素*/ 14 font-weight:bold;/*字體加粗*/ 15 } 16 #nav ul li a:hover{ 17 background:lightgreen;/*鼠標移上後,該菜單背景變為淺綠色,也可以寫成顏色值*/ 18 color:#000;/*鼠標移上菜單後的菜單文字顏色,可自設*/ 19 }

CSS代碼寫好了,先保存為menu.css文件,下面要引入這個文件,將CSS應用到對像上,下面就是對網頁上菜單對象的定義:

01 <Html XMLns="http://www.w3.org/1999/xHtml"> 02 <head> 03 <meta http-equiv="Content-Type" content="text/Html; charset=utf-8" /> 04 <title>一個綠色菜單制作實例</title> 05 <!--下面是引入上面的CSS文件,上述CSS代碼可保存為css.CSS文件--> 06 <link href="css/menu.CSS" rel="stylesheet" type="text/CSS" /> 07 </head> 08 <body> 09 <div id="wrapper"> 10     <div id="nav"> 11         <ul> 12             <li class="home"><a href="">首頁</a></li> 13             <li class="home"><a href="">文章</a></li> 14             <li class="home"><a href="">圖片</a></li> 15             <li class="home"><a href="">音樂</a></li> 16             <li class="home"><a href="">視頻</a></li> 17             </ul> 18        </div> 19 </div> 20 </body> 21 </Html>

 好了,將上述頁面保存為menu.html,與menu.CSS文件放在一起,雙擊運行menu.Html,就可看到菜單效果啦,如下圖所示:

CSS菜單制作實例最終效果

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