ばくうめぐん


特色导航菜单(蓝,深蓝相间)

2010-06-23 22:31Update
TAGS: 菜单

mo

特点:蓝,深蓝相间

点击下载:life.zip
效果图:



一:相关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
  • 11 - (2010-06-23 22:31)
 
Copyright ©2006-2010 lifevv.com. All Rights Reserved
POWERED BY @pmplat.syboos.com