深灰色大按钮式的CSS导航条

2024-09-05 12:19:52

字体：大中小

来源：转载

供稿：网友

深灰色大按钮式的CSS导航条，这是在一组老外发布的菜单中找出来的，效果不错，鼠标移过去图片会高底变化，但用了不少的背景图片，不过真正用的时候你只用第一次载入这些图片，以后只添加菜单、删除菜单都方便的，它是完全CSS实现的菜单，兼容性非常好。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><title>CSS菜单</title><style type="text/css">#pro11 ul {margin:0 auto; padding:0; list-style:none; white-space:nowrap; list-style:none; height:35px; position:relative; background:#fff; font-size:11px;}#pro11 li {margin:0 1px 0 0; padding:0; float:left;}#pro11 li a {display:block; float:left; height:35px; line-height:20px; color:#ddd; text-decoration:none; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 10px; cursor:pointer; background:url(/jscss/demoimg/200905/pro_11_0a.gif) no-repeat;}#pro11 li a b {float:left; display:block; padding:0 25px 15px 15px; background:url(/jscss/demoimg/200905/pro_11_0b.gif) no-repeat right top;}#pro11 li.current a {color:#fff; background:url(/jscss/demoimg/200905/pro_11_2a.gif) no-repeat; line-height:23px;}#pro11 li.current a b {background:url(/jscss/demoimg/200905/pro_11_2b.gif) no-repeat right top; padding-bottom:12px;}#pro11 li a:hover {color:#fff; background: url(/jscss/demoimg/200905/pro_11_1a.gif) no-repeat; line-height:23px;}#pro11 li a:hover b {background:url(/jscss/demoimg/200905/pro_11_1b.gif) no-repeat right top; padding-bottom:12px;}#pro11 li.current a:hover {color:#fff; background: url(/jscss/demoimg/200905/pro_11_2a.gif) no-repeat; cursor:default;}#pro11 li.current a:hover b {background:url(/jscss/demoimg/200905/pro_11_2b.gif) no-repeat right top;}</style></head><body><div id="pro11"><ul><li><b>Index</b></li><li><b>Service</b></li><li><b>Products</b></li><li><b>Welcome</b></li><li><b>Search</b></li></ul></div></body></html>

上一篇：只用一张背景图实现的CSS菜单

下一篇：鼠标滑过变色的菜单条

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注