像滑動門一樣的CSs菜單

2024-09-05 12:20:13

字體：大中小

來源：轉載

供稿：網友

很漂亮的像滑動門一樣的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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>漂亮滑動門</title><style>body {font-size:9pt;}.nav {margin:0 auto; text-align:center; font-weight:bold; border-bottom:3px solid #579cc6;}.nav a {display:inline-block; margin:0 -4px; height:25px; background:url(/jscss/demoimg/200907/bg-index.jpg) left bottom no-repeat; padding-left:15px; color:#666; text-decoration:none; cursor:pointer;}.nav a span {display:inline-block; height:25px; line-height:25px; background:url(/jscss/demoimg/200907/bg-index.jpg) right bottom no-repeat; padding-right:15px;}.nav a:hover {background:url(/jscss/demoimg/200907/bg-index.jpg) left top no-repeat; color:#FFF;}.nav a:hover span {background:url(/jscss/demoimg/200907/bg-index.jpg) right top no-repeat;}.nav a.set {background:url(/jscss/demoimg/200907/bg-index.jpg) left top no-repeat; color:#FFF; }.nav a.set span {background:url(/jscss/demoimg/200907/bg-index.jpg) right top no-repeat;}</style></head><body><div   id="iwvjtn8m0"   class="nav"><span>愛好者</span><span>網頁特效</span><span>特效分類</span><span>這個可以有</span><span>焦點娛樂</span><span>官方博客</span></div></body></html>

上一篇：新浪博客自適應寬度的CSS菜單

下一篇：CSS+Js豎向簡潔的折疊菜單