zoukankan      html  css  js  c++  java
  • 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>
    <style type="text/css">
    <!--
    /*通用*/
    body{font:12px Arial,Verdana,Tahoma,"宋体";}
    *{padding:0px;margin:0px;}
    * li{list-style:none;}
    a{text-decoration:none;color:#20537A;}
    a:hover{text-decoration:underline;}
    
    .clearfix:after {
        content: "\0020";
        display: block;
        height: 0;
        clear: both;
    }
    .clearfix {
        _zoom: 1;
    }
    *+html .clearfix {
    	overflow:auto;
    }
    
    .menu_navcc{970px; margin:0 auto;}
    .menu_nav{970px;height:48px;background:url(http://www.webdm.cn/images/20100919/nav_bg_zhu.gif) repeat-x;float:left;margin-top:18px;}
    .menu_nav .nav_content{padding-left:25px;background:url(http://www.webdm.cn/images/20100919/nav_l_bg.gif) no-repeat;float:left;}
    .menu_nav .nav_content li{88px;height:48px;padding-left:15px;padding-right:13px;background:url(http://www.webdm.cn/images/20100919/nav_li_right.gif) no-repeat right 
    
    center;float:left;line-height:48px;text-align:center;font-size:14px;font-weight:bold;}
    .menu_nav .nav_content li a{color:#fff;88px;height:48px;display:block;}
    .menu_nav .nav_content li.current{line-height:37px;}
    .menu_nav .nav_content li em{background:url(http://www.webdm.cn/images/20100919/bid_new.gif) no-repeat;35px;height:21px;display:inline-block;position:absolute;top:-
    
    20px;left:40px;}
    
    .menu_nav .nav_content li.current a,.menu_nav .nav_content li a:hover{88px;height:37px;background:url(http://www.webdm.cn/images/20100919/nav_li_current.gif) no-
    
    repeat;display:block;color:#fff;}
    .menu_nav .nav_content li a:hover{background:url(http://www.webdm.cn/images/20100919/nav_li_hover.gif) no-repeat;line-height:37px;text-decoration:none;}
    
    .menu_nav_right{padding-right:20px;background:url(http://www.webdm.cn/images/20100919/nav_r_bg.gif) no-repeat right top;float:right;margin-left:50px;padding-
    
    top:13px;height:23px;padding-bottom:12px;}
    p{
    margin-bottom:15px}
    -->
    </style>
    </head>
    
    <body style="text-align:center">
    <div style="height:100px;"></div>
    <div style="clear:both"></div>
    
    <!--nav,start-->
    <div class="menu_navcc">
    <div class="menu_nav clearfix">
    <ul class="nav_content">
    <li class="current"><a href="#" title="首页"><span>首页</span></a></li>
    <li><a href="#" title="JS广告代码"><span>广告代码</span></a></li>
    <li><a href="#" title="CSS教程"><span>CSS教程</span></a></li>
    <li style="position:relative;"><a href="#" title="导航菜单"><span>导航菜单</span></a><em></em></li>
    <li><a href="#" title="溶图素材"><span>溶图素材</span></a></li>
    <li><a href="#" title="常用代码"><span>常用代码</span></a></li>
    </ul>
    <div class="menu_nav_right">
    </div>
    </div>
    </div>
    </body>
    </html>
    <br>
    <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
    

    代码来自:http://www.webdm.cn/webcode/66bc82a0-d504-40d4-963c-3f9631836489.html

  • 相关阅读:
    PS做图片,如何使背景透明
    C# 在线培训之零基础入门 01:开篇及C#程序、解决方案的结构
    C# 在线培训之零基础入门 02:源码管理之TFS入门
    [ASP.NET] 浅析HtmlForm控件
    Asp.net内置对象之Session
    Asp.net内置对象之Cookies
    [WinForm] 自动补全控件
    ASP.NET内置对象之Request对象
    C#开发Activex控件与JavaScript的互调
    XHTML学习资料(五)—— 表单
  • 原文地址:https://www.cnblogs.com/webdm/p/2088596.html
Copyright © 2011-2022 走看看