- 4/5
- 1
- 2
- 3
- 4
- 5
织梦DedeCMS视频教程买空间 租服务器 选网硕互联！ 无忧站长工具,百度权重一键全查!
仿MAC机风格的水平导航条，纯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" mrc="text/html; charset=gb2312" /> <title>水平导航条(DIV+CSS)</title> <style type="text/css"> body{ background: #FFF; font-family: Arial, Helvetica, sans-serif; color: #555555; padding: 0px; margin: 5px; text-align: center; font-size: 9pt; } #nav{ text-align: center; font-size: 11px; font-family: Arial, Helvetica, sans-serif; margin:15px auto; } #nav ul{ margin: 0px; padding: 0px; list-style-type: none; } #nav li{ float: left; } #nav li a{ text-decoration: none; color: #666; background: url(http://p1.mb5u.com/texiao/menubg.gif) no-repeat 0px 0px; width: 100px; line-height: 20px; display: block; } #nav li a:hover{ color: #CC0000; background: url(http://p1.mb5u.com/texiao/menubg.gif) no-repeat 0px -20px; } </style> </head> <body> <div id="nav"> <ul> <li><a href="/">Home</a></li> <li><a href="/service/ad.shtml">About us</a></li> <li><a href="/sort/list_1_1.shtml">Products</a></li> <li><a href="/sort/list_2_1.shtml">ASP Codes</a></li> <li><a href="/sort/list_2_1.shtml">PHP Codes</a></li> <li><a href="/sort/list_11_1.shtml">Ajax Codes</a></li> <li><a href="/sort/index.shtml">Services</a></li> </ul></div> </body> </html>
所属频道：菜单导航特效/更新时间：2011-02-24