VISTA风格按钮菜单，量你会喜欢

2024-09-05 12:19:31

字体：大中小

来源：转载

供稿：网友

仿VISTA风格一样的按钮式菜单，鼠标滑过变色，要用到背景图片，运行时请自行下载。非常漂亮的一种风格，从老外网站扒下的，它还可以自适应宽度，菜单文字有多长，它就变多长！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>VISTA风格按钮菜单</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style type="text/css">.aerobuttonmenu{overflow: hidden;width: auto;background: #F7F7F7;border: 1px solid gray;padding: 4px 0;border-width: 1px 0;}* html .aerobuttonmenu{width: 100%;}.aerobuttonmenu a.aero{background: transparent url('/jscss/demoimg/200903/aeroleft.gif') no-repeat top left;display: block;float: left;font: bold 13px Verdana;line-height: 23px;height: 31px;padding-left: 10px;text-decoration: none;margin-right: 5px;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);opacity: 0.9;-moz-opacity: 0.9;}.aerobuttonmenu a.aero:link, .aerobuttonmenu a.aero:visited, .aerobuttonmenu a:active{color: white;}.aerobuttonmenu a.aero span{background: transparent url('/jscss/demoimg/200903/aeroright.gif') no-repeat top right;display: block;padding: 4px 10px 6px 0;}.aerobuttonmenu a.aero:hover{filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); opacity: 1;-moz-opacity: 0.99;}.aerobuttonmenu a.aero:hover span{color: yellow;}.black a.aero{background-image: url('/jscss/demoimg/200903/aeroleftblack.gif');}.black a.aero span{background-image: url('/jscss/demoimg/200903/aerorightblack.gif');}.aerobuttonmenu .rightsection{float: right;width: 100px;position: relative;top: 3px;padding-right: 5px;text-align: right;}.aerobuttonmenu .rightsection a{color: navy;}</style></head><body><h4>Aero Blue and Black Button Menus:</h4><div class="aerobuttonmenu"><span>jQuery</span> <span>CSS Examples</span> <span>ASP</span> <span>PHP</span> <span>JavaScript</span> </div><br /><div class="aerobuttonmenu black"><span>jQuery</span> <span>CSS Examples</span> <span>ASP</span> <span>PHP</span> <span>JavaScript</span> </div></body></html>

上一篇：带滑过标记的竖向排列CSS菜单

下一篇：固定在右侧的CSS导航菜单

学习交流

如何查找有故障的配件

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

热门图片

猜你喜欢的新闻

猜你喜欢的关注