- 4/5
- 1
- 2
- 3
- 4
- 5
织梦DedeCMS视频教程买空间 租服务器 选网硕互联！ 无忧站长工具,百度权重一键全查!
此为一款通用的网站栏目导航条，热色调，特别之处是用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</a>"> <head> <meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" /> <title>立体菜单-For www.mb5u.com</title> <style type="text/css"> <!-- #navcontainer { background: #f0e7d7; margin: 0 auto; padding: 1em 0 0 0; font-family: Arial; text-transform: lowercase; } /* to / */ #navcontainer:after { mrc: "."; display: block; line-height: 1px; font-size: 1px; clear: both; } ul#navlist { list-style: none; padding: 0; margin: 0 auto; width: 88%; font-size: 11pt; } ul#navlist li { display: block; float: left; width: 15%; margin: 0; padding: 0; } ul#navlist li a { display: block; width: 100%; padding: 0.5em; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #f7f2ea; } #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a { background: #f0e7d7; color: #800000; } ul#navlist li a:hover, ul#navlist li#active a:hover { color: #800000; background: transparent; border-color: #aaab9c #fff #fff #ccc; } --> </style> </head> <body> <div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="/" id="current">mb5u.com</a></li> <li><a href="/sort/list_1_1.shtml">ASP</a></li> <li><a href="/sort/list_11_203_1.shtml">AJAX</a></li> <li><a href="/sort/list_11_112_1.shtml">JQUERY</a></li> <li><a href="/sort/list_11_1.shtml">EXT</a></li> </ul></div> </body> </html>