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   class="iwvjtn8m0"   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   class="iwvjtn8m0"   id="bottom_div"> 仿Vista菜單，實屬不錯！</div></body></html>

上一篇：自適應寬度的CSS圓角背景的菜單按鈕

下一篇：鼠標放上彈出仿QQ下拉菜單的代碼