網站上的菜單大部分都是由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,就可看到菜單效果啦,如下圖所示: