网鹰

一款纯CSS定义的菜单，无需任何图片，在IE6,Firefox 1.5 Netscape 7,Maxthon,Tecent中均运行良好。

css文件如下：

UL#topnav {
CLEAR: both;
HEIGHT: 2em;
padding: 0px;
font-weight: bold;
text-transform: capitalize;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 20px;
margin-left: 0px;
}
UL#topnav LI {
LIST-STYLE-POSITION: inside;
FLOAT: left;
MARGIN-RIGHT: 20px;
LIST-STYLE-TYPE: none;
padding: 2px;
margin-left: 0px;
}
UL#topnav LI.b5 {
MARGIN: 0px
}
UL#topnav LI A {
DISPLAY: block; WIDTH: 154px; COLOR: #fff; LINE-HEIGHT: 1.6em; TEXT-ALIGN: center; TEXT-DECORATION: none
}

UL#topnav LI A:hover {
BACKGROUND-COLOR: #fff
}
UL#topnav LI.b1 A:hover {
COLOR: #71b50a
}
UL#topnav LI.b2 A:hover {
COLOR: #d81630
}
UL#topnav LI.b3 A:hover {
COLOR: #e18329
}
UL#topnav LI.b4 A:hover {
COLOR: #004883
}
UL#topnav LI.b5 A:hover {
COLOR: #099
}
.b1 {
BACKGROUND-COLOR: #71b50a
}
.b2 {
BACKGROUND-COLOR: #d81630
}
.b3 {
BACKGROUND-COLOR: #e18329
}
.b4 {
BACKGROUND-COLOR: #004883
}
.b5 {
BACKGROUND-COLOR: #099
}

html文件为：

<ul id=”topnav”>
<li class=”b1″><a href=”#”>Home</a></li>
<li class=”b2″><a href=”#”>Page</a></li>
<li class=”b3″><a href=”#”>Page</a></li>
<li class=”b4″><a href=”#”>Page</a></li>
<li class=”b5″><a href=#”>Page</a> </li>
</ul>

菜单的效果如下：

• CSS菜单
• CSS菜单
• CSS菜单
• CSS菜单
• CSS菜单

[tags]CSS menu,CSS菜单[/tags]

Technorati : View blog reactions
Posted at : May 29th, 2006 - 6:36 pm
Filed under : 网页设计
Navigate : Previous post / Next post

相关的帖子:

CSS菜单的好处

加拿大驻香港领事馆移民申请时间表