像滑动门一样的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 class="nav"><span>爱好者</span><span>网页特效</span><span>特效分类</span><span>这个可以有</span><span>焦点娱乐</span><span>官方博客</span></div></body></html>

上一篇：新浪博客自适应宽度的CSS菜单

下一篇：CSS+Js竖向简洁的折叠菜单