十分简洁小巧的导航代码
代码简介:
视觉挺舒服的一款小巧的网站导航条,代码就像它的外形一样简单,修改超方便,兼容性好,鼠标滑过变色,配色极合理,确实很不错哟,而且完全是纯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=gb2312" /> <title>十分简洁小巧的导航代码_网页代码站(www.webdm.cn)</title> <style type="text/css"> <!-- #navcontainer { margin: 10px 0 0 30px; padding: 0; height: 20px; } #navcontainer ul { border: 0; margin: 0; padding: 0; list-style-type: none; text-align: center; } #navcontainer ul li { display: block; float: left; text-align: center; padding: 0; margin: 0; } #navcontainer ul li a { background: #fff; width: 78px; height: 18px; border-top: 1px solid #f5d7b4; border-left: 1px solid #f5d7b4; border-bottom: 1px solid #f5d7b4; border-right: none; padding: 0; margin: 0 0 10px 0; color: #f5d7b4; text-decoration: none; display: block; text-align: center; font: normal 10px/18px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif; } #navcontainer ul li a:hover { color: #930; background: #f5d7b4; } #navcontainer a:active { background: #c60; color: #fff; } #navcontainer li#active a { background: #c60; border: 1px solid #c60; color: #fff; } --> </style> </head> <body> <div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="/" id="current">WebDm.CN</a></li> <li><a href="/">ASP</a></li> <li><a href="/">AJAX</a></li> <li><a href="/">JQUERY</a></li> <li><a href="/">EXT</a></li> </ul> </div> </body> </html> <br> <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
代码来自:http://www.webdm.cn/webcode/d35f0907-98f9-4c69-a06e-c2848ceb63c5.html