特色导航菜单(蓝,深蓝相间)
2010-06-23 22:31Update
TAGS: 菜单
特点:蓝,深蓝相间
点击下载:life.zip
效果图:

一:相关css代码:
二:相关html代码:
效果图:
一:相关css代码:
<style type="text/css" media="all">
#dolphincontainer{
position:relative;
height:56px;
color:#E0E0E0;
background:#143D55;
width:100%;
font-family:Helvetica,Arial,Verdana,sans-serif;
}
#dolphinnav{
position:relative;
height:33px;
font-size:12px;
text-transform:uppercase;
font-weight:bold;
background:#fff url(images/dolphin_bg.gif) repeat-x bottom left;
padding:0 0 0 20px;
}
#dolphinnav ul{
margin:0;
padding:0;
list-style-type:none;
width:auto;
float:left;
}
#dolphinnav ul li{
display:block;
float:left;
margin:0 1px;
}
#dolphinnav ul li a{
display:block;
float:left;
color:#EAF3F8;
text-decoration:none;
padding:0 0 0 20px;
height:33px;
}
#dolphinnav ul li a span{
padding:12px 20px 0 0;
height:21px;
float:left;}
#dolphinnav ul li a:hover{
color:#fff;
background:transparent url(images/dolphin_bg-OVER.gif) repeat-x bottom left;
}
#dolphinnav ul li a:hover span{
display:block;
width:auto;
cursor:pointer;}
#dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{
color:#fff;
background:#1D6893 url(images/dolphin_left-ON.gif) no-repeat top left;
line-height:275%;
}
#dolphinnav ul li a.current span{
display:block;
padding:0 20px 0 0;
width:auto;
background:#1D6893 url(images/dolphin_right-ON.gif) no-repeat top right;
height:33px;}
</style>
二:相关html代码:
<div id="dolphincontainer"> <div id="dolphinnav"> <ul> <li><a href="" title=""><span>首页</span></a></li> <li><a href="" title="" class="current"><span>搜索</span></a></li> <li><a href="" title=""><span>个人空间</span></a></li> <li><a href="" title=""><span>新闻记事</span></a></li> <li><a href="" title=""><span>新手上路</span></a></li> </ul> </div> </div>
- Relative Articles
- 特色导航菜单(红,篮,紫,绿) - (2010-06-23 22:31)
- 特色菜单(竖向) - (2010-06-23 22:31)
- 特色导航菜单(扣状) - (2010-06-23 22:31)
- 具有特色的导航菜单 - (2010-06-23 22:31)
- 11 - (2010-06-23 22:31)