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:block; text-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文字縮略 文字超出變省略號
- 下一頁:css美化Div邊框的樣式實例
小編推薦
熱門推薦