码迷,mamicode.com
首页 > 其他好文 > 详细

常见导航条的实现

时间:2015-09-11 17:26:21      阅读:132      评论:0      收藏:0      [点我收藏+]

标签:

<!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;width:900px;margin:0 auto;}
#nav_l { float:left; height:66px; width:5px; overflow:hidden; background:url(images/nav_bg.gif) 0 -66px no-repeat; margin-right:10px;}
#nav_r { float:right; height:66px; width: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; width: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{width:1000px; margin:0 auto;}
#header{overflow:hidden;}
#logo{display:block; width:220px; height:54px; float:left; background:#991616;}
#logo img{display:block;}
#nav{width:780px; height:54px; float:left; background:#393838; list-style:none;}
#nav li{float:left;}
#nav li a{display:block; width: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>

技术分享

常见导航条的实现

标签:

原文地址:http://www.cnblogs.com/lichanghui/p/4801303.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!