Vista风格菜单，完全CSS实现

2024-09-05 12:19:50

字体：大中小

来源：转载

供稿：网友

非常漂亮的Vista风格菜单，完全是用CSS代码实现，每一个菜单项像一个按钮一样，感应鼠标滑过动作，切换背景色，漂亮无敌，用到了四张背景图片，请顺着代码地址自行下载。本菜单兼容性好，符合W3C标准，值得推荐。

<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Vista风格菜单</title><style type="text/css">.pro8 {padding:0 0 0 32px; margin:0; list-style:none; height:25px; background:#fff url(/jscss/demoimg/200905/pro_eight_back.gif); position:relative; border:1px solid #000; border-width:0 1px 1px 1px; border-bottom-color:#444;}.pro8 li {float:left;}.pro8 li a {display:block; float:left; height:25px; line-height:23px; background:url(/jscss/demoimg/200905/pro_eight_0.gif); color:#fff; text-decoration:none; font-size:11px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 12px; cursor:pointer;}.pro8 li a b {float:left; display:block; padding:0 12px 0 0; background:url(/jscss/demoimg/200905/pro_eight_0.gif) right top;}.pro8 li.current a {color:#fff; background:url(/jscss/demoimg/200905/pro_eight_2.gif);}.pro8 li.current a b {background:url(/jscss/demoimg/200905/pro_eight_2.gif) right top;}.pro8 li a:hover {color:#000; background:url(/jscss/demoimg/200905/pro_eight_1.gif);}.pro8 li a:hover b {background:url(/jscss/demoimg/200905/pro_eight_1.gif) right top;}.pro8 li.current a:hover {color:#fff; background:url(/jscss/demoimg/200905/pro_eight_2.gif); cursor:default;}.pro8 li.current a:hover b {background:url(/jscss/demoimg/200905/pro_eight_2.gif) right top;}</style></head><body><ul class="pro8"><li>首页</li><li>我的日记</li><li class="current">作品展</li><li>如何联系？</li><li>我是谁？</li><li>搜索</li></ul></body></html>

上一篇：模仿Windows颜色的竖向多级CSS菜单

下一篇：蓝绿背景切换的漂亮CSS菜单

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注