效果非常不错的DIV+CSS布局的网页导航

2007-06　　作者：佚名　　来源：不详　网友评论　

<!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.58mb.com展示特效</title> <style type="text/css"> * { font-size:13px; font-weight:800; text-decoration:none; margin:0; padding:0; } body { background:#ccc; } #menu { list-style-type: none; border:1px solid #fff; margin:50px auto; width:770px; height:30px; overflow:hidden; background:#000 url(/upfiles/20070619/20070619022816_webjx_com_b.png) 0 0 repeat-x; } #menu li { border-right:1px solid #fff; float:left; } #menu li a { display:block; text-align:center; color:#fff; line-height:30px; padding:0 10px; } #menu li a:hover,#menu li.current { background:#fff url(/upfiles/20070619/20070619022807_webjx_com_a.png) 0 0 repeat-x; } </style> </head> <body> <ul id="menu"> <li class="current"><a href="http://www.58mb.com" title="">Webjx.Com首页</a></li> <li><a href="http://www.58mb.com/htmldata/sort/3.html" title="">网页制作教程</a></li> <li><a href="http://www.58mb.com/htmldata/sort/5.html" title="">网页特效展示</a></li> <li><a href="http://www.58mb.com/htmldata/sort/4.html" title="">动画制作教程</a></li> <li><a href="http://www.58mb.com/htmldata/sort/2.html" title="">网站建设指南</a></li> <li><a href="http://www.58mb.com/htmldata/sort/6.html" title="">网络编程技术</a></li> </ul> </body> </html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

>> 更多评论