藍色背景平滑的圓角形CSS菜單欄

2024-09-05 12:20:08

字體：大中小

來源：轉載

供稿：網友

藍色背景平滑的圓角形CSS菜單欄，有針對火狐和IE的CSS定義，因此兼容性方面做的比較好，調用了兩張圖片，整體感覺還不錯。

<!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>純CSS橫向導航條 - 菜單劇中、帶陰影</title><style type="text/css">.images {background:#c00; width:20px; padding:1px;}#nav ul {margin:0 auto; padding:0; list-style:none; display:table; white-space:nowrap; font-family: arial, verdana, sans-serif; font-size:11px;}#nav li {display:table-cell; margin:0; padding:0;}#nav a {float:left; color:#000; background: #ccc url(/jscss/demoimg/200907/top_left.gif) no-repeat left top; margin:0 2px 0 0; padding:0 0 0 2px; text-decoration:none; letter-spacing:1px;}#nav a b {float:left; display:block; background:transparent url(/jscss/demoimg/200907/top_right.gif) no-repeat right top; padding:5px 16px 5px 12px;}#nav a:hover {background: #3a73ba url(/jscss/demoimg/200907/top_left.gif) no-repeat left top; color:#fff; cursor:pointer;} #nav .current a {background: #3a73ba} #nav {padding:2px 0 10px 0; background:#fff;} </style></head><body><div   class="iwvjtn8m0"   id="nav"><ul><li><b>網站首頁</b></li><li id="iwvjtn8m0"    class="current"><b>產品列表</b></li><li><b>客戶服務</b></li><li><b>成功案例</b></li><li><b>聯系我們</b></li><li><b>網站地圖</b></li></ul></div></body></html>

上一篇：CSS黑白變成彩色圖片的塊狀導航

下一篇：經典的藍色豎排CSS網站菜單