• 很漂亮的蓝色经典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{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{933px; height:30px; background:url(http://www.webdm.cn/images/20090920/0_navBg.gif) repeat-x left 
    
    top;
    }
    #nav span{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; 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; 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

  • 相关阅读:
    数以百万计美元的融资YO是什么东东?
    工作流和审批流
    Linux makefile 教程 很具体,且易懂
    【吐槽】火车票一票难求啊
    poj 2828 Buy Tickets(树状数组 | 线段树)
    如花搞笑图片集锦(转贴)
    苹果开发人员账号注冊流程
    优秀团队建设--美国式团队(ppt)
    屏幕分辨率(QQVGA、QVGA、VGA、XGA、WXGA、WUXGA和WSXGA+)
    怎样设计接口?
  • 原文地址:https://www.cnblogs.com/webdm/p/2006392.html
Copyright © 2020-2023  润新知