蓝色经典CSS导航菜单

2024-09-05 12:19:28

字体：大中小

来源：转载

供稿：网友

很不错的一款蓝色风格经典的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导航菜单</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;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(/jscss/demoimg/200903/0_navBg.gif) repeat-x left top;}#nav span{width:4px; height:30px; display:block; background:url(/jscss/demoimg/200903/0_bg.gif) no-repeat 0 0;position:absolute; left:0px; top:0px;}#nav span.right{background:url(/jscss/demoimg/200903/0_bg.gif) no-repeat -5px 0; position:absolute; left:929px; top:0px;}#nav .navBox{background:url(/jscss/demoimg/200903/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(/jscss/demoimg/200903/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(/jscss/demoimg/200903/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">网站首页 Ajax脚本资源电子书籍方案及文档工具软件</div></div></body></html>

上一篇：仿QQ的下拉折叠菜单

下一篇：超级酷黑色网站导航菜单