很漂亮的蓝色经典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> <meta http-equiv="content-Type" content="text/html;charset=gb2312"> <style type="text/css"> body{margin:20px 0 0 0; padding:0px; font-size:12px; font-family:""; line-height:20px; background:#fff;} div{margin:0 auto; padding:0px;} h1,h2,h3,h4,h5,h6,ul,li,dt,dl,dd,form,p{margin:0px; padding:0px; list-style-type:none;} img{border:none;} .f_l{float:left;} .f_r{float:right;} .tl{text-align:left;} .tr{text-align:right;} .tc{text-align:center;} .clearing{clear:both; height:0px; line-height:0px; overflow:hidden;} .pos{position:relative;} .dis{display:block;} .marg{margin-top:-1px;} .block{width:933px; height:auto;} .border_1{border:1px solid #999;} .blank9{height:9px; line-height:9px; clear:both; overflow:hidden;} .f1{color:#0066cc; text-decoration:underline;} .f2{color:#ff0000;} .f3{color:#ff0000; font-weight:bold;} .f4{color:#0066cc;} .f5{color:#cc6633;} .f_weight{ font-weight:bold; color:#333333; font-size:14px;} .fLink{color:#dc1a00; text-decoration:none;} #top{height:69px;} #top img{margin-left:20px;} #top .text{color:#b1b1b1; position:absolute; right:0px; bottom:12px;} #top .text a{color:#b1b1b1; text-decoration:none;} #nav{width:933px; height:30px; background:url(http://www.webdm.cn/images/20090920/0_navBg.gif) repeat-x left top; } #nav span{width:4px; height:30px; display:block; background:url(http://www.webdm.cn/images/20090920/0_bg.gif) no-repeat 0 0; position:absolute; left:0px; top:0px; } #nav span.right{background:url(http://www.webdm.cn/images/20090920/0_bg.gif) no-repeat -5px 0; position:absolute; left:929px; top:0px;} #nav .navBox{background:url(http://www.webdm.cn/images/20090920/0_dhling.gif) no-repeat left top; padding- left:1px;} #nav a{display:block; width:99px; height:30px; line-height:30px; font-size:13px; color:#fff; font-weight:bold; background:url(http://www.webdm.cn/images/20090920/0_dhbg.gif) no-repeat left top; float:left; text- align:center; text-decoration:none; } #nav a:hover,#nav .cur{display:block; width:99px; height:30px; line-height:30px; font-size:13px; color:#fff; font-weight:bold; background:url(http://www.webdm.cn/images/20090920/0_dhbg1.gif) no-repeat left top; float:left; text- align:center; text-decoration:none; } </style> </head> <body> <div id="nav" class="pos"> <span class="right"></span> <div class="navBox f_r"> <a href="/" class="cur">网站首页</a> <a href="/">Ajax</a> <a href="/">脚本资源</a> <a href="/">电子书籍</a> <a href="/">方案及文档</a> <a href="/">工具软件</a> </div> </div> </body> </html> <br> <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
代码来自:http://www.webdm.cn/webcode/52b0a8bc-de92-4470-a5cc-a703e9ae0b24.html