纯CSS实现滑过变色的灰色大按钮式导航条代码
代码简介:
灰色大按钮式导航条,纯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实现滑过变色的灰色大按钮式导航条代码_网页代码站(www.webdm.cn)</title> <style> /* CSS Document */ *{ margin:0; padding:0; } #menu{ width:90%; margin:25px auto; } #menu ul{ list-style:none; } #menu li{ display:block; float:left; } #menu li a{ background:#979797 url(http://www.webdm.cn/images/20090919/menu_bg6.gif) repeat-x; border:2px solid #939393; margin:0 1px; padding:15px 15px 15px 15px; display:block; float:left; color:#fff; text-transform:uppercase; text-decoration:none; font-family:Geneva, Arial, Helvetica, sans-serif; font-size:13px; font-weight:bold; height: 50px; } #menu li a span{ color:#636363; font-size:10px; text-transform:lowercase; font-family:Geneva, Arial, Helvetica, sans-serif; font-weight:normal; } #menu li a:hover{ background:#e46825 url(http://www.webdm.cn/images/20090919/menu_hover6.gif) repeat-x; border:2px solid #939393; text-decoration:none; } #menu li a:hover span{ color:#636363; } .current{ background:#bcbcbc url(http://www.webdm.cn/images/20090919/menu_hover6.gif) repeat-x; border:2px solid #aeaeae; margin:0 1px; padding:15px 15px 15px 15px; display:block; float:left; color:#fff; text-transform:uppercase; text-decoration:none; font-family:Geneva, Arial, Helvetica, sans-serif; font-size:13px; cursor:pointer; font-weight:bold; height: 50px; } .current span{ color:#636363; font-size:10px; text-transform:lowercase; font-family:Geneva, Arial, Helvetica, sans-serif; font-weight:normal; } </style> </head> <body> <div id="menu"> <ul> <li class="current">WebDm.cn<br /><span>takes you to<br />WebDm.Cn</span></li> <li><a href="/">About Us<br /><span>takes you to<br />Welcome To webdm.cn</span></a></li><li><a href="/">Products<br /><span>Codes sort<br />Codes Intro</span></a></li> <li><a href="http://www.webdm.cn">Partners<br /><span>Last news<br />partners page</span></a></li> <li><a href="/">Contact Us<br /><span>takes you to<br />contact page</span></a></li> </ul> </div> </body> </html> <br> <a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!
代码来自:http://www.webdm.cn/webcode/4ac712ed-40fb-40df-ac2c-17c157ba1de7.html