CSS使用图片美化的漂亮菜单效果

本文实例讲述了CSS使用图片美化的漂亮菜单效果。分享给大家供大家参考。具体如下：

这里介绍的这个菜单很漂亮，因为每个菜单项都是调用的图片，感觉这个菜单有点华而不实，毕竟菜单太多会影响网页加载，一个菜单也没有必要为了好看而牺牲太多，根据你的需要使用哦。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/css-pic-cha-style-menu-demo/

具体代码如下：

复制代码@H_126_22@代码如下:!DOCTYPE htML PubLIC "-//W3C//DTD XHTML 1.0 TransITional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
html>
head>
meta http-equiv="Content-Type" content="text/html; charset=utf-8">
title> 用图片美化的CSS菜单/title>
style>
body{ background:#fff url(images/bkg_page.png); background-repeat:repeat-x; padding:0; margin:0; font-family:'Verdana'; font-Size:12px; color:#7f8991}
#header{ margin:108px 0 0 100px}
#header em{ display:none}
#header ul{ width:100%; float:left; padding:0; margin:0; list-style-type:none}
#header li{ float:left; padding:0; margin:0; display:inline}
#header li a{ display:block; height:46px}
#header li a.home{ background:url(images/menu_01.png) no-repeat left top; width:52px}
#header li a.homeActive{ background:url(images/menu_01.png) no-repeat left bottom; width:52px}
#header li a.gallery{ background:url(images/menu_02.png) no-repeat left top; width:60px}
#header li a.galleryActive{ background:url(images/menu_02.png) no-repeat left bottom; width:60px}
#header li a.resources{ background:url(images/menu_03.png) no-repeat left top; width:76px; margin:0; padding:0}
#header li a.resourcesActive{ background:url(images/menu_03.png) no-repeat left bottom; width:76px}
#header li a.submit{ background:url(images/menu_04.png) no-repeat left top; width:97px}
#header li a.submitActive{ background:url(images/menu_04.png) no-repeat left bottom; width:97px}
#header li a.feed{ background:url(images/menu_05.png) no-repeat left top; width:68px}
#header li a.feedActive{ background:url(images/menu_05.png) no-repeat left bottom; width:68px}
#header li a.about{ background:url(images/menu_06.png) no-repeat left top; width:52px}
#header li a.aboutActive{ background:url(images/menu_06.png) no-repeat left bottom; width:52px}
#header li a.blog{ background:url(images/menu_10.png) no-repeat left top; width:51px}
#header li a.bLOGActive{ background:url(images/menu_10.png) no-repeat left bottom; width:51px}
#header li a.contact{ background:url(images/menu_07.png) no-repeat left top; width:64px}
#header li a.contactActive{ background:url(images/menu_07.png) no-repeat left bottom; width:64px}
#header li a:hover{ background-position:left bottom}
/style>
/head>
body>
div id="header">
ul>
li> a class="homeActive" href="#"> em> home/em> /a> /li>
li> a class="gallery" href="#"> em> gallery entries/em> /a> /li>
li> a class="resources" href="#"> em> resources/em> /a> /li>
li> a class="submit" href="#"> em> submit a site/em> /a> /li>
li> a class="feed" href="#"> em> our feed/em> /a> /li>
li> a class="blog" href="#"> em> blog/em> /a> /li>
li> a class="about" href="#"> em> about/em> /a> /li>
li> a class="contact" href="#"> em> contact/em> /a> /li>
/ul>
/div>
/body>
/html>

希望本文所述对大家的css网页设计有所帮助。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！