第七天　横向导航菜单

共有 68 位网友发表了评论　我要评论..

chuijie(183.16.*.*) 发表于：2011-08-11 17:28:49: 很好！···

navy7260(124.135.*.*) 发表于：2011-08-10 11:06:17: 老师你好，“#menu ul li a#current”是否应该为“#menu ul li a:active”，使用前者鼠标点上去背景没有变化。; 管理员回复：不是，后者是所有点击过的，和前者是不一样的

qq341135(116.26.*.*) 发表于：2011-08-01 21:27:45: 这个教程真的很适合新手，是目前看到感觉最好的，更夸张的是提问管理员还有回复，太感动了，特意注册个账号真心表示感谢！

lancre(125.89.*.*) 发表于：2011-07-18 17:18:02: 老师你好，之前有问过你预览不出现背景图的问题，用上面教程中的实例，我发现把li设置为块再设置背景图预览可以看到，而把a设置为块再设置背景图就看不到。还是不明白为什么，同一张图，地址也是一样的; 管理员回复：那就要看a的范围有多大了

1002866731(61.152.*.*) 发表于：2011-07-14 17:20:30: 老师，我初学这个，请问怎么将鼠标放在链接上出现的下划线与内容有一段距离，而不是紧贴着他的，还望老师能解答！！不胜感激！！; 管理员回复：这个解决不了，除非用下划线来实现

sifeng(59.174.*.*) 发表于：2011-06-30 12:15:29: 用图片美化的横向导航，分别为当前状态（#menu ul li a ），鼠标放上时样式（#menu ul li a:hover），和默认样式用什么标签啊？老师，求急啊？; 管理员回复：默认就是a呀

hushaoju(61.184.*.*) 发表于：2011-06-25 14:50:06: 这个网站太棒了，已经将网址放在QQ签名上了。站长加油！; 管理员回复：谢谢啊

rtxcmgy(114.138.*.*) 发表于：2011-06-13 22:49:02: 老师，我遇到个问题，就是我的导航背景图片在DW设计里能显示出来，但是一预览就没了，怎么回事？; 管理员回复：路径问题

rtxcmgy(114.138.*.*) 发表于：2011-06-13 01:59:20: 老师，我问下这导航的背景图片有什么规定格式没？比如说PNG的图片用了能显示不？; 管理员回复：自己试下不就知道了

Jane(221.5.*.*) 发表于：2011-05-27 13:15:27: 老师，为什么我按照你给出的代码在DW里照抄一片但在网页中却显示不出图片呢？？以下是我的代码！ <!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=utf-8" /> <title>纵向列表菜单</title> <style type="text/css">  </style> </head> <body> <div id="menu"> <ul> <li><a id="current" href="#">首页</a></li> <li><a href="#">网页版式</a></li> <li><a href="#">div+css</a></li> <li><a href="#">div实例</a></li> <li><a href="#">常用代码</a></li> </ul> </div> </body> </html>; 管理员回复：图片名称请使用中文试试

zx98432(218.93.*.*) 发表于：2011-05-27 10:30:36: 图片不显示的原因：在background:url(images/091033_nav_bg3.gif) no-repeat；中有一个0 -28px;0 -56px;这两个样式删除就可以显示图片

hikop(180.127.*.*) 发表于：2011-04-22 11:56:40: 老师，还是那个问题，是我没说清楚，第一个示例运行代码后，如果把浏览器宽度拉小，导航栏里的栏目会自动的换行，第二、三示例则没有这个问题，二、三拉小会自动把多出的部分隐藏，并显示滚动条~！我做的网页也出现了导航自动换行的问题，想请教下，谢谢老师~！; 管理员回复：仔细对比下两个的区别不就知道了吗，要善于发现问题，更要善于解决问题

hikop(180.127.*.*) 发表于：2011-04-17 15:03:25: 前面发评论老显示请输入用户名什么的，可已经登录了，就重登下载发，要是重复发来请老师谅解~！在学习这章时遇到个问题，第一个实例在运行时如果宽度不够会自动换行，而下面两个不会换，我比较笨，在百度搜过也没找到原因，希望老师帮忙解答下，谢谢了; 管理员回复：不会吧，登录上应该就能正常评论了呀，没人反映过类似问题；超出总宽度都会自动换行

wulinxu(113.96.*.*) 发表于：2011-04-10 14:03:43: #menu ul li a { display:block; padding: 0px 8px; height: 26px; line-height: 26px; float:left;} 老师，前面的li已经设置了float:left；为什么这里还要设置呢，我把它加进去以后，就是像上面有人提到的，设计窗口里显示的文字是竖的，但是预览的时候却能正确显示; 管理员回复：是为了兼容IE6，当a没有固定宽度时，如果不加，会造成IE6下错乱

kiana(113.91.*.*) 发表于：2011-03-22 11:17:28: .menu {margin:0 auto; border: 1px solid #CCC; height:26px; background: #eee;} .menu ul { list-style: none; margin: 0px; padding: 0px; } .menu ul li {float:left} .menu ul li a { display:block; padding: 0px 8px; height: 26px; line-height: 26px; float:left;} .menu ul li a:hover {background:#333; color:#fff;} 老师，我按你的代码加入到DW里面去，可以为什么文字会全部竖立起来？但是预览效果对！; 管理员回复：如果全部按我的实例，结果应该是一样的

zhchdc(218.11.*.*) 发表于：2011-03-19 18:39:46: 老师，我的导航条按您的设置不居中啊，auto好像不管用了，怎么能让您帮我看看啊; 管理员回复：你是指哪部分居中？

wenwen518199(125.113.*.*) 发表于：2011-03-17 16:13:10: 老师，我安步骤做，可是在IE上鼠标指导航，为什么不显示图片呢。我查一边又一边，没发现有问题啊！; 管理员回复：那就在本站的源码上一点一点修改吧，总能找到问题的

361(112.225.*.*) 发表于：2011-02-04 11:17:04: 老实你是否有空加我QQ 有问题请教你！我的QQ 527522625; 管理员回复：有问题请直接在相关文章下留言，如果大家都加我请教问题的话，我就别工作了

yishuiqingyao(59.38.*.*) 发表于：2011-01-20 21:15:43: 老师，我学着用CSS雪碧技术去做百度知道首页的那个导航栏了；做了一半就怎么也做不下去了，后面那个空出来的部分试了很多遍都不会做；不知道是不是我理解错了……老师有时间的话帮我分析下好吗？那一类的导航是怎么做出来的呀？还有它两边的圆角，能不能用您教的那个css滑动门技术做呀？好像我用的那些方法，都很麻烦的，绕了不少弯呢，唉……; 管理员回复：先把我的这个实例多练习几遍吧，然后在此基础上扩展

liuxianqin780(124.129.*.*) 发表于：2011-01-19 23:19:47: 为什么你们的群加不进去啊我想发图片具体问下。。; 管理员回复：那么多群，总有一个能加进去的

liuxianqin780(124.129.*.*) 发表于：2011-01-19 23:15:31: 老师好，我是刚加入的。我想部下这个网页的导航的CSS是怎么定义的。。为什么能全屏显示呢？？还是头部的内容 http://list.taobao.com/market/beauty.htm?TBG=40978.71102.2&cat=1801&promoted_service2=2&sort=coefp&style=grid&random=false&viewIndex=7&yp4p_page=0&commend=all; 管理员回复：加个背景不就行了

wxshanm(221.6.*.*) 发表于：2011-01-14 17:23:20: 请问站长在 ie6 中如何实现png 带透明效果的背景平铺啊？; 管理员回复：请搜索本站相关实例

a273893359(119.130.*.*) 发表于：2011-01-13 11:29:15: 管理员，我想问下，在li标签中，上下两个li的间隙怎么去掉啊！我的距离和填充都设为了0...list-style也是NONE; 管理员回复：这里哪有上下两个li呀，这是横向排列的

cyh0407(222.212.*.*) 发表于：2011-01-12 17:51:58: 老师你好，我是新学员，你们的网站真是为人师表之师表，比在网上看到的其他任何视频教程都简洁而层次分明，很能引导初学者入门，非常感谢。想问一个问题，第七课的代码在导航条内多增加栏目的时候不能自适应高度，若将overflow:auto;zoom:1;加在#manu lu中，则出现滚动条，这是怎么回事呢？; 管理员回复：嗯，不会

LEMON(116.231.*.*) 发表于：2011-01-07 10:22:30: 不是，只是因为想起您之前说过为避免IE6显示错乱而写的语句，所以询问下。; 管理员回复：这个是解决IE6兼容的一个方法

LEMON(116.231.*.*) 发表于：2011-01-05 10:43:40: 请问本页最后这例里面的代码【#menu ul li { float:left; margin-left:2px;} #menu ul li a { display:block; width:87px; height:28px; line-height:28px; text-align:center; background:url(/upload/2010-08/17/091033_nav_bg.gif) 0 -28px no-repeat; font-size:14px;}】中#menu ul li a 里是不是漏了float:left?; 管理员回复：是不是不兼容IE6？

lxdcf(124.162.*.*) 发表于：2011-01-02 23:29:58: 老师你好，新年快乐，请问有些导航的短竖线怎么做，特别是一些带颜色的短竖线; 管理员回复：用背景图片

tyfdesign(116.30.*.*) 发表于：2010-12-28 14:37:34: 里面的字数不一样是不是就不能做了; 管理员回复：不明白

wenghua52s(113.118.*.*) 发表于：2010-12-22 17:12:21: 标准之路是朋友告诉我的！感觉这个网站很不错!有时候想想自己太急于求成了！静布下来慢慢学！特别是自学！根本没有头绪！仿一个站到导航！源码保存样式表也下载了·可是就是·整布好·实在是纠结···老师有没有类似的仿站教程·; 管理员回复：如果你有头绪了，哪个站都能仿下来

luguangwei(113.120.*.*) 发表于：2010-12-21 16:21:05: 问下老师，a块状化后设置了边框，a:hover没有设置边框，实际预览会显示a的边框。是吗？我试过有时可以，有时不可以，为什么？; 管理员回复：hover状态没有边框的话应该设置为none，要不会继承a的属性

luguangwei(113.120.*.*) 发表于：2010-12-19 11:16:10: 问下老师，做列表导航最基本简洁的css有哪些？; 管理员回复：就是实例这些

lj880710(222.62.*.*) 发表于：2010-12-08 20:22:34: 老师您好....为什么我弄的横向导航菜单在网页宽度缩小到比导航窄的时候它会从右往左变成竖着的呢? 又没用办法设置让它就那样不动; 管理员回复：给父容器设置个宽度

leashion(113.92.*.*) 发表于：2010-11-26 15:30:29: 老师，您好！我按您说的步骤自己做了一下，发现我做出来的有点小问题，希望老师解答一下。当鼠标移到后面的导航时，显示的导航图片会比原来的小一点点像素，我仔细对过代码，所有的px值都和老师您的一样了，可还是会出现这种情况，请问这个问题会发生在哪里呢？; 管理员回复：你可以用本站首页常用提供的对比软件仔细对比下代码，看看哪里不同。之前有位同学，说写的和我一模一样，一个字也不差，就是效果出水来，我让他把文件给我发过来，仔细看了一下，还真是一样的，于是就用对比软件对比一下，发现我css里定义的是ul，他定义的是u1（1234的1），这能一样吗

leashion(113.92.*.*) 发表于：2010-11-25 17:24:50: 老师，您好！在这一章您说到“float让li向右浮动后，实现横向排列”，请问是这一句代码起的作用吗：#menu ul li { float:left; margin-left:2px;}?为什么我把这段代码加入到上一节竖向排列的代码中不会实现横向排列啊？只是li这整个标签左移了; 管理员回复：竖向排列时父窗口有宽度呀

zzy9988(221.221.*.*) 发表于：2010-11-20 19:04:09: #menu ul li a:hover { background:url(/upload/2010-08/17/091033_nav_bg.gif) 0 -56px no-repeat; 和这个有什么不同呀？？？？ #a1 ul li a:hover { background-image: url(image/1.gif); background-repeat: no-repeat; background-position: 0px -56px; }; 管理员回复：一个作用在#menu，一个作用于a1

zzy9988(221.221.*.*) 发表于：2010-11-20 18:59:52: #menu ul li a:hover { background:url(/upload/2010-08/17/091033_nav_bg.gif) 0 -56px no-repeat;} 和我这个有什么不同呀，两个最终显示结果是一样的呀 #a1 ul li a:hover { font-size: 12px; line-height: 28px; color: #00C; text-decoration: none; background-image: url(image/1.gif); background-repeat: no-repeat; background-position: 0px -56px;

wjxlzm(210.21.*.*) 发表于：2010-11-11 16:35:30: 请问老师，网页左右滚动图片，在IE浏览器可以滚动，但在谷歌浏览器里不滚动，怎么解决？请老师帮忙，谢谢！; 管理员回复：js不是本站的强项，请百度相关教程

jandz(218.85.*.*) 发表于：2010-11-09 22:25:08: 这个章节很不受，学习了~多谢~

ashuo(125.39.*.*) 发表于：2010-11-02 15:08:27: 本节学完，很不错！尤其用一张图来做导航菜单（滑动门），很简洁！继续学习……谢谢！; 管理员回复：欢迎继续学习

hfxiezhenhai110(180.152.*.*) 发表于：2010-10-29 14:26:22: #menu ul li a#current { ...}就这段,我的机子不能用,后来我把老师的拷贝了过来,还是不行,没办法我改成了这样:#menu .current { ... },虽然能用了,但是不知道会不会有不好的一面,所以请教一下老师.; 管理员回复：肯定不能用，我用的是ID，你的是class，能生效吗

tyfdesign(116.30.*.*) 发表于：2010-10-26 16:28:21: 我的意思是做那种自动的你那导航里面多加几个字就不行了啊; 管理员回复：请看下一节，讲解到了自动适应宽度

yinkuerkuang(111.77.*.*) 发表于：2010-10-19 09:35:21: 最下面的红线怎么来的; 管理员回复：看源代码呀

tyfdesign(183.39.*.*) 发表于：2010-10-17 13:35:05: 老师有没其他的方法做那种自由收缩的他里面有多少字会自由收缩的！; 管理员回复：自由收缩是什么意思？

ljokoyo(219.133.*.*) 发表于：2010-10-10 17:36:16: 请问这样行不行 <!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 {font:Arial, Helvetica, sans-serif 12px;} a{color:#2b2b2b; text-decoration:none;} #menu{height:36px; border:1px solid #000; background:#ff0000;} #menu ul{ margin:0; padding:0;} #menu ul li{list-style:none; float:left;} #menu ul li a{display:block; padding:0 10px 0 0; line-height:36px; background:#F00000;} #menu ul li a:hover{background:#0033CC; color:#000;} </style> </head> <body> <div id="menu"> <ul> <li><a href="#">首页</a></li> <li><a href="#">网页版式布局</a></li> <li><a href="#">div+css教程</a></li> <li><a href="#">div+css实例</a></li> <li><a href="#">常用代码</a></li> </ul> </div> </body> </html>; 管理员回复：不明白你想问什么

ljokoyo(219.133.*.*) 发表于：2010-10-10 17:23:23: 谢谢站长。请问你这网站程序是你自己的吗。很像DEDE 但你的页面是shtml 好羡慕; 管理员回复：是自己的

ahfygcz(117.67.*.*) 发表于：2010-10-09 07:33:49: 以前的看的不错，这节中有个a#current 这个没看明白，是个什么标签呀; 管理员回复：建议去查下css手册

wfynn(125.33.*.*) 发表于：2010-10-06 12:08:46: 老师，我做那个用北京美化导航的效果，用ie就不行，但是用firefox就可以显示，ie各版本都不行，开始我自己写的代码，后来我复制你的代码，也是的？求解，谢谢老师; 管理员回复：这个估计是图片的问题，你用ps打开文件试试，如果提示无法解析文件格式，很可能是改了图片的后缀名或者用的是cmyk颜色模式造成的，请重新制作图片

comayong(116.30.*.*) 发表于：2010-09-29 14:16:45: 很好的教程，很好的老师。谢谢站长无私的分享…… 通俗易懂，比起专业培训老师好很多！支持！; 管理员回复：谢谢肯定

jiang356(122.224.*.*) 发表于：2010-09-29 11:51:43: 真的很好的教程，点起广告来也很开心; 管理员回复：谢谢肯定

liyangabcabc123(59.61.*.*) 发表于：2010-09-26 14:51:01: 注册页面太暗了一点！呵呵！; 管理员回复：还算行吧

qqyy(121.28.*.*) 发表于：2010-09-17 16:08:24: 哈哈~真是一个好的网站~每次来学习的时候多要狂点一番广告滴~ 谢谢站长这么无私的奉献~！; 管理员回复：也谢谢你能点广告

smilebai(115.49.*.*) 发表于：2010-09-17 12:26:07: 终于知道为什么一个站那么多背景全部在一张图了,站长的教程太棒了,感谢站长带给我们这么多惊喜的体验~!; 管理员回复：顶

sdpengfei1018(60.211.*.*) 发表于：2010-09-12 11:36:29: 教程写得很棒啊。。。。很快就能学会，感谢站长; 管理员回复：不客气，欢迎常来

yutianzhixing(221.204.*.*) 发表于：2010-09-12 10:22:23: 哦对了，这个教程实在是太棒了，支持，我已经点了好多广告了，也告了朋友了，他们看了以后说我厉害，发现这样一个好站，我更觉得还是这个站的工作人员很用心！你们真的很牛，支持！！！！！; 管理员回复：谢谢肯定，欢迎常来

yutianzhixing(221.204.*.*) 发表于：2010-09-12 10:19:18: 万恶的IE6，怎么就淘汰不掉呢版主，坚决同意！索性就不管那些ie6的娃了，让他们明白，不升级就要挨打，上不了网！; 管理员回复：目前中国的现状，不管不行呀。就拿本站来说，访问的大部分都是专业人士，从统计中看，IE6还占绝大部分比重

FrankJi(59.33.*.*) 发表于：2010-09-11 15:19:54: 教程非常细致，认真，一步一步，清晰明了。就是手把手在教学。。非常非常棒的教程。。这个教程是所有教程的标准。。我非常非常喜欢。。; 管理员回复：谢谢肯定，欢迎常来

caiyanhua66(123.127.*.*) 发表于：2010-09-09 16:35:12: 非常好，我是一个初学者，我看了之后非常有收获。感谢老师！极度仰慕。我会推荐给我的好朋友的。; 管理员回复：谢谢呀，欢迎常来

dW520(219.133.*.*) 发表于：2010-09-07 14:40:03: 老师问下：为什么设置了margin:0 auto;还是居中不了。代码都检查过了郁闷......; 管理员回复：定义宽度了没有

石家庄(222.222.*.*) 发表于：2010-09-07 10:59:45: 再请教老师一下。要是只包含需要的代码，那CSS文件如何用呢。; 管理员回复：只包含需要的代码？什么意思？

石家庄(222.222.*.*) 发表于：2010-09-07 08:38:43: 要是A文件包含另一个B文件.B文件中的<html></html>和A文件中的冲突吧。提示有多余的</html>; 管理员回复：包含文件不需要只需要包含部分的代码就行，其它的不需要

石家庄(222.222.*.*) 发表于：2010-09-03 17:35:11: 就是这些<html></html><head></head>; 管理员回复：当然要了，第一节课说的很明确呀

石家庄(222.222.*.*) 发表于：2010-09-03 08:28:35: 请问老师，要是在一个文件中把导航文件部分包含进来。这个导航文件如何写呢。html基本语法还写吗？; 管理员回复：你说的html基本语法指的什么？

qianjiuwo(58.240.*.*) 发表于：2010-08-31 15:55:20: 弱弱的问下：我在给下拉列表的文字做链接时，总是会有上面li链接设置的背景图片，这样怎么解决啊？; 管理员回复：清除掉呀，请看下一节教程

lcj21(202.109.*.*) 发表于：2010-08-26 15:50:13: 我的神啊！我不仅看到了老师的CSS水平，也看到了他那出神入化的高超的PS技巧！极度仰慕中......; 管理员回复：多谢夸奖

123(113.241.*.*) 发表于：2010-08-26 14:47:18: 好久都没这样子用DW了。还是很强大的。

30701060(122.235.*.*) 发表于：2010-08-22 20:15:09: 老师您好，想请教个问题，那个横向图文列表在页面中显示时，当你滑到每一行的最后一张图时，会出现换行显示。而我自己照着你那样做时，如果滑到第一张图时，相应的它的下一行会出现一个空缺，滑到第二个时，下一行出现两个空缺，以此类推，除最后一张显示是完整的。我是五行四列排的18张小图。能否解释一下，谢谢！！; 管理员回复：这可能是由于划过之后总宽度改变所至，初始边框是1px，鼠标划过变成2px，那么需要从它的填充或宽度中减去1px，这样才能保证总宽度和原来一样

jiangzhigang(58.248.*.*) 发表于：2010-08-21 22:39:00: 很快，赞一个。

sun(119.98.*.*) 发表于：2010-08-21 08:53:46: 更新好快。; 管理员回复：呵呵，连着写了两天，存着呢

第七天　横向导航菜单

共有 68 位网友发表了评论　我要评论..

我要评论

推荐文章

热门文章

最新图片素材

最新评论文章

在线交流QQ群

第七天 横向导航菜单

共有 68 位网友发表了评论 我要评论..

我要评论

推荐文章

热门文章

最新图片素材

最新评论文章

在线交流QQ群

第七天　横向导航菜单

共有 68 位网友发表了评论　我要评论..