第六天　html列表

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

larry(60.166.*.*) 发表于：2011-08-02 16:12:55

四、 浮动后父容器高度自适应 里面那个链接 好像错了 能弄下么

RabbitXiaoQing(27.43.*.*) 发表于：2011-07-28 18:01:53

RabbitXiaoQing()老师，我做了一个三行三列的图文列表。当鼠标移到第一、二列时，不会出现异常；但当移到第三列的前两个图上时，它的下一行的前两个图会自动向下移动一行，请问老师这是为什么，能不能帮我解决一下，谢谢！(这个评论框太小了，代码拷不过来。。)

RabbitXiaoQing(27.43.*.*) 发表于：2011-07-28 17:58:20

RabbitXiaoQing()

valkerchina(219.136.*.*) 发表于：2011-07-12 16:19:18

老师，为什么我在弄第二小节的时候，在DW中可以看到载入德图片，浏览器预览就没有看到了，这是为什么呢？

管理员回复：图片路径问题

antsean(222.210.*.*) 发表于：2011-07-06 16:54:51

你好，请问#layout ul li a { display:block;}有何用呢？我将它却掉了在ie6和8下未发现异常

管理员回复：热区变了

hushaoju(113.57.*.*) 发表于：2011-06-24 12:55:55

你好，在 三、 横向图文列表 中，为什么添加将三亚两个字换成英文的就会往右边排列啊？只要有英文字符，就会排到图片的右边去，而不是下面。请指教。（用自己的代码和你的代码都是这样）

管理员回复：把图片添加display:block就行了

19084477(220.163.*.*) 发表于：2011-06-21 19:24:20

老师，今天学这一节的时候我有一处不明白。就是定义img { border: 0px;}这里，因为我现在还不能全靠手写代码，所以很大程度上还依赖CSS编辑器，这个属性应该在“边框”中设置吧，但是其它地方找不到设置border的地方，所以最后就成了这样了img { border-width: 0px;}，不过最后浏览的效果都一样，这样有什么弊端吗？ 另外我把 img {border-width: 0px;}这部份样式删掉再浏览，图片上也没有边框啊。是怎么回事？

管理员回复：删除掉后加链接就有边框了，我的是简写，出来的效果都一样

zz1202zz(58.49.*.*) 发表于：2011-06-16 05:03:54

谢谢，overflow:auto; zoom:1; 这个已找到答案。。

zz1202zz(58.49.*.*) 发表于：2011-06-16 04:26:58

老师 浮动后父容器高度自适应中的 overflow:auto; zoom:1;应该放在哪个地方？

管理员回复：放在父容器上

birdcs(59.174.*.*) 发表于：2011-06-06 16:32:17

老师：好像有bug，我的浏览器是IE7，最后的代码运行后，鼠标移到第4列图片上，出现其它图片后退的现象，老师试试看，其它浏览器没问题。

管理员回复：我试了没有出现，如果出现可以把li定义个高度，并设置超出隐藏就可以了

ahko001(113.67.*.*) 发表于：2011-06-02 19:28:27

ul,dl,dt,dd,h1,h2,h3,h4,h5,h6,form { padding:0; margin:0;}这段代码可以删掉吗 要是不可以删掉，可以说说具体作用吗 小弟不太明白

管理员回复：标签重定义

ahko001(113.67.*.*) 发表于：2011-06-02 19:27:41

ul,dl,dt,dd,h1,h2,h3,h4,h5,h6,form { padding:0; margin:0;}

lwh889(113.109.*.*) 发表于：2011-05-30 09:21:08

老师好，做 横向图文列表时，我做的是2行。上面6副图，下面2副图。当我把鼠标移到第一行第一个图时，下面的2个图同时向后退，是怎么回事啊？改了好久，也没找到毛病。谢谢！ 管理员回复：如果搞不明白，就先完全按照本站的实例来做，把每个样式的作用都搞明白了，再扩展 这个问题貌似是#layout ul li a:hover img增大了border:2px ，如果改为0或1，就不会发生了，这是不是浮动的问题把图片给卡住了？

管理员回复：那应该是当鼠标放上后，总宽度发生了改变，造成现在的位置容纳不上，才把后边的挤跑了

seasky190(123.114.*.*) 发表于：2011-05-27 04:59:30

顶一下

管理员回复：顶

primecyg(123.144.*.*) 发表于：2011-05-24 14:37:34

这个网站确实不错，值得长期浏览学习！

管理员回复：欢迎常来

yjj453458624(218.65.*.*) 发表于：2011-05-23 16:12:26

老师好，做 横向图文列表时，我做的是2行。上面6副图，下面2副图。当我把鼠标移到第一行第一个图时，下面的2个图同时向后退，是怎么回事啊？改了好久，也没找到毛病。谢谢！

管理员回复：如果搞不明白，就先完全按照本站的实例来做，把每个样式的作用都搞明白了，再扩展

doremi(183.45.*.*) 发表于：2011-05-22 22:00:57

老师好！ 怎么解决鼠标移动到上边时的整体宽高和默认状态时的整体宽高不一样的问题啊？

管理员回复：把边框、内边距、外边距在默认状态和鼠标划过时总宽度一样就解决了

549903832(113.227.*.*) 发表于：2011-05-10 10:56:21

老师。我想问下 overflow:auto; zoom:1; 这个的具体范围是。我加在body 是不是整个页面有效啊。

管理员回复：好像不是的，你试下不就清楚了

qiaojunxiang(58.51.*.*) 发表于：2011-04-28 11:55:29

横向图文列表中 去掉排序前面的点 为什么不能再 #layout ul {}中设置呢 只能再全局样式ul中设置 老师 我很费解

管理员回复：可以的呀

liumingwei2009(111.4.*.*) 发表于：2011-04-23 00:32:28

有没有图片提供下载，自己的图片大小不合适。我想做个例子，留着以后参考。

管理员回复：直接下载不就行了吗

wujing(119.139.*.*) 发表于：2011-04-22 10:57:58

教程写得很好

管理员回复：谢谢肯定

pp552594996(115.60.*.*) 发表于：2011-04-16 17:09:37

老师您好，按照您写的这个教程我原原本本的做了一遍 最后发现一个小小的问题 就是文字“三亚”是一个区块连接 它所在的连接区域宽度和它上面的图片链接区域宽度一样， 并且公用一个连接 问题出来了 由于之前把图片设置 margin-bottom:3px 于是我做的效果就是 在三亚链接区域和图片连接区域之间的区域鼠标经过时没有连接 即鼠标箭头没有变成手型 而老师您的没有这种问题 我哪里做错了呢？

管理员回复：换成padding试试

rdyb120(218.73.*.*) 发表于：2011-04-01 15:00:44

这个教程写的非常好！！有个问题请教管理员 第三横向图文列表： 做的效果鼠标放在图片上面下面文字也跟着变色，鼠标放在文字上面，上面图片也变色。我想请问鼠标放在图片上面下面字不变色怎么弄呢？鼠标放在字上面图片不变色我改了下CSS，把#layout ul li a:hover img { padding:0px; border:2px solid #f98510;}改成#layout li a img:hover{border:2px solid #f98510; padding:0px;}，请问这样写可以吗，还有刚刚提到的问题，谢谢

管理员回复：你把图片和文字分开放两个链接不就得了吗

winding(218.56.*.*) 发表于：2011-03-18 16:20:40

站长关于自适应，也可以先设一个class类：.clear {clear:both;height:0;font-size: 1px;line-height: 0px;}, 在</ul>后加一段<div clas=clear></div>也同样效果。但我就不知它与你讲的overflow:auto; zoom:1;这种方法有何异同！！！

管理员回复：这种方式也很好。区别是一个需要插入html代码，一个只需设置css。

ws5353(120.199.*.*) 发表于：2011-03-18 14:54:35

我做了三行图片，为什么在显示的时候，鼠标经过第一二行的时候，它下排的图片都会往下移动，这个是什么原因呀？

管理员回复：鼠标移动到上边时的整体宽高和默认状态时的整体宽高不一样

jarod112530(118.119.*.*) 发表于：2011-03-18 14:47:06

jarod112530 很感谢站长的教程，我想请问一下站长。为什么最下面一段代码效果里。鼠标移到最右边一张图时下面的其它图片的位置就乱跳了呢？我搞不懂。

管理员回复：限制一下每个li超出隐藏就行了

xiangone(59.57.*.*) 发表于：2011-03-02 23:47:51

火狐下面会变形哦！！~点前面3个，下面的3个会跑到最后去··为什么会这样·站长火狐试了吗····

管理员回复：定义个高度并超出隐藏就可以了

zeng2011(61.190.*.*) 发表于：2011-02-15 16:12:37

教程写的太好了，很强大！

管理员回复：谢谢肯定

yvhkaes(113.3.*.*) 发表于：2011-01-28 17:53:12

为什么我弄的图片下面不显示字？

管理员回复：会不会是高度问题

sstao(119.183.*.*) 发表于：2011-01-25 01:05:01

#layout ul li a:hover img { padding:0px; border:2px solid #f98510;} 管理员你好，为什么这里面的padding：0px； 修改成1px或别的数字，就会出现页面错乱啊，还有当#layout ul li { width:72px; float:left; margin:20px 0 0px 20px; display:inline; text-align:center;}把width：72px；修改成172px的时候，三亚那个字不居中了啊

管理员回复：保证在鼠标经过时和默认状态总宽度一样就不错乱了

misadancer(120.195.*.*) 发表于：2010-12-31 10:36:59

没有加overflow:auto; zoom:1;上一步加完layout的边框就自动撑高了啊··

管理员回复：不太明白

weigeqing(119.40.*.*) 发表于：2010-12-13 12:25:41

我再测试3 横向图文列表 时，发现点击每一行最后一个的时候就出现例子里的问题- 换行。 我把overflow加上 还没解决，怎么能换行呀

管理员回复：我这儿正常呀

muzifeng55(60.166.*.*) 发表于：2010-11-25 15:37:33

站长，请教下，如何才能让子级元素，不受父级元素的样式影响呢？我遇到不少这样的情况！有没有属性可以类似清除浮动那样的来不受父级样式影响呢？

管理员回复：如果是这种情况，说明你的结构规划不合理，如果合适的话根本不用去清除子级元素的属性的或者极少遇到

aiy778(60.215.*.*) 发表于：2010-11-21 21:48:39

我有个迷惑就是 三亚两个字我的为什么不在下方，而在右侧呢，老师，请解惑。

管理员回复：li的宽度太大了，因为图片是内联元素，这样如果图片后边的宽度能容纳下文字的话，那么它就显示到后边了

winding(218.56.*.*) 发表于：2010-11-17 11:45:13

#layout ul li a:hover img { padding:0px; border:2px solid #f98510;} 中border:2px改为border:1px后，用鼠标点每一行最后一个图时就会变形，不知为什么？

管理员回复：什么浏览器，我测试怎么没有发现呀

winding(218.56.*.*) 发表于：2010-11-16 18:59:06

#layout ul li a:hover img { padding:0px; border:2px solid #f98510;} 中border:1Px时鼠标放到前三个图时没有问题，放到每一行的最后一个图时就变形，这是为什么呢？

管理员回复：可能是整体的宽度改变造成的

weixiang0407(114.229.*.*) 发表于：2010-11-11 17:55:21

有一点我不理解 把列表浮动设置为左对齐 为什么会以横排显示 ~

simmelog(123.138.*.*) 发表于：2010-11-09 00:02:27

管理员，你好。我按照你的进行图文排列，测试在本地正常。但是上传到服务器就错位了。我研究了2天，测试了几百次都没有效果。请你给我指点迷津？

管理员回复：这个得看源代码了

avada2010(222.90.*.*) 发表于：2010-11-04 06:03:43

就是没有把鼠标放上去边框变成2px 实线 橙色的效果了

管理员回复：那就仔细对照一下例子，如果实在想不通，可以先不用管，知道怎么用就行了，等相关知识知道的多了，自然就明白了

avada2010(113.139.*.*) 发表于：2010-11-02 11:40:45

a { color:#05a; text-decoration:none;} a:hover { color:#f00;} 老师你好！为什么我没加上面两句，下面这句就不起作用了： #layout ul li a:hover img { padding:0px; border:2px solid #f98510;}

管理员回复：哪里不起作用？

avada2010(222.90.*.*) 发表于：2010-11-01 10:37:47

改成文字试了没有用？为什么我的就自动适应了呢？不用加overflow:auto; zoom:1; 我的ie6是6.0.299.5512版的。

管理员回复：那你可以不加

yunan1277(183.11.*.*) 发表于：2010-10-26 15:53:21

这课中，“三亚”字符如何设置就排到图片的下方了，因为哪步的设置？？ 我现在学习特别迷惑css样式设置中关于边框，方框，边界，填充选项的设置，想像不出来它们对于定位的效果！愁啊.....

管理员回复：迷惑就多动动的呀，比如把li的宽度增加或缩小看有什么变化

avada2010(113.132.*.*) 发表于：2010-10-26 09:04:48

在ie6下没加overflow:auto; zoom:1;这段代码，正常显示，高度自适应，加了反而多余了？为什么我没有出现超出容器呢？ 管理员回复：不加和效果图完全一样吗 和效果图一样啊,和最后一张一样

管理员回复：你把里边的列表全改成文字试试

yanjun172(119.144.*.*) 发表于：2010-10-25 10:34:22

<li><a href="#"><img src="/upload/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li> 上面这行里面的三亚改成数字或字母 样式就不对了 ,中文没问题,英文或数字就变成图片和字是一排的, 你试下就知道我的意思了

管理员回复：把img增加个display:block属性

avada2010(61.150.*.*) 发表于：2010-10-23 10:34:49

在ie6下没加overflow:auto; zoom:1;这段代码，正常显示，高度自适应，加了反而多余了？为什么我没有出现超出容器呢？

管理员回复：不加和效果图完全一样吗

ewade(113.65.*.*) 发表于：2010-10-22 13:13:14

管理员 您好，像这个直接用ul li展示产品的图片与文字（两行，名字和价格）是不是不太适合，您任务还有什么更好的方法吗？谢谢。

管理员回复：这个看你怎么规划设计了

lv2997924(27.45.*.*) 发表于：2010-10-21 15:57:08

管理员你好，我想问下“三亚”两个字如何显示在图片之下的，我自己试验一下，结果显示在右边了，我想知道你上面的CSS代码中，是哪条代码起作用？谢谢！

管理员回复：定义li块级的宽度正好是图片的宽度，或者设置图片样式display:block，或者中间加br

kkkolll(119.144.*.*) 发表于：2010-10-18 12:53:53

我怎么觉得用TABLE省事多了，仅针对这种做法来说

管理员回复：个人习惯吧，相对来说这种办法程序实现更简单

jie1234yan(114.247.*.*) 发表于：2010-10-13 11:41:10

管理员好，我想问一下，我按照这篇文章的方法做了一遍，html文档中共有12个img，#layout的width=400px的时候，在IE中浏览，12个img就自动的被分成3行。为什么有的img在鼠标划过时会在下方显示多余的图片呢？而多余的图片是在html中没有定义的啊。

管理员回复：鼠标划过时更改了边框粗细，那么相应该减少内边距，这样才能保证总宽高相同

sstao(122.5.*.*) 发表于：2010-10-12 09:32:21

老师 横向图文列表里面 为什么要把width设置成72px那，设置成72px的依据是什么那？ #layout ul li { width:72px; float:left; margin:20px 0 0px 20px; display:inline; text-align:center;}

管理员回复：根据效果图得来的

dgqs(125.110.*.*) 发表于：2010-10-08 14:58:06

现在DIV+CSS讲完 接下来会出什么系列教程 很期待

管理员回复：暂时告一段落

zhangyaozhong(59.108.*.*) 发表于：2010-10-07 23:31:56

您好 请问为什么title不能是英文或者数字了， 要是英文和数字的话就并排了；而中文“三亚”却可以的，这个是为什么了？麻烦能回答稍微详细点么，实在是想不通的了。谢谢了 呵呵

管理员回复：你说的title指的什么？

seven1207(121.61.*.*) 发表于：2010-09-27 09:49:37

引用： { 一、ul无序和ol有序列表 无序列表是web标准而已中最常用的样式，代码如下：} “web标准而已中”是不是多了两个字“而已”。 挑个小小的错误。

管理员回复：谢谢指正，是布局，用五笔打的没选择

pkkgu(113.81.*.*) 发表于：2010-09-21 10:20:25

<li><a href="#"><img src="/upload/2010-08/17/pic.jpg" width="68" height="54" />0三亚</a></li> title如果是以数字开头会出错哦？？ 0000000三亚

管理员回复：在ie8下没问题，如果是跑到和图片一行的话，请在#layout ul li a img样式增加display:block属性

kylin87(123.14.*.*) 发表于：2010-09-19 11:57:21

作者写得非常好，很明了。谢谢。 比较适合新手，我一般直接看代码了。呵呵

smilebai(115.49.*.*) 发表于：2010-09-17 11:59:15

有学会了不少东西,以后会长来的

管理员回复：欢迎欢迎

SMILE(122.228.*.*) 发表于：2010-09-16 18:03:54

ihom(218.107.*.*) 发表于：2010-08-18 16:08:26 #layout ul li a:hover img{`````} 请问楼主这样定义是什么意思呢？ 管理员回复：鼠标划过时img的样式,不知道为什么IE6没效果

管理员回复：应该有效果的

永现自我(123.118.*.*) 发表于：2010-09-15 13:17:28

为什么我做的那个图片边上的字总是在在左边，而没有在正下面，而且图片在DIV里排列特别的乱

管理员回复：不知道

flymouse0216(218.76.*.*) 发表于：2010-09-14 21:38:31

哦，是我把显示器分辨率搞得太低了，旁边的垂直滚动条没看见，下面的内容没看，呵呵,sorry

flymouse0216(218.76.*.*) 发表于：2010-09-12 20:43:32

请问为什么#layout ul li要加个属性display:inline，难道是要把li从块级元素转为内嵌元素吗，有什么作用？

管理员回复：兼容IE6的双倍边距bug

asf(219.133.*.*) 发表于：2010-09-06 18:06:52

为什图片的显示那么卡！

管理员回复：多

yier202(60.166.*.*) 发表于：2010-09-06 14:31:40

管理员 line-height:1.5是1.5倍行高还是什么？这样写符合W3C标准吗？

管理员回复：1.5倍行高，符合标准

shrng11(60.12.*.*) 发表于：2010-09-05 11:23:51

请问。#layout ul li { background: url(/upload/2010-08/17/icon.gif) no-repeat 0px 4px; padding-left: 20px; } 里面的no-repeat 0px 4px;是什么意思。。我不是很理解。

管理员回复：请看前几节教程，或者查看css手册

shrng11(124.160.*.*) 发表于：2010-09-05 11:11:51

为什么贵网站的页面不能用键盘的方向键来进行上下的移动操作呢。。。我觉得这样非常的不方便。。

管理员回复：可以呀，鼠标在页面两侧的空白区域点击下就可以了

pkkgu(59.33.*.*) 发表于：2010-08-31 13:41:01

1.演示运行代码，里的图片地址，哪果是决对地址就更好了，方便复制到本地测试 2.横向图文列表，上面在加一行就好了，例如栏目名称！

管理员回复：你前边加上网址不就是绝对的了

dgqs(60.181.*.*) 发表于：2010-08-26 09:34:14

引用:dgqs(60.181.*.*) 发表于：2010-08-25 16:21:31 ------------------------------------------------------- #layout ul li a { text-decoration: none; color:#000; } a { text-decoration: none; color:#000; } 我是这个意思 请问这样两种写法是不是一样的为何显示效果不一样 先声明:页面只有一个<a>标记

管理员回复：对，是一样的，显示效果也一样呀

dgqs(60.181.*.*) 发表于：2010-08-25 16:38:46

在IE6下 如果不定义 a:hover{} 就算定义了a:hover img{} 显示出不来边框的颜色,这是为什么

管理员回复：不应该的

dgqs(60.181.*.*) 发表于：2010-08-25 16:21:31

#layout ul li a { text-decoration: none; color:#000; } 为什么这样设置,在IE6下鼠标经过没有显示边框,把颜色去了或者这样写 a { text-decoration: none; color:#000; } 就行了 IE8全部正常

管理员回复：这个就不是定义鼠标经过的样式的

dgqs(60.181.*.*) 发表于：2010-08-25 15:49:34

UL 为何也要设置 margin:0px; padding:0px; li 这个设置为什么不行

管理员回复：请看http://www.aa25.cn/div_css/881.shtml

iloveaa25(111.194.*.*) 发表于：2010-08-20 00:45:42

找到了这里,我知道,我找到了希望.十分谢谢网站的编缉,内容,网站界面也很好,连广告都少的感觉不到.好网站.

管理员回复：欢迎常来，并多多宣传小站

guamin(221.4.*.*) 发表于：2010-08-19 11:24:30

display:inline请问楼主这样定义是什么意思呢？

管理员回复：转换为内联元素，这里用作兼容IE6用。详细解释请查手册

liyuan0294(113.116.*.*) 发表于：2010-08-19 02:31:16

期待更新，太好了。谢谢站长

管理员回复：会更新的

like (113.116.*.*) 发表于：2010-08-19 02:27:30

除了好字 ，没有别个可以形容了。期待更新。这么好的东东我一定会大力宣传的。力挺

管理员回复：谢谢啦

blue217(60.191.*.*) 发表于：2010-08-18 17:57:18

非常感谢啊~~我学DIV纠结好久``好多次都放弃了，没想到这次有这么通俗易懂的教程，帮了我一个大忙哦！！希望赶紧更新哦~每天盯着！

管理员回复：会更新，希望多多宣传小站

ihom(218.107.*.*) 发表于：2010-08-18 16:08:26

#layout ul li a:hover img{`````} 请问楼主这样定义是什么意思呢？

管理员回复：鼠标划过时img的样式

lyt(218.7.*.*) 发表于：2010-08-18 08:56:51

呀，没评论我第一个，好好好~更新了，我要学习呀~