CSS网页布局入门教程11：带当前标识的标签式横向导航图片美化版

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

dongge19850609(202.100.*.*) 发表于：2011-06-09 15:46:46

你好，请问网站里面的图片如何下载？？？？

管理员回复：css里有图片路径

kicny(220.114.*.*) 发表于：2011-03-30 11:15:34

管理员，你太棒了。！我到大学学了3年，屁都不会。还当不到我来你这看3天！ 学了很多东西，自己也琢磨着搞了，太感谢你了。继续学习！不懂群上向 你们讨教哦！~~

管理员回复：欢迎常来

z88089(110.246.*.*) 发表于：2010-08-30 00:23:21

请问站长你的站是用什么语言写的？ASP？数据库是Access?

管理员回复：php+mysql

yeling(180.136.*.*) 发表于：2010-08-23 08:39:31

我想请问一下站长,我现在做的一个导航跟你的差不多,但我要左右两边是圆角的.中间全部是直角的,这个代码怎么写呢?<ul id="top_3"> <li id="top_3_1"><a href="#">首页</a></li> <li><a href="#">关于易速</a></li> <li><a href="#">信息中心</a></li> <li><a href="#">成功安全</a></li> <li><a href="#">建站方案</a></li> <li><a href="#">OA办公台</a></li> <li><a href="#">手机建站</a></li> <li><a href="#">营销推广</a></li> <li id="top_3_2"><a href="#">建站知识</a></li> </ul>这是导航内容代码 #top_3 {height:38px; list-style:none; } #top_3 li{float:left; } #top_3 a {color:#8c8c8c; text-decoration:none; display:block; width:75px; line-height:38px; height:38px; text-align:center; background:url(images/index_08.jpg); font-size:14px; font-weight:bold; } #top_3 a:hover {background:url(images/index_07.jpg); }这是CSS代码,我本想把两边圆重设ID,但是写进去的CSS没有效果.还是全部的直角.请问站长要达到两边是圆角该怎么写呢?谢谢!

管理员回复：你是加上ID了，但不定义样式能拿什么生效呀

fvck(120.32.*.*) 发表于：2010-08-10 16:59:31

总说看明白了，原来是一张图片变换位置的说，我还以为gif的变化怎么能用CSS控制了，站长是个“大忽悠”， 哈哈哈... 继续往下学习！

1383061ma(60.164.*.*) 发表于：2010-08-03 12:42:16

终于把这个学会了 谢谢啊！！！ 你们网站做的很好！很有实用价值！支持！！

管理员回复：欢迎常来

cocoat(124.231.*.*) 发表于：2010-07-17 14:17:54

楼主你好,请问怎么下载那张背景图片! 不是这张划过线的图片.

管理员回复：到源代码css里找图片地址

suwen(221.122.*.*) 发表于：2010-06-29 13:29:24

因为我看了你好多篇文章，好多里面都用了图片啊，所以我说好多图片都打不开。站长大人，要不换个能获取图片的其他方法？

管理员回复：这个就是最简单的方法，既然想学习，获取个图片不算什么呀

suwen(221.122.*.*) 发表于：2010-06-29 09:21:19

哎，你上次这样回答：“你把代码中的图片地址复制到浏览器地址栏不就打开了吗，下载下来就得了” 于是我把它复制到浏览器地址栏，但是很多都打不开。

管理员回复：里边不就用了一张图片吗，怎么会好多都打不开呢

suwen(221.122.*.*) 发表于：2010-06-28 09:39:28

好多图片都打不开啊？站长大人

管理员回复：哪里的图片打不开呀

suwen(221.122.*.*) 发表于：2010-06-25 13:29:53

好多文章中的代码都有链接的图片，管理员能不能把图片也放在文章中？我的意思是这样我们可以存下图片，或是参考着做图片，我想这样更方便学习，也能更好的达到效果，谢谢

管理员回复：你把代码中的图片地址复制到浏览器地址栏不就打开了吗，下载下来就得了

shrng11(60.178.*.*) 发表于：2010-05-28 20:46:53

管理员啊。。为什么我在这里留言它不会马上显示呢??不能同步可不好啊。。。然后我在说下我的问题。。这段程序在IE6里面无法显示背景图。然后我看了下CSS2.0的参考手册里面没有看到background里面的left和40px类似的属性呢。。所以不知道怎么回事。。望管理员帮忙解释下。

管理员回复：评论需要审核后才能显示的；请详细阅读手册

shrng11(60.178.*.*) 发表于：2010-05-28 18:18:16

楼主啊。。IE6没有背景图片的啊。。。快来修补下。。。等候您呢。。

管理员回复：什么意思

zhq10124(211.66.*.*) 发表于：2010-05-15 22:43:04

站长您好！我想问下如果我要加的导航条每个项都需要不同图片，那要怎么写？照您这个写的话只能全部一个图。。。

管理员回复：那就需要把每个li定义个id或class，然后单独定义样式

zhqy(117.82.*.*) 发表于：2010-05-12 18:57:01

又学到一招，多谢站长这么好的教程！

管理员回复：不客气

menghuanyuting(124.65.*.*) 发表于：2010-05-11 16:54:49

太感谢站长了，本以为CSS会很难，但是通过站长的详细的讲解，觉得并没有想象中那么难。看到这节有点难，看了好多遍才看明白，最关键的一句还是“默认背景图片以left top开始以四方连续形式铺开的”，现在终于明白了导航这种效果的实现，原来理解了竟是那么的简单。还有就是讲到一些固定的新代码时，希望站长可以标注一下，比如current以为只是随便取的一个名字，但是换个代码就没有效果了。还有a#current这种命名的规则是什么，多一空格就不起作用了。这节之前讲的都特别详细，从这节开始好像忽略了新的代码讲解。还是非常感谢站长的大公无私，这个网站是我见到过的最好的CSS教程网了。找到这样的网站，真是我们的福气呀，希望大家都能在这儿学到真正的知识，共同进步。再次感谢站长，站长辛苦了！

管理员回复：后来的章节之所以没有详细讲解，是以为学到这里就可以按照之前的内容很好的理解了，没想到出了这个障碍，最近推出的新手常见问题都都是详细讲解的。

maomao(123.160.*.*) 发表于：2010-05-11 10:23:47

站长您好！我刚学网页设计，对什么都不太懂！请问url后（）内的地址应该怎么添加呢？我在本地建了站点，背景图片存在了“images”文件夹里，地址栏应该怎么写呢？

管理员回复：你可以用dw的提示功能，然后选择图片，这样就不用管地址怎么写了，它会采用相对路径或相对于根目录路径来显示

lfseven(110.251.*.*) 发表于：2010-05-07 15:51:36

亲爱的站长，我就是看的红色部分不懂。楼下的 smmlfl的问题应该也是一样。请您在做进一步指点。2的左上角，为什么也可以是84px的位置

管理员回复：84是从坐标原点往上去，-42是往下去

smmlfl(218.58.*.*) 发表于：2010-04-15 10:10:26

请问一下站长，“要定位到2的左上角，可以从坐标的中心向下-42px，也可以是84px的位置。要定位到3的左上角，可以从坐标中心向下-84px，也可以是42px”这句话的意思我不是很明白啊，向下-42px是指1浮动到2的下面了吗？那移84px又是什么意思啊？谢谢站长

管理员回复：请看文中红色部分文字和图示

lfseven(110.251.*.*) 发表于：2010-04-14 17:40:50

2的左上角，我可以理解从坐标的中心向下-42px，但84px的位置怎么理解？请站长解答

管理员回复：请看文中红色部分说明和图示

chaiqing11(113.89.*.*) 发表于：2010-04-08 11:09:36

站长，多谢您的回复！我还有一个问题 #nav li a#current { background:url(/uploadfile/200806/17/66191858519.gif) left -84px; color:#fff;} 这一句，为什么不能用 a#current { background:url(/uploadfile/200806/17/66191858519.gif) left -84px; color:#fff;} ID不是唯一的么？

管理员回复：你可以试下，理论上可以，但实际当中，不加的话不生效

chaiqing11(113.89.*.*) 发表于：2010-04-08 01:32:59

站长您好，多谢你呢的教程，很受教！！！还要请教您一个问题。 #nav li { float:left;}这种我直接建一个复合内容为#nav li的CSS规则就可以了。 而#nav li a:hover { left -42px; ; color:#ffffff;} 和#nav li a#current {left -84px; color:#fff;} 这两句中的前半部分如何建立CSS规则？除了直接手写还有什么更快捷的方法么？ hover 跟current为什么一个是：一个是#

管理员回复：选中该元素后点击css编辑器上的新建，在名称处会自动插入如上的名称

EthanSC(118.119.*.*) 发表于：2010-04-06 17:18:11

一开始没看懂，后来仔细研究了背景图片，恍然大悟，其实相当于背景图上有个小窗口（其大小就是由a的width和height确定的），我们通过设置这两个坐标来控制窗口的位置，这个坐标也就就是窗口左上角那个点的坐标，坐标一变，窗口就跟着移动，显示的内容自然就变了，不知这样理解对不对？

管理员回复：窗口的位置是由left和top确定的，不是由width和height确定

fenghuazh(218.65.*.*) 发表于：2010-03-23 16:17:43

肯定有些人堆与 url 后边的两个参数还不明白，我想分享下我的我试验后的结果，不对还希望大家指正 首先要明白这两个参数是干嘛用的，这两个参数的作用是在图片上定位一个位置。以这个位置分别竖直向下和水平做一个坐标系，通过连个参数的正负开控制位置。具体是什么样的位置关系，自己尝试下就知道了

管理员回复：对，多试试自然就明白了

fenghuazh(218.65.*.*) 发表于：2010-03-23 15:08:52

我有问题，为什么我的图标的角不是圆的呢，能顺便说下margin和padding的区别吗

管理员回复：角不是圆的是图片问题，它们两个的区别是前者是外边距，后都是内边距

kstg(114.92.*.*) 发表于：2010-03-17 03:08:52

管理有没有更牛的导航帖出来瞧瞧

管理员回复：在本站找哟

shrimpsd(221.0.*.*) 发表于：2010-03-12 16:43:33

怎么让菜单居中？我在CSS中加#nav { margin-right: auto; margin-left: auto; }不起作用

管理员回复：给nav设置宽度了没有？

初学(202.111.*.*) 发表于：2010-03-05 15:20:21

四方定位，呵呵，第一次听，不过受教了，原图片，就在直角坐标系的第四象限中。

白菜(124.231.*.*) 发表于：2010-02-06 00:00:22

line-height:22px; height:24px; 请问站长这两个height有什么区别啊？

管理员回复：一个是高度，一个是行高

zhang xuguang(117.95.*.*) 发表于：2010-01-26 11:15:26

从坐标的中心向下-42px （浏览器实现的时候是图片向上42px），也可以是84px的位置（浏览器实现的时候是图片向下84px）。不知道我理解的对不对，我看了别人的留言觉得有点不确定

管理员回复：自已试一下不就清楚了吗，要多动手

zx(114.96.*.*) 发表于：2010-01-14 15:13:14

以前看过几次没看懂，今天看了管理员的详细讲解终于懂了，O(∩_∩)O谢谢

管理员回复：看来没看懂的都是没认真看，之前有些同学说没看懂，所以下边又加了红色部分说明和图示。再看懂我也没办法了

叮叮叮(218.20.*.*) 发表于：2010-01-12 01:35:05

大虾您好,想问下背景图的left,top.说是left是X轴,top是Y轴.我的背景图是2个样式纵向排列的,目的是a:hover时,背景图向上移28px就能变换样式.既然top是Y轴,a:hover时我应该要设top 28px,但设top的效果是X轴的移动,要设left才得到想要的效果,为什么?

管理员回复：前边你说对了，但后边写错了，如果需要向上移动28px，那么就直接用-28px，不再用top了，top和0相等

什么跟什么(58.246.*.*) 发表于：2010-01-11 10:27:15

为什么我在页面上直接运行是可以的。但是我把代码复制到Dreamweaver里面改个图片再预览就是不出这种效果。。

管理员回复：应该是图片定位的问题

长不大的菜鸟(121.233.*.*) 发表于：2010-01-08 15:36:22

管理员有点故弄玄虚了吧，我吧鼠标经过和当前a的属性坐标都设为零，结果照样出来正确的效果#nav li a:hover {background:url(images/1.jpg)left0px;color:#FFFFFF;}#nav li a#now{ background:url(images/2.jpg)left 0px;color:#fff;}图片是我自己做的，请问横坐标设为零为什么也能通过

管理员回复：你的是两张图片呀

菜鸟学习(124.89.*.*) 发表于：2009-12-30 11:49:32

#nav height:30px; #nav li a:hover { background:url(/uploadfile/200806/17/66191858519.gif) left -42px; }这里是不是把#nav的height作为一个 'box height',而图片的溢出部分包括原图中间这个高为42px的1/3图片多的那12px也裁切掉了？如果这样的话每个小图height用30px不就够了么？（ 你这篇文章对新手很有难度，我查了好些资料还不是很明白，）

管理员回复：其实这篇文章的核心就是背景图片定位问题，可以查阅css参考手册中相关解释，只要明白了定位，这节课就明白了

菜鸟学习(124.89.*.*) 发表于：2009-12-27 18:39:01

你忘了告诉我背景图像默认在X和Y全部平铺的，我想了半天。。。。

管理员回复：对，四方连续

海洋之星☆1(124.229.*.*) 发表于：2009-12-14 12:23:36

管理员你上面的运行代码好像没设置鼠标方面,但鼠标移上去可以变化,可我的也是按你说的那样怎么就不行呢!

管理员回复：鼠标移到上边时是hover样式，把hover设置好了就行了

jjing(58.246.*.*) 发表于：2009-12-10 15:42:46

为什么图片高度是24，而下移lfet -42 ，为什么不是lfet -48

管理员回复：自己动手测试下，应该会明白的

双节棍吧(59.54.*.*) 发表于：2009-12-01 14:51:52

一个模板,多个页面,每个页面怎么自动识别id='current',

管理员回复：一个模板多页面使用js

菜鸟(61.189.*.*) 发表于：2009-11-27 01:39:28

引用：#nav li a:hover { background:url(/uploadfile/200806/17/66191858519.gif) left -42px; color:#ffffff;}#nav li a#current { background:url(/uploadfile/200806/17/66191858519.gif) left -84px; color:#fff;}为什么你的直接用left 像素就能定位，我这就不行呢？还需要添加一个元素：background-po

管理员回复：我的是简写

22(218.85.*.*) 发表于：2009-11-23 15:06:07

乱乱乱,乱乱的

123(222.91.*.*) 发表于：2009-11-23 11:54:35

管理员好，你QQ号是多少呀，想加你！

管理员回复：有好多群的，交流的话可以加群里

123(222.91.*.*) 发表于：2009-11-23 11:16:57

管理员好，代码全是复制你的，只是换了一下背景，没效果，是咋回事？

管理员回复：已回复

xinxin(125.37.*.*) 发表于：2009-11-23 09:40:46

我把代码copy下来 改了一下链接地址 怎么背景图片不变呢？ 就是说怎样改变li的id呢？

管理员回复：用js或把ID放到当前页面的链接上

123(222.90.*.*) 发表于：2009-11-22 11:59:56

管理员，你好，我截了一部分你上面的图，重新替换下背景，怎么没效果

管理员回复：可能是背景定位不正确造成的

123(222.90.*.*) 发表于：2009-11-21 22:12:35

这个图片那来的呀

管理员回复：背景图片

Guest(121.9.*.*) 发表于：2009-11-14 17:38:16

参照www.meizu.com导航的时候，见到个这样的样式，请解答。怎么又是ID选择符，又是类选择符同时用，这个什么意思呢。#Mheader .h{width:960px; margin:auto; height:56px;}

管理员回复：#Mheader .h他这个写法是指选定id为Mheader下class为h的标签

Guest(121.9.*.*) 发表于：2009-11-14 17:18:00

能不能实现这样的功能-一小块图片，按这个图片的样式放大到我指定的大小作为导航背景色。

管理员回复：图片适合平铺那就让图片平铺呀

Guest(121.9.*.*) 发表于：2009-11-14 17:08:46

不理解这里：-42px是深颜色，84px是浅颜色，怎么这么取呢，定位到42px怎么知道取的图片的大小是我想要的。比如一副图片我要取某个区域作为一个颜色，另一个区域作为一个颜色，这样定位到某个点怎么能取到整个区域的图片呢

管理员回复：请看文中下面的红色文字。你好像还没有明白此例中的背景图片是干什么的

我要学习(123.180.*.*) 发表于：2009-11-13 16:55:11

#nav li a#current { background:url(/uploadfile/200806/17/66191858519.gif) left -84px; color:#fff;}这句代码中，a#current,没有必要要这个a吧。就用#nav li #current不行么？。怎么感觉那个a多余呢。以前你定义名称，标签就不出现了呀！

管理员回复：你去掉试试不就知道能否去掉了哟

海盗O小龙(125.32.*.*) 发表于：2009-11-07 08:05:14

管理员辛苦了，非常感谢你的教程，看起来很简单就能掌握，我会认真学完的！加油！

管理员回复：欢迎学习

Guest(58.249.*.*) 发表于：2009-11-05 10:21:23

谢谢管理了，这么辛苦哦

管理员回复：不客气，理解万岁

感谢！(218.19.*.*) 发表于：2009-11-01 10:15:41

深表谢意~~呵呵，管理员辛苦了！

管理员回复：不客气

sunny(218.242.*.*) 发表于：2009-10-22 15:34:47

很棒的一节，刚开始怎么都没看明白，把图片单独显示出来才发现奥妙所在。

民工(222.183.*.*) 发表于：2009-10-13 14:19:46

管理员辛苦了！！！

Glow(123.174.*.*) 发表于：2009-10-12 22:24:53

这节看的好吃力啊！呜呜！

管理员回复：对背景图片定位理解了就不难了

回忆过去(123.118.*.*) 发表于：2009-09-30 23:36:08

table学得差不多了，开始学div了，这个教程对挺有我有帮助，但有些地方我看不懂

管理员回复：慢慢来，看不懂的地方先略过去，回头再看时可能就明白了

我是坏人(222.90.*.*) 发表于：2009-09-27 12:14:56

可以提供一些网站的实例供参考吗？最好是成品，我们可以仿照着临摹一下

管理员回复：这个还没有

学习(122.241.*.*) 发表于：2009-09-23 14:16:46

原来是。。。3个背景图片效果你做成了1张图片 然后移动位置。。。。。。我汗。。。

管理员回复：不错吧，这样可以减少连接数

Guest(60.10.*.*) 发表于：2009-09-21 09:54:26

提个建议，建议站长把所用图片的联接改成网址的行式，那样的话把代码下下来研究的话也可以直接看到图片而不用下载

管理员回复：不管什么链接，直接另存为是存不到css中的图片的

jj(123.15.*.*) 发表于：2009-09-11 16:49:59

这个导航条是不是有浏览器限制啊？？

管理员回复：没有呀

D.PenG(117.80.*.*) 发表于：2009-09-10 17:19:07

left -42px; 是只表示靠左在y轴方向上的移动那如果是x轴方向的移动是什么？

管理员回复：把left改为相应的数值即可，记得加px

新手(124.66.*.*) 发表于：2009-09-10 15:50:40

原来你是把3张背景图片合为一张，明白了。

管理员回复：明白就好呀

新手(124.66.*.*) 发表于：2009-09-10 15:48:45

第一次来这里，不想用table了，今天开始学习div。这个教程对我有帮助，谢谢了。

管理员回复：不客气，欢迎来学习

凉风儿(125.67.*.*) 发表于：2009-09-09 08:22:09

我的是浏览器是ie8，为什么看不到效果，在你的代码中那些图片地址可不可以改成绝对地址啊？？？

管理员回复：我的也是IE8呀，显示正常，这和浏览器版本没关系吧

毛毛(58.56.*.*) 发表于：2009-09-07 17:25:17

好地方 多来

管理员回复：欢迎欢迎

ss(113.132.*.*) 发表于：2009-09-06 14:37:35

正在研究中。骄傲

D.PenG(58.208.*.*) 发表于：2009-09-05 13:33:20

请问left -42px; 是只表示靠左在y轴方向上的移动吧？

管理员回复：恭喜你，答对了^_^

小浩(60.14.*.*) 发表于：2009-08-21 18:58:05

哈哈，OK了，这个问题困扰我很久了，谢谢。以后常来这里，真挺好

管理员回复：欢迎欢迎

小浩(60.14.*.*) 发表于：2009-08-20 19:56:28

窗口缩小后，导航菜单的形状就变了啊，怎么解决啊

管理员回复：固定宽度呀，因为你实际当中做的页面肯定得有宽度，自适应的也有最小宽度吧

carry(123.118.*.*) 发表于：2009-08-19 16:18:13

我想问我在dreamweaver里面可以看到背景图片，但浏览页面的时候没有这个背景图片，不知道是怎么回事？

管理员回复：看你用的什么路径，如果是相对根目录路径，在dw里建立站点后是可以看到，浏览时需要借助iis才行。

Guest(123.12.*.*) 发表于：2009-08-14 16:17:51

恩 网站不错 对我帮助也很大。顶 ........

管理员回复：顶....

新手提问(116.28.*.*) 发表于：2009-08-12 11:55:57

那个问题我明白了,贵站做得真好,祝越走越好,呵呵

管理员回复：谢谢

新手提问(219.128.*.*) 发表于：2009-08-11 23:27:54

我是新手，对于left -42px和left -84px这里看不懂，能详细说下吗

管理员回复：请看文章内红色部分文字，如果还看不懂，我也没办法了

monkey(58.48.*.*) 发表于：2009-08-06 14:40:56

标准之路的那个小三角标识是怎么实现的?管理员能不能说得具体一点,我是刚刚入门者?

管理员回复：这两天问这个的挺多的，你可以结合本节教程再看下本站的源码，应该能看懂的。

monkey(58.48.*.*) 发表于：2009-08-06 00:16:43

标准之路的那个小三角标识是怎么实现的?

管理员回复：如果你有web标准基础的话，看本站的源代码，应该不难看出的

Guest(121.15.*.*) 发表于：2009-08-05 14:25:18

没搞懂你这个圆角是怎么实现的，背景图片没圆角啊。

管理员回复：背景图片有圆角呀

HEEl(121.229.*.*) 发表于：2009-07-29 13:56:35

不明白42 84这两个值的含义（就是这数值时怎么算的或为什么这么做）

管理员回复：请仔细阅读文章中红色部分文字，如果再不明白那我就更说不明白了。

广告投放(124.207.*.*) 发表于：2009-07-22 17:05:44

建议：做个建网页的整体教程。很想看

管理员回复：好的

XY(59.40.*.*) 发表于：2009-07-17 18:18:24

一直不明白一个问题...上面给的图片url是相对地址不能用..是不是上面的例子只是用来理解的?还是我漏了什么重点?

管理员回复：那是图片路径搞错了。不管相对地址还是绝对定位，搞对都能用。

小鱼(123.120.*.*) 发表于：2009-07-14 13:35:29

太好了，学习中

管理员回复：顶～～

新手学DIV+css(59.61.*.*) 发表于：2009-07-11 11:59:43

如果那张图片如果分解成3个图片，我想就应该不需要再设置属性高度了吧。。。。。。。。

管理员回复：不是不用设置高度，而是不需要背景图片定位了

richieiou5(119.4.*.*) 发表于：2009-07-05 22:20:05

搞不懂的去http://www.aa25.cn/uploadfile/200806/17/66191858519.gif看看原图就懂了。

管理员回复：是呀，可惜许多人就是不看，直接问

Guest(123.127.*.*) 发表于：2009-07-02 16:45:45

感觉有些难度啊,晕

管理员回复：是有点难度，不过认真看还是能懂的

Guest(58.59.*.*) 发表于：2009-06-30 12:23:11

请问怎么才能让导航条最靠左呀？

管理员回复：设置body和#nav的外边距为0,应该可以靠最左了

啊平(222.240.*.*) 发表于：2009-06-26 11:03:21

秦商(222.177.210.*) 我也想问他的这个问题 明明是竖着排列的 为什么用LEFT 定义图片像素 。。。

管理员回复：请认真看本文的红色部分及下面图示

Guest(60.160.*.*) 发表于：2009-06-24 23:59:58

我想加个群啊 我QQ10128687

管理员回复：现在应该能加了

Guest(117.25.*.*) 发表于：2009-06-20 08:29:56

好东西啊 赞

管理员回复：顶

AFTER雨(121.204.*.*) 发表于：2009-05-28 20:52:32

把#nav li a 里的font-weight:bold;放在#nav li a:hover 上 再#nav li a添加下font-family 悬浮时感观感觉更不错

管理员回复：举一反三

学浪飞(218.58.*.*) 发表于：2009-05-20 14:01:40

请教下管理员，为什么我把上面的代码复制到本地，就把背景路径改了下，出来不了网页上运行的效果呢？

管理员回复：请把问题描述详细些，我估计是背景图片没设置好。一种情况是背景图片路径错误，另外是定位问题

Guest(219.148.*.*) 发表于：2009-04-21 14:40:10

感觉用-42px代替84px比较好理解，O(∩_∩)O~

管理员回复：是这样，在文章中已加入详细说明

花儿(219.237.*.*) 发表于：2009-04-15 18:39:13

我做了一个背景图片，为什么浏览的时候没有任何效果呢？

管理员回复：图片路径是否正确，或者定位没定位好

新手(121.234.*.*) 发表于：2009-04-14 19:55:23

#nav { height:30px;}和#nav li a {line-height:22px;}这两个值有什么意义啊，去掉它们网页好像没什么变化？还有背景图片定位是怎么算的？谢谢

管理员回复：这两个都是有用的，#nav { height:30px;}因为它的了元素浮动后，它的高度将不以子元素的高度为准，那么当它下面有其它元素时，将以它的高度为基准，这样会显示重叠，所以需要设置父元素#nav的高度。{line-height:22px;}是设置行高，去掉后文字会贴着顶部显示的

junguo(219.136.*.*) 发表于：2009-04-13 20:08:08

请问图片怎么定位呢？谢谢站长的回答

管理员回复：图片定位请参考本站的css在线中关于background的讲解

Guest(58.221.*.*) 发表于：2009-04-09 16:47:57

background 后面的LEFT是以什么为基准切割这个图片的？不是按X,Y轴的吗，我看过别人后面是跟两个参数一般代表X和Y轴，想问下这里的LEFT代表什么含义？

管理员回复：是的，left表示x轴最左侧，相当于第一个参数为0

Guest(222.91.*.*) 发表于：2009-04-08 13:37:27

这个导航图片大小怎么确定？

管理员回复：图片大小是固定的呀

aa25(210.78.*.*) 发表于：2009-01-23 20:13:50

大家也可以加这个Q群9069149，大家有什么问题在群里可以聊啊，都是本站的技术精英。讨论关于div+css的技术问题，进来一起学习吧

管理员回复：群号公布在网站底部了

zerone(222.62.*.*) 发表于：2009-01-22 15:31:13

真是绝，三个状态用一张图片~佩服~

管理员回复：现在大网站都流行这种哟，可以节省连接数。淘宝、腾讯都是这样用的。

jine(219.135.*.*) 发表于：2009-01-07 12:58:40

在div+css中如何用css控制文字的垂直居中?在DREWMWEAVER中设置了也无效,有没其他办法?望帮忙解决.谢谢!

管理员回复：关于垂直居中本站提供了一些文章，你可以搜索一下

奋斗(59.33.*.*) 发表于：2009-01-02 11:45:15

#nav li a:hover 的 left 84px; color:#ffffff; 解释下。

管理员回复：color是定义字体颜色，left 84px背景图片定位

奋斗(59.33.*.*) 发表于：2009-01-01 15:09:44

我自己做一张高光的图片。但是就是做不出站长你这种效果。可以把图片发出来给我们下载吗？谢谢

管理员回复：图片地址在css的背景图片里有路径，你自己下载下来就可以了

some water(124.227.*.*) 发表于：2008-12-19 17:27:57

我在做的时候没有版主的图片材料 要是以后版主也能提供材料就好了我自己做了一个图片 可是没有做出版主的效果 我吧current换成亮一点的图片 但是图片还是不显示 而是显示背景而已 我不知道哪里做错

管理员回复：图片的话你可以在css找到图片路径，下载下来就可以了。不显示可能是图片定位错了

selina(124.92.*.*) 发表于：2008-12-16 10:09:35

站长，您是做了两张图片的吗？可是我看路径里都是同一张图片啊...怎么回事啊？

管理员回复：是一张图片，把两种状态放到一张图片上，分别用css控制显示图片的不同位置。也可以用两张图片

wpz(124.156.*.*) 发表于：2008-12-16 10:03:42

请问下，能不能自动的转到其它的页面上呢？

管理员回复：自动转的话有两种方法，一种是用程序，如asp判断；另外一种是用js来判断

回复wpz(123.118.*.*) 发表于：2008-12-15 21:07:24

回复wpz：这个当前页面标识用，当你转到其它页面上时，把标识放到这个页面对应的菜单上。

wpz(124.156.*.*) 发表于：2008-12-15 20:43:16

站长，我想问下，里面不是有一个 主页 和#nav li a#current { background:url(images/te3.jpg) left 42px; color:#fff;}这个<a id='current'那当我转到“DIV+CSS教程”是不是id='current'也到了“DIV+CSS教程”这个页上？

selina(124.92.*.*) 发表于：2008-12-15 14:19:54

谢谢站长，我现在能把图片放进去了，鼠标移动，背景图片也跟着改变，可是效果还不是您做的那样啊，您的效果是鼠标放上去图片像是变亮了，可我的没有那种效果出来啊。。

管理员回复：变亮是你把图片做亮些，当鼠标放上时定位到亮的图片上就行了。

selina(124.92.*.*) 发表于：2008-12-15 14:02:08

站长，图片那个地址我看不明白，所以找不到那个图片，但是我自己做了一个图片，放代码里，可是看不到效果，不知道为什么啊？还有那个图片定位的方法，我也是不怎么明白，怎么办啊？

管理员回复：这样的话说明你对html代码还很不熟悉，建议你再巩固一下html知识，还有css。定位是background的定位方法，你查一下本站的css手册中的background的用法就明白了

新手(123.112.*.*) 发表于：2008-12-11 00:27:09

管理员很热情，非常感谢帮助。看来一下资料，画个十字坐标就明白了。左负右正，上正下负。这里84px，可以改成-42px.

管理员回复：明白就好

新手(61.148.*.*) 发表于：2008-12-10 14:17:17

很费解~？#nav li a:hover { background:url(/uploadfile/200806/17/4C162031907.gif) left 84px; ; color:#ffffff;}84px 为什么是从图片下面往上84px

管理员回复：这个是背景图片定位的方法，你可以从CSS手册中查询background的用法就明白了。

Guest(222.131.*.*) 发表于：2008-12-09 15:44:02

那个GIF图片是可以自己设制的对吗?

管理员回复：当然了

haijun(58.33.*.*) 发表于：2008-12-03 22:11:42

这个 gif背景图怎么得到啊 我是初学者 希望指教! 这个网站真好

管理员回复：源代码内的css内图片地址哟，请仔细查看一下源代码就找到了

巫云(218.58.*.*) 发表于：2008-12-03 15:35:09

哦，这样啊，通过设置left显示图片的不同部分。学习了～！

管理员回复：找到答案了，以后要常来哟！

秦商(222.177.*.*) 发表于：2008-06-28 13:32:46

还没回答我的问题呢？#nav li a:hover { background:url(/uploadfile/200806/17/4C162031907.gif) left 84px; ; color:#ffffff;}为什么要用left来控制位置，而用top不行，4C162031907.gif这张背景图明明是竖着排列的。

管理员回复：建议您再熟悉一下css书写规则，left 84px;第一个参数表示左右方向，而第二个表示上下方向，即背景图片距左侧为0,距上为84px。欢迎您继续关注本站

管理员(124.126.*.*) 发表于：2008-06-24 15:57:52

回复秦商：不是没有显示完，而是评论限制了字符，超过250字将被截断了。现在改为400字了。

秦商(222.177.*.*) 发表于：2008-06-24 15:24:44

评论限制了内容长度,看不完整哦.

秦商(222.177.*.*) 发表于：2008-06-24 15:08:45

#nav li a:hover { background:url(/uploadfile/200806/17/4C162031907.gif) left 84px; ; color:#ffffff;}#nav li a#current { background:url(/uploadfile/200806/17/4C162031907.gif) left 42px; color:#fff;}为什么要用left来控制位置，而用top不行，4C162031907.gif这张背景图明明是竖着排列的。这