蓝紫色背景的漂亮CSS菜单代码
代码简介:
鼠标滑过更换背景的CSS菜单,蓝色与绿色结合,完美的色调搭配,相信看了后不会让你失望。
代码内容:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>蓝紫色背景的漂亮CSS菜单代码_网页代码站(www.webdm.cn)</title> <style type="text/css"> .menu4 {padding:0 0 0 1em; margin:0; list-style:none; height:35px; background:url(http://www.webdm.cn/images/20090917/pro_four0.gif);} .menu4 li {float:left;} .menu4 li a {display:block; float:left; height:35px; line-height:33px; color:#aaa; text-decoration:none; font-family:arial, verdana, sans-serif; text-align:center; padding:0 0 0 14px; cursor:pointer; font-size:11px;} .menu4 li a b {float:left; display:block; padding:0 28px 0 14px;} .menu4 li.current a {color:#fff; background:url(http://www.webdm.cn/images/20090917/pro_four2.gif);} .menu4 li.current a b {background:url(http://www.webdm.cn/images/20090917/pro_four2.gif) no-repeat right top;} .menu4 li a:hover {color:#fff; background: url(http://www.webdm.cn/images/20090917/pro_four1.gif);} .menu4 li a:hover b {background:url(http://www.webdm.cn/images/20090917/pro_four1.gif) no-repeat right top;} .menu4 li.current a:hover {color:#fff; background: url(http://www.webdm.cn/images/20090917/pro_four2.gif); cursor:default;} .menu4 li.current a:hover b {background:url(http://www.webdm.cn/images/20090917/pro_four2.gif) no-repeat right top;} </style> </head> <body> <ul class="menu4"> <li><a href="http://www.webdm.cn"><b>网页代码站</b></a></li> <li><a href="/"><b>更新日志</b></a></li> <li class="current"><a href="/"><b>热点排行</b></a></li> <li><a href="/"><b>给我留言</b></a></li> <li><a href="http://www.webdm.cn"><b>我是谁?</b></a></li> <li><a href="/"><b>欢迎合作</b></a></li> </ul> </body> </html> <br> <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
代码来自:http://www.webdm.cn/webcode/84bc8716-316e-4074-8238-a20952529e64.html