CSS实现的Vista风格菜单

2024-09-05 12:19:17

字体：大中小

来源：转载

供稿：网友

用纯CSS代码实现的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" xml:lang="en" lang="en"><head><title>VISTA菜单</title><meta http-equiv="Content-Type" content="text/html; charset=gbk" /><style type="text/css" />img{ border: 0pt; }#bottom_div{width: 520px;height: 150px;background-color: #b9d1ea;clear:both;}#vista_toolbar {float:left;font:normal 12px 'Trebuchet MS','Arial';margin:0;padding:0;}#vista_toolbar ul {background-image:url(/jscss/demoimg/200902/back.gif);background-repeat:repeat-x;float:left;line-height:32px;list-style:none;margin:0;padding:0 10px 0 10px;width:500px;}#vista_toolbar li {display:inline;padding:0;}#vista_toolbar a {color:#FFF; float:left;padding:0 3px 0 3px; text-decoration:none;}#vista_toolbar a span {display:block;float:none;padding:0 10px 0 7px;}#vista_toolbar a span img {border:none;margin:8px 4px 0 0;}#vista_toolbar a:hover{background: url(/jscss/demoimg/200902/left.png) no-repeat left center;}#vista_toolbar a:hover span {background:url(/jscss/demoimg/200902/right.png) no-repeat right center;}#vista_toolbar a.right {float:right; /* for help button - just add class "right" ->  </head><body><div></div><div id="vista_toolbar"><ul><li><span>主页</span></li><li><span>最新博文</span></li><li><span>我的音乐</span></li><li><span>我的日志</span></li><li><span>帮助</span></li></ul></div><div id="bottom_div"> 仿Vista菜单，实属不错！</div></body></html>

上一篇：自适应宽度的CSS圆角背景的菜单按钮

下一篇：鼠标放上弹出仿QQ下拉菜单的代码