zoukankan      html  css  js  c++  java
  • 常见导航条的实现

    <!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>无标题文档</title>
    <style type="text/css">
    <!--
    body{margin:0 auto;font-size:12px;font-family:"微软雅黑";line-height:1.5;}
    img{boder:0px;}
    ul,ol,dl,dd,dt,h1,h2,h3,h4,h5,h6,form,p{margin:0px;padding:0px;}
    ul{list-style:none;}
    a{text-decoration:none;color:#000000;}
    a:hover{color:#FF0000;}
    #nav { height:66px; background:url(images/nav_bg.gif) 0 0 repeat-x; margin-bottom:8px;900px;margin:0 auto;}
    #nav_l { float:left; height:66px; 5px; overflow:hidden; background:url(images/nav_bg.gif) 0 -66px no-repeat; margin-right:10px;}
    #nav_r { float:right; height:66px; 5px; overflow:hidden; background:url(images/nav_bg.gif) -5px -66px no-repeat;}
    .nav_main { height:36px; overflow:hidden;}
    .nav_main ul li { float:left; font-size:14px; font-weight:bold; margin:5px 5px 0 5px;}
    .nav_main ul li a { float:left; display:block; height:26px; line-height:26px; color:#fff; padding-left:20px;}
    .nav_main ul li a span { float:left; display:block; padding-right:20px;}
    .nav_main ul li a:hover { background:url(images/nav_bg.gif) 0 -163px no-repeat; color:#fff;}
    .nav_main ul li a:hover span { background:url(images/nav_bg.gif) right -163px no-repeat; cursor:pointer;}
    .nav_main ul li a#nav_current { height:31px; line-height:31px; background:url(images/nav_bg.gif) 0 -132px no-repeat; color:#646464;}
    .nav_main ul li a#nav_current span { height:31px; background:url(images/nav_bg.gif) right -132px no-repeat;}
    .nav_son { height:30px;}
    .nav_son ul li { float:left; margin-top:4px;}
    .nav_son ul li a { display:block; 78px; height:22px; line-height:22px; text-align:center; color:#6e6e6e;}
    .nav_son ul li a:hover { background:url(images/nav_bg.gif) 0 -198px no-repeat;}
    -->
    </style>
    </head>
    <body>
    <div id="nav">
    <div id="nav_l"></div>
    <div id="nav_r"></div>
    <div class="nav_main">
    <ul>
    <li><a href="#"><span>首页</span></a></li>
    <li><a href="#" id="nav_current"><span>企业新闻</span></a></li>
    <li><a href="#"><span>企业简介</span></a></li>
    <li><a href="#"><span>产品展厅</span></a></li>
    <li><a href="#"><span>企业历史</span></a></li>
    <li><a href="#"><span>招商加盟</span></a></li>
    <li><a href="#"><span>网上下单</span></a></li>
    <li><a href="#"><span>联系我们</span></a></li>
    </ul>
    </div>
    <div class="nav_son">
    <ul>
    <li><a href="#">企业动态</a></li>
    <li><a href="#">领导活动</a></li>
    <li><a href="#">产品资讯</a></li>
    <li><a href="#">通知公告</a></li>
    </ul>
    </div>
    </div>

    <!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>无标题文档</title>
    <style type="text/css">
    <!--

    body,div,p,ul,li,dl,dt,dd,h1,a{margin:0; padding:0;}
    img{border:none;}
    h1{font-size:100%;}
    #header,#banner,#content,#footer{1000px; margin:0 auto;}
    #header{overflow:hidden;}
    #logo{display:block; 220px; height:54px; float:left; background:#991616;}
    #logo img{display:block;}
    #nav{780px; height:54px; float:left; background:#393838; list-style:none;}
    #nav li{float:left;}
    #nav li a{display:block; 86px; height:54px; line-height:54px; text-align:center; font-size:12px; color:#ccc; text-decoration:none; float:left;}
    #nav li a:hover{color:#fff;}
    #nav li .navActive{ background:url(images/navHoverBg.png) no-repeat; color:#fff;}

    -->
    </style>
    </head>

    <body>
    <div id="header">
    <a id="logo" href="http://www.w3cstudy.com">
    <img src="images/logo.png" />
    </a>
    <ul id="nav">
    <li><a href="http://www.w3cstudy.com" class="navActive">首 页</a></li>
    <li><a href="http://www.w3cstudy.com/course.aspx">培训课程</a></li>
    <li><a href="http://www.w3cstudy.com/students.aspx">优秀学员</a></li>
    <li><a href="http://www.w3cstudy.com/faq.aspx">课程疑问</a></li>
    <li><a href="http://www.w3cstudy.com/career.aspx">职业生涯</a></li>
    <li><a href="http://www.w3cfuns.com/">学员社区</a></li>
    <li><a href="http://blog.w3cstudy.com/">官方博客</a></li>
    <li><a href="http://www.w3cstudy.com/address.aspx">学院地址</a></li>
    </ul>
    </div>
    </body>
    </html>

  • 相关阅读:
    值类型、引用类型的区别
    SharePoint Server 2013 Excel Web Access无法显示
    SharePoint 2013报错之“指定的文件不是有效的电子表格或者没有包含要导入的数据”
    SharePoint 2013备份方法整理
    SQL 2005报错之Restore fail for Server 'DatabaseServerName'.
    SQL Server 2012自动备份
    SharePoint 2013在浏览器中打开pdf文档
    摸鱼,搞RW
    蛋疼的远程声音,这次用蓝牙试试看
    Win10 IoT Core 更改密码(PowerShell)
  • 原文地址:https://www.cnblogs.com/lichanghui/p/4801303.html
Copyright © 2011-2022 走看看