博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

带个形象小图标的黑色水平CSS菜单

Posted on 2009-08-09 01:33  linFen  阅读(1622)  评论(0编辑  收藏  举报

演示效果截图

 带个形象小图标的黑色水平CSS菜单

用到的图片

 

CSS代码

body{background:#FFF;font-family:Verdana, Arial, Helvetica,
sans-serif;font-size:80%;color:#000;margin:0;vertical-align:top}
img{border:0;vertical-align:middle}
a:link{color:#00248A;text-decoration:none}
a:visited{color:#4b6bc6;text-decoration:none}
a:hover{color:#FFF;background-color:#2E6AB1}
#top{border-bottom:7px solid #3b3b3b;
background:#000 url(headerblackbackground.gif)
 repeat-x center top;}
#header{height:80px;vertical-align:bottom;margin-left:20px}
#header #tabs{float:left;margin-top:50px;height:32px}
.tabsheader{font-family:verdana,arial,Trebuchet MS,tahoma,arial,
verdana,tahoma,verdana,sans-serif;font-size:100%;color:#000;
clear:both;text-align:center}
.tabsheader ul{display:inline;list-style-type:none;margin:0;padding:0}
.tabsheader li{float:left}
.tabsheader a,.tabsheader a:visited{width:87px}
.tabsheader a.current:visited,.tabsheader a.current,
.tabsheader a.current:hover{width:84px;position:relative;float:left;
margin-right:2px;background:url(tabsdark.gif);color:#FFF;
padding-top:6px;height:24px}
.tabsheader a.current:visited img,.tabsheader a:hover img{}
.tabsheader a{width:84px;position:relative;float:left;margin-right:2px;
background-image:url(tabsdark.gif);background-position:-87px 0;
padding-top:8px;color:#dedede;height:24px}
.tabsheader a:visited{color:#dedede}
.tabsheader a img{}
.tabsheader a:hover{top:0;background-image:url(tabsdark.gif);
background-position:-175px 0;padding-top:6px;height:24px;color:#FFF;
background-color:transparent}
:link:focus,:visited:focus{-moz-outline:0}

HTML代码

<div id="top">
<div id="header">
<div id="tabs">
<div class="tabsheader" id="chromemenu">
<ul>
<li><a href="http://www.865171.cn">
<img src="images/movie_16.gif">&nbsp;Movies</a></li>
<li><a href="http://www.865171.cn">
<img src="images/tv_16.gif">&nbsp;TV</a></li>
<li><a href="http://www.865171.cn">
<img src="images/disc-media_16.gif">&nbsp;DVDs</a></li>
<li><a href="http://www.865171.cn">
<img src="images/history_16.gif">&nbsp;Books</a></li>
<li><a href="http://www.865171.cn">
<img src="images/music_16.gif">&nbsp;Music</a></li>
</ul>
</div>
</div>
</div>
</div>
<div style="padding-left:20px;">
<a href="http://www.865171.cn" target=_blank>
<h3>www.865171.cn</h3></a>
</div>