常见导航条的实现

<!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>

时间： 2024-10-11 00:00:43

常见导航条的实现的相关文章

Bootstrap导航条

前面的话 导航条(navbar)和导航(nav),就相差一个字,多了一个“条”字.其实在Bootstrap框架中他们还是明显的区别.在导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式.本文将详细介绍Bootstrap导航条 基础导航条 在Bootstrap框架中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多. 导航条是在应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并且可开

Bootstarp学习（十一）导航条

导航条基础 导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个"条"字.其实在Bootstrap框架中他们还是明显的区别.在导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式.在这一节中将一起探讨Bootstrap框架中导航条的使用. 导航条和导航一样,在Bootstrap框架中是一个独立组件,所以你也可以根据自己的需求使用不同的版本: LESS版本:对应的源文件navbar.less S

CSS实现导航条Tab切换的三种方法

前面的话 ??导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局 ??根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布局效果,有两种布局方法:语义布局和视觉布局 [语义布局] ??从语义布局的角度来看,每一个导航标题和其对应的导航内容应该是一个整体 <style> body,p{margin: 0;} h2{margin: 0;font-size:100%;} ul{margin: 0;padding: 0;li

Bootstrap系列 -- 43. 固定导航条

很多情况之一,设计师希望导航条固定在浏览器顶部或底部,这种固定式导航条的应用在移动端开发中更为常见.Bootstrap框架提供了两种固定导航条的方式:  .navbar-fixed-top:导航条固定在浏览器窗口顶部 .navbar-fixed-bottom:导航条固定在浏览器窗口底部 <div class="navbar navbar-default navbar-fixed-top" role="navigation"> … </div>

【AmazeUI】手机版页面的顶部导航条Header与侧边导航栏offCanvas

顶部导航条如果你细心留意下现在的页面,实在是太常见了.这个组件在手机端的页面中,同样可以借助AmazeUI这个前端框架实现.与此同时,可以在导航栏的最右方加一个触发侧边导航栏offCanvas.不要再使用BootStrap那种,一旦点击就大幅度下拉的导航了,反正我个人觉得很蛋疼的.一个导航活活地占据了页面大量位置.这个侧边导航栏offCanvas曾经是php方面的WorkPress的优秀设计来的. 使用AmazeUI做出来的效果如下: 首先是顶部导航栏的代码: <!--这里的顶部导航栏与Boot

Bootstrap之导航条，分页导航

导航条基础 导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个“条”字.其实在Bootstrap框架中他们还是明显的区别.在导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式.   基础导航条 使用方法: 在制作一个基础导航条时,主要分以下几步: 第一步:首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav” 第二步:在列表外部添加一个容器(div),并且使

JS实现导航条效果——current跟随鼠标hover移动

<!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-

自定义导航条上的标题文字的大小以及颜色

在做项目开发时,有的时候回自定义导航条视图,常见的是设置标题文字的大小颜色.左侧以及右侧navgationItem. 在做自定义导航视图的时候 ,导航项都可以用自定义视图的形式自定义. 自定义导航条标题的时候有两种方法:一是,采用自定义视图的方式:二是,采用系统的方法. 采用自定义视图view的方式 就是在导航向上添加一个titleView,可以使用一个label,再设置label的背景颜色透明,字体什么的设置就很简单了. UILabel *titleLabel = [[UILabel allo

玩转Bootstrap（基础） -- （6.导航条基础）

1.导航条样例 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>导航条</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/b