好，开始上课！
前三节课，我们知道了什么是“块状元素和内联元素”，以及xHTML+布局的核心概念“盒子模型”，同时又学习了一下页面布局中两种方法中的一种方法“浮动”，这次我们就利用这三个概念，来制作一款经典的导航条，别看它其貌不扬，可是网上所有的导航条都可以在它的基础上演变而来~，厉害吧~！其实理论都是一样的，只要你能理解并学会这节课的内容，以后再困难的导航条你都可以轻松应对，比如下面的导航条：
OK！我们要做的导航条的效果如下：鼠标移动上去背景变黑，并且字体颜色变成白色，其实做这款导航条很容易的，我引导，你跟着做，这样思路慢慢就形成了~
【第一步】
我们要先做一个容器（要求：ID为“nav”，宽度为960px，高度为35px，位于页面水平正中，与浏览器顶部的距离是30px；),这个容器就是放置我们的导航的盒子~代码如下：HTML代码：
#nav{ width:960px; height:35px; background:#CCC; margin:0 auto; margin-top:30px; }
还有一点需要提醒的是，为了页面在浏览器中的兼容性，不要忘记在CSS文件顶部加入标签重置代码~
body,div{padding:0; margin:0;}
怎么样，作出来了没有，效果是不是一个灰色条（如下图），位于页面的正中间，并且所有浏览器效果一样呢~
如果没有做出来只能说明你没有认真看前面的教程~《2天驾驭DIV+CSS》教程本身就属于经验性和技巧性高度整合的集合体，采取一环套一环的逐步引导的方式来教大家，所以要求大家对每节课都要认真去读，每句话都要认真品味，这样做出来的页面才能很好的兼容多种浏览器，并且代码高度精简，页面加载速度也大大提升！第一步的源代码：
(1.43 KB, 下载次数: 955) 【第二步】
盒子做好了，我们就要往里面放导航条了，导航条的内容为“W3Cfuns、厘米学院、培训课程、我要充电、前端职业生涯、课程答疑”，如果我们把这些内容(目前有6个)，当成酒杯的话，如果直接放到盒子里面的话，肯定会乱，并且还会东倒西歪，一点顺序都没有，但是我们平时会用一个隔板将每个酒杯隔开，这样就使酒杯很有序的放入盒子，并且牢稳而且防震，方便使用！现在我们把这个隔板叫做“无序列表”，起个英文名字叫：ul,里面的每个单元格我们也给起个英文名字叫“li”，大家想想里面的这个ul是不是和盒子里面的空间一样大，小了，酒杯放不进去，大了杯子就会不稳，所以我们定义ul的时候大小一定要和外面的盒子一样大，到这里，应该有点思路了吧~HTML代码
前端职业生涯
width:960px;
height:35px; }
效果作出来了没有，下面是在IE6和FF中显示效果(其他浏览器效果大家自己测试，总结规律)：
效果不一样，为什么？在IE6中盒子被撑大，FF中却没有，但是我们的“酒杯”却出来了，还有我们不希望我们的酒杯纵向排列，而是横向排列，怎么办呢？给大家一分钟时间想~~~
时间到！想不出来也没关系，我们一起分析一下，首先ul是什么标签？
是块状元素吧，ul里面的li标签也是块状元素，所以li也有块状元素的“霸道”，不允许其他元素和自己处于同一行，总共六个&li&,所以他们六个就像台阶似的纵向排列起来了，如果想让他们横向排列，用浮动Float就可以了，可是让谁浮动呢，当然是&li&标签喽~代码如下：
#nav ul li{ float:left;}
效果是不是和下面的一样呢大家会发现虽然“酒杯”横向排列了，但IE6和FF中的效果还是不一样的
1）盒子(#nav)高度不一样，
2) 在FF中“酒杯”前面有个大黑圆点，而IE6中却没有！解决上面这两个问题，也很容易，如下：
1）到目前这步，用到了两个新的标签ul和li，标签ul和li有没有进行重置？只要我们在页面中新写一个标签，就要进行重置，做法是，将ul、li标签加入重置代码中，“body,div,ul,li{padding:0; margin:0;}”
2）“酒杯”前面的大黑圆点，是FF给li标签定义的默认样式，我们只需要将li的默认样式去掉就是了，在ul标签的CSS属性中加入“list-style:”就OK了。现在再瞅瞅，两种浏览器的显示效果是不是和下图一样了呢~ 如果你做到这里的效果和我说的不一样，没关系，我把第二步的源代码发出来，对着上面说的再看看，就很容易学会了。
第二步的源代码：
(1.59 KB, 下载次数: 706) 【第三步】
第二步的效果还不是我们想要的，所有的“酒杯”都没有保持“车距”，后面的文字全部贴着前面的文字。好~！我们现在就将他们分开！设置&li&标签的宽度为100像素：CSS代码：
#nav ul li{ width:100px; float:left; }
为了便于观察我们暂且将&li&标签的背景设置成红色(设置背景色，是页面布局中一个很重要的方法，便于查看块状元素区域范围)CSS代码：
#nav ul li{ width:100px; float:left; background:#f00; }
效果如下：
瞧瞧，发现问题了吧，我们的&li&标签的高度并没有和我们的盒子的高度一样，这就是为什么在布局页面的时候，经常会设置一下背景色，就是这个道理，不然的话，你发现不了隐藏的问题，但是往往这些隐藏的问题就会导致页面浏览器的兼容性大大降低!
现在暂不把&li&标签的背景色去掉，当我们把它调成我们需要的效果的时候再去掉！继续，我们把li的高度设置成盒子的高度35像素，代码自己写，怎么样，高度一样了吧，但是文字却位于顶端，如何将它设置成居中呢，对喽~设置行距（如果你不会，建议你看看这篇文章），在&li&的代码中再加入下面这句代码：
line-height:35px;
效果是不是和下图一样呢好，文字的垂直居中解决了，轮到水平居中了，这个就容易了，直接在&li&的CSS代码中再加入下面这句代码：
text-align:center;
怎么样，效果有点意思了吧~到这里我再发一次代码，以保证大家每步都能理解学会！第三步源代码：
(1.62 KB, 下载次数: 496) 【第四步】
好~！做到这里，有没有发现一个问题，“前端职业生涯”与左右两边“我要充电”“课程答疑”的距离与“厘米学院”与左右两边“W3Cfuns”“课程培训”的距离是不一样的，如下图：
这样的效果并不是我们想要的，导航条上的每一个项之间的距离应该是相等的，这才是我们要的，为了寻找原因，我们给li设置一个宽度为1px的右外边距：
margin-right:1px;
这样我们就可以看清楚每个li的范围，如下图
这时候应该发现问题的原因了吧，因为我们的&li&标签是设置了宽度为100像素，已经限定了它的宽度，如果文字多了它不会自动伸缩自适应的，那这时候我们就需要去掉其宽度，这时候&li&的宽度就会缩小至文字的宽度，如下图：
如果我们这时再添加一些文字(把我们的酒杯换成一个大个的)，这个&li&也会跟着变大，大家去掉宽度后试试，是不是这个样子，这样我们的导航条就比较灵活了，不会对“酒杯”的大小有所顾忌了！虽然这个宽度自适应解决了，但是给文字的空间太少，视觉上感觉不舒服，那么我们就帮它扩大一下空间，但是又要保证宽度自适应，解决方法很容易，加上左右内边距就ok了，这里设置边距为10px，在&li&标签的CSS代码内加上下面代码，
padding:0 10px;
效果是不是这样无论你的“杯子”是增大还是缩小，&li&不但宽度会随之增大缩小，但是杯子和杯子之间的距离永远不变！怎么样有点意思吧~！然后我们再将li的背景色和右外边距去掉，得到的效果如下：第四步的源代码 :
(1.62 KB, 下载次数: 907)
上节课我们将导航条做成了下面的效果因为导航条的每一项是需要点击的，也就是说导航条的每一项都是链接，这个链接放到哪里呢？当然是要放在盒子里，哪个盒子呢？答案是：标签li这个盒子。【第五步】1）给导航的每一项加上链接；2）链接文字大小修改为123）并且规定链接样式，鼠标移上去和移出的效果；制作方法：1）导航加链接，为了使导航更具有真实性，我们这里就用“厘米学院”的真实网址，大家自己练习的时候，链接地址就随意了~HTML代码：
href="http://www.w3cfuns.com"W3Cfuns
href="http://www.w3cstudy.com"厘米学院
href="http://www.w3cstudy.com/course.aspx"培训课程
href="http://www.w3cstudy.com/apply.aspx"我要充电
href="http://www.w3cstudy.com/career.aspx"前端职业生涯
href="http://www.w3cstudy.com/faq.aspx"课程答疑
2) 文字大小12像素，这里的文字指的是链接a，所以我们对a进行样式设置，CSS代码
a{font-size:12px;}
3）鼠标移动上面和移出效果，文字默认状态时黑色无下划线的链接，鼠标移至上方，链接颜色变为白色并带有下划线，鼠标移出后还原为默认状态。CSS代码
#nav ul li a{color:#333; text-decoration:none;} #nav ul li a:hover{color:#fff; text-decoration:underline;}
注意：在这个例子中，我们可以将（2）和（3）合并效果是不是和下面一样，鼠标移上去变成白色的有下划线的链接 第五步源代码：
(1.73 KB, 下载次数: 559) 到这里，基本上一个导航条就出来了~不过为了能让大家技能再提高一个层次，我引导大家继续对导航条进行完善。【第六步】如果我希望鼠标移上去后，链接的背景变成黑色的，下面是我的步骤首先把链接a加上一个背景，以方便看出来链接a的区域
#nav ul li a{font-size:12px; color:#333; text-decoration:none; background:#0FF;}
怎么样，知道a的区域了吧 从上面可以看出，鼠标移至链接上“箭头”转换为“手”的有效区域就是亮蓝色区域，如果将a的高度设定为35px和盒子一样高度，那么这个有效区域的高度就会变为35px，这样用户体验比较好，现在网页上的导航条基本上都是鼠标移至这个区域“箭头”就会转换为“手”状，于是我给a设置一个高度“height:35”，代码如下：
#nav ul li a{height:35px; font-size:12px;
color:#333; text-decoration:none; background:#0FF;}
可是不管我怎么刷新浏览器，高度都没有任何变化，不起作用，这是为什么呢？！原因就在于a属于内联元素，内联元素是无法设置宽度和高度的，width和height只是针对块状元素，说到这里，解决办法就出来了，只要我们把内联元素a转化成块状元素就可以了，我们用“display:”将内联元素转化成块状元素。大家加上这段代码，先不要刷新预览页面效果，闭上眼想想界面会变成什么样子？
#nav ul li a{display:block; height:35px; font-size:12px; color:#333; text-decoration:none; background:#0FF;}
在FireFox和IE6里面显示的实际效果却是？！？！
两款浏览器显示效果居然大相径庭，这是在页面布局中经常出现的情况，实际效果与期望的效果不同，这就需要大家在平时多去总结。
回归问题，IE6中为什么所有链接纵向排列了呢？其实这个也很简单，IE认为a既然转化成块状元素，就拥有块状元素的特性---霸道，它是不允许其他元素和它同一行，再加上也没有对a的宽度进行设定，所以才导致IE6中这么显示，不过FF中为什么不这样呢，和我们想象的一样，那是因为FireFox认为a即使为块状元素，也应该受到外面&li&元素的影响，所以如此显示。
究竟以谁为标准？
因为大家都认为FF是标准浏览器，所以大家可以以FF为标准，不过我认为，不用管谁标准不标准，那都是相对的，大家不要在这个问题上浪费精力，应该将精力用在思考如何提高页面的浏览器兼容性，只要做出来的效果是我们想要的就行！
如何解决？
其实解决的方法也很简单，只需要在链接a的CSS代码中加入“float:”
#nav ul li a{display:block; height:35px; font-size:12px; color:#333; text-decoration:none; background:#0FF; float:left;}
问题迎刃而解，如果到这里你仍旧不明白为何如此解决，说明你没有真正理解前面的课，特别是第二节的课，怎么做？你应该知道....回去再品品去~第六步源代码：
(1.75 KB, 下载次数: 383) 【第七步】但是这样你不觉着，每个链接的左边和右边是不是太挤了，紧贴着a区域的左侧和右侧，应该怎么做？还是很简单，只需要再加上一句话“ padding:0 10”
#nav ul li a{display:block; height:35px; font-size:12px; color:#333; text-decoration:none; background:#0FF; float:left; padding:0 10px;}
现在再瞅瞅，是不是下面的效果这样就不那么挤了吧，看着舒服了吧，但是这离我们想要的效果，只剩下最后一两步了，因为现在看到的连接效果是，鼠标移上去和拿开背景都是蓝色的，我们现在只需要将a链接中的背景去掉，移到a:hover的CSS代码中，并且颜色变成“#000”就ok了~
#nav ul li a{display:block; height:35px; font-size:12px; color:#333; text-decoration:none; float:left; padding:0 10px;} #nav ul li a:hover{color:#fff; text-decoration:underline; background:#000;}
怎么样，和下面的效果一样么？效果好多了吧，这下是我们想要的效果了吧~第七步源代码：
(1.75 KB, 下载次数: 375) 【第八步】现在导航条上的每个链接之间不够紧凑，如下图这个情况形成的原因在于给li设置了“padding:0 10”,解决方法就是将li的CSS样式表里的“padding:0 10”删除就可以了，这样每个链接就变得十分紧凑，效果如下图： 另外，根据实际情况，鼠标移动到链接上后，不需要下划线，那就去掉a:hover里面的“text-decoration:”就可以了。OK！导航条搞定！最终效果是： 第八步源代码：
(1.75 KB, 下载次数: 1123) 【进阶思考】
在本节的导航条实例中，一开始我们就给导航条外面设置了一个div盒子，并设定id为“nav”，大家可以思考一下，如果不设置这个div盒子，而是将同为块状元素的ul标签作为导航的盒子是否可以呢？如果可以的话，我们的结构就少了一层，代码就更精简了，页面加载速度也就会快些。【结束语】
大家还可以把背景设置成其他颜色，用图片也可以！下面的漂亮的导航条就是咱们最经典的导航条演变而来，有兴趣的可以尝试一下！ 现在大家明白，为什么一开始我说这款导航条可以演变出成千上万的不同特色的导航条了吧~万变不离其宗！第四课的思路就是这样的，如果吃透了这节课，那么以后什么样子的导航都能很轻易作出来，如果你再和js很好的结合起来用~你就可以很自信的向老板提出加薪了！！！^_^
HTML+CSS3横向导航栏
html+css 横向导航栏
十天学会web标准（DIV+CSS）系列（七）横向导航菜单
一、横向列表菜单
前边学习过纵向导航菜单，又学习了float属性，那么要实现横向导航菜单是不是很简单了，只需要把li横向排列就可实现了。把第四节的代码拿过来直接用，修改后的代码如下：
使用html和css制作水平导航栏nav
使用html和css制作水平导航栏nav的方法及其效果：
1、li设置float:
（1）代码片段：...
HTML+CSS实战(一)——导航条菜单的制作
一、垂直导航菜单的制作
1、基本的样式清除： *{margin:0;padding:0}
2、无序列表圆点去除： ul{list-style:none}
3、下划线去除： a{text-deco...
用css写出横向导航栏
有以下几种方法：1.
横向导航栏
*{margin:0;padding:0;}
border:1px soli...
html/css横向竖向导航栏的绘制
导航栏编写一般都是用标签来写及列表，下面就看一下代码如何编写的吧：
【竖向导航栏】
工具与镜像
客户与伙伴
帮助与支持
论坛与博客
&em&html&/em&/css横向竖向&em&导航栏&/em&的绘制
css&em&横向导航&/em&菜单代码 立即下载
上传者: liushuang1220 时间:
综合评分: 0 积分/C币:3
漂亮的&em&导航条&/em&代码漂亮的...
建立无序列表，出来的是垂直着的。我们现在需要的是水平导航栏。
在css里进行样式设置
使用DIV+CSS制作二级导航菜单(横向)
html lang=&en&&
meta charset=&UTF-8&&
title&制作二级导航菜单(横向)title&
style type=&t...
横向二级导航菜单(html+css+js)
/*基本信息*/
margin: 0;
padding: 0;
background: #FFFFFF;
#navigation
没有更多推荐了，求网页制作达人，dreamweaver怎样在图片上放导航条?_百度知道
求网页制作达人，dreamweaver怎样在图片上放导航条?
布局好以后放入了一张背景图片，然后想在图片上面放导航条。请问要怎样才能做到？...
布局好以后放入了一张背景图片，然后想在图片上面放导航条。请问要怎样才能做到？
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
采纳数：18039
获赞数：86391
1、点击Dreamweaver，双击打开。2、选择文件-打开（快捷键Ctrl+O），打开网页文本。3、把鼠标光标放在需要插入导航条的地方，选择插入记录-图像对象-导航条命令。4、此时会弹出插入导航条的对话框。5、点击“状态图像”后面的浏览，在弹出的对话框中选择需要的图片。6、同上步一样，插入鼠标经过图像和按下图像。7、点击确定后出现下面效果。8、保存文档，按F12使用浏览器浏览效果。
采纳数：905
获赞数：1927
把图片作为背景图片，然后通过绝对定位把导航条放到图片上方就OK拉~
本回答被提问者采纳
火舞灬凤凰
火舞灬凤凰
采纳数：769
获赞数：900
可以在表格和层中插入导航条，导航条的图片可用Fireworks中做，实现在图片中插入字，而且做鼠标经过图像用它是非常简单的。插入导航条中还有超链接的，用它来实现网页间的联系，具体位置为：菜单栏中 插入—图像对象—导航条。
知道贡献者0394
知道贡献者0394
采纳数：1801
获赞数：56467
擅长：暂未定制
导航条用什么软件做呀的
其他1条回答
为你推荐：
其他类似问题
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。在网页制作中，横向的导航菜单怎么写啊？_百度知道
在网页制作中，横向的导航菜单怎么写啊？
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
采纳数：70
获赞数：331
用表格布局很简单，1行多列就好了，控制好高度；用css的话我一般会使用ul、li&ul&&li&首页&/li&&li&资料下载&/li&&/ul&给li添加“float: display:”属性，至于表现形式怎么样就是你设计的问题了
1988xingyu
1988xingyu
采纳数：66
获赞数：460
/* 统一设置所有样式 */ font-family: A font-size: .8 text-align: margin:3}a:link, a:visited{
/* 超链接正常状态、被访问过的样式 */ color: #A62020; padding:4px 10px 4px 10 background-color: #ecd8 text-decoration: border-top: 1px solid #EEEEEE;
/* 边框实现阴影效果 */ border-left: 1px solid #EEEEEE; border-bottom: 1px solid #717171; border-right: 1px solid #717171;}a:hover{
/* 鼠标经过时的超链接 */ color:#821818;
/* 改变文字颜色 */ padding:5px 8px 3px 12
/* 改变文字位置 */ background-color:#e2c4c9;
/* 改变背景色 */ border-top: 1px solid #717171;
/* 边框变换，实现“按下去”的效果 */ border-left: 1px solid #717171; border-bottom: 1px solid #EEEEEE; border-right: 1px solid #EEEEEE;}这是横向写代码的一个例子，你可以试试
liushuhuan_11
liushuhuan_11
采纳数：184
获赞数：379
没弄明白楼主啥意思
为你推荐：
其他类似问题
您可能关注的内容
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。关于网页制作导航栏链接的问题_百度知道
关于网页制作导航栏链接的问题
我一纯新手，想制作一个小网站学习，做了导航栏，我做的网站每一页都有导航栏，请问每一个页面都要用纯手工链接么？那不是要头都链接大？是不是有什么更方便的方法，新手，勿笑。。。...
我一纯新手，想制作一个小网站学习，做了导航栏，我做的网站每一页都有导航栏，请问每一个页面都要用纯手工链接么？那不是要头都链接大？是不是有什么更方便的方法，新手，勿笑。。。每一个导航栏的项目都用纯手工链接么？会死人的！
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
Perfect♂举
Perfect♂举
采纳数：244
获赞数：619
如果是静态网页，基本是这样，手工每个页面加，也可以使用js，全部网页引用一个js，js来生成导航，如果是有动态程序的网页，就不用一个个加了，有循环生成以及文件包含，请采纳
为你推荐：
其他类似问题
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。做网页左边的导航栏不动,右边的内容动怎么做,_百度知道
做网页左边的导航栏不动,右边的内容动怎么做,
我新学做网页,请高手指教,就像http://192.168.1.193/pv2008_city_demo/index1.aspx里面的一样,小女子先谢谢了...
我新学做网页,请高手指教,就像里面的一样,小女子先谢谢了
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
采纳数：923
获赞数：1846
你给的是内网地址，看不到你可以使用框架结构做
为你推荐：
其他类似问题
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。