当前位置:首页 > 文章评论 > 评论内容

第三天 二列和三列布局

共有 211 位网友发表了评论 我要评论..
zoushengjiao(124.161.*.*) 发表于:2014-05-20 22:15:04
站长,左右列固定,中间液态这个例子,前两个DIV可以平行,为什么第三个就在下一行了?只能通过把上边距改为“-200”才可以,这种做法可以吗?
fjcdefg(116.224.*.*) 发表于:2014-05-18 10:38:39
站长,讲解巨细哇~~~顶
student(183.24.*.*) 发表于:2014-05-10 10:52:25
我不明白第四那里 为什么设置margin-left:后,它就不会跑到#side的正文呢?就是那个图片跟文字那个~~~求解答~~~
heisesin0ff(218.21.*.*) 发表于:2014-04-18 23:47:32
站长,,3列那个,为什么前两个可以同行,,最后一列总是跑到下面单独一行啊。。。。
heisesin0ff(218.21.*.*) 发表于:2014-04-18 23:46:38
请问站长:我都按照上面所说的做了,为什么三列不是并排在一起的?side1这个div在下面,而side和main在上面?请解答。
123qiwu456(110.182.*.*) 发表于:2014-04-13 19:30:35
body{margin:10} #main{width:120px;float:left;background:#0F0} #footer {width:120px;float:right;background:#C69} #side {margin:0 120px}效果不同
cao(112.253.*.*) 发表于:2013-12-19 11:38:07
cjybai(110.52.*.*)你的前后循序不对
brookg(211.140.*.*) 发表于:2013-12-15 19:01:43
本来是临时抱佛脚,没想到学到的东西超乎想象,感激涕零,不知所言。
cjybai(110.52.*.*) 发表于:2013-09-07 20:29:05
站长,,3列那个,为什么前两个可以同行,,最后一列总是跑到下面单独一行啊。。。。。
liliang0008(183.15.*.*) 发表于:2013-07-21 18:01:58
站长,您好!看了您的教程后使我对CSS和DIV有了更多的了解,谢谢!初学者弱弱的问一句,是不是在body里面的源码放置时,需要把带浮动的放在上面,不带浮动的放在下面才能陈列好啊?我按照常规思路,把左变内容的放第一行位置,中间内容的放在第二行位置,右边内容的放在第三行位置,效果不同
never(123.138.*.*) 发表于:2013-07-11 21:40:34
恩,此站必定出名
sousou89(115.49.*.*) 发表于:2013-07-03 16:50:04
谢谢站长了 哇哈哈
zhu123456(58.252.*.*) 发表于:2013-06-20 11:11:32
请问站长:我都按照上面所说的做了,为什么三列不是并排在一起的?side1这个div在下面,而side和main在上面?请解答。
2313514113(221.194.*.*) 发表于:2013-05-27 20:30:51
感谢、很不错,浏览器的BUG令人恨头疼解决了。
管理员回复:不客气
hexiuting(118.212.*.*) 发表于:2013-05-15 19:49:14
请问站长,是用虚拟机好,还是ietester好???????
管理员回复:如果你单纯的测试网页就装ietester
15108963254(112.90.*.*) 发表于:2013-05-14 23:23:53
第二遍学习,很多都知道是啥情况了····呵呵···网站很好
asvilla(1.85.*.*) 发表于:2013-04-24 16:16:36
新人,基础薄弱,看的我头疼啊。不过好歹还是弄会了,就是记在脑子里有点绕。这网站不错的,以后经常来学习
cbboys(101.85.*.*) 发表于:2013-04-11 16:17:52
不定义#main的宽度,两个块之间的5px就能显示,这是什么原因呢
cbboys(101.85.*.*) 发表于:2013-04-11 16:16:14
管理员你好。#main { background: #99FFFF; height: 300px; width: 200; margin-left:125}为什么定义了#main的宽度之后,两个块之间多的5px不显示出来,我用的是谷歌浏览器
管理员回复:定义了宽度就不会自适应了
qw21299940(218.206.*.*) 发表于:2013-04-09 16:44:44
老师bug那个例子中,main中不用margin-left:120px嘛,为啥啊 要是在IE7也不用写嘛这样跟上面讲的矛盾了 我是这么认为的 毕竟side是浮动的,我困惑了老师
perock(183.61.*.*) 发表于:2013-04-04 18:53:24
关于3像素的问题,我加了_margin-right:-3px;但是在IeTester中测试仍会有3像素间隔的问题, 是不是IeTester的问题?谢谢管理员大哥!
管理员回复:如果是win7可能会毕竟IEtester是模拟而不是真正的。
344312156(111.172.*.*) 发表于:2013-03-30 03:06:10
感谢!再次感谢!老师,问题1.三列中#main为什么设margin:-120px;不设置预览的效果是一样的,问题2.三列<div>中,为什么#main和#side1调换位置后不正常显示了,是什么原因啊...
ZHangyj(60.166.*.*) 发表于:2013-03-29 18:00:01
一行三列或者一行更多列与div的代码顺序有什么规律吗?比如上面的一行三列,我自己做了一下如果是 side main side1 排列的话就没有这个效果,而换做 side side1 main排列的话,效果就出来了。那这样的话要是一行多列排是不是就太乱了,还是一般布局不需要太多列
hezijijuedou(117.136.*.*) 发表于:2013-03-28 09:23:31
老师,刚才那个问题我已经解决了。
hezijijuedou(117.136.*.*) 发表于:2013-03-28 09:09:04
老师您好,在《八、IE6的3像素bug》这一节的最后,把#main固定宽度且向右浮动后,#main的div跑到右边去了,并且和#side的div的中间有很大的空隙,没有达到想要的结果,这是怎么回事?谢谢!
JAY(58.61.*.*) 发表于:2013-03-20 01:23:03
站长。其实我想说,为毛只有你能回复别人。- -。 还有感觉注册那个貌似有点不够人性化,我觉得嘛,在注册前就提示用户名字符格式嘛。还要刷一下的- - 纯属拙见。很喜欢这个网站。学到东西了,求更多javascript。jquery什么的。。。。。谢谢
管理员回复:因为,不是每个人都像你这样。有的人会在上面发广告骂人什么的。这些我们都要过滤的。所以目前只能管理回复。
zzacczhaop(124.230.*.*) 发表于:2013-03-14 15:53:50
老师,第三天,第一节内容二列自适应宽度 <div id="main">此处显示 id "main" 的内容</div> <div id="side">此处显示 id "side" 的内容</div> 这样就出错,反过来DIV IDSIDE 放在main代码上面就好了为什么?
管理员回复:因为side加了浮动二main加的是外边距
lyclyh(117.30.*.*) 发表于:2013-03-13 21:42:43
老师,为什么main那个层要放在side层后面呢?放前面为什么不能同一行呢
管理员回复:因为side加浮动着main没有加 如果你想把main放前面那么你就把margin去掉然后给main加浮动。
jingru1978(180.175.*.*) 发表于:2013-03-13 17:01:43
站长,你好display: inline block inline-block,有什么区别,怎么用啊,我在div中设置display:inline后,原有的宽,高都失效了,是什么原因啊~
管理员回复:inline是内联元素我们也可以用它来解决IE6的双倍边距,inline-block是行内块元素,有时候你必须变成块但是也有双倍边距,你就可以用这个,比如说a,block当然就是块元素了。如果是内联没有设置高的话就要加浮动。
testpceggs(171.217.*.*) 发表于:2013-03-07 15:37:05
居然有管理员回复,太神奇了.我要常来,好好学习
管理员回复:大晚上的很辛苦的。
1179285925(180.117.*.*) 发表于:2013-02-28 08:42:08
老师好 我想问下 方块怎么控制它上下的位置
WUQU(114.105.*.*) 发表于:2012-10-26 12:39:02
第三个div在二行的右下角是因为没看清楚上面的内容!!是不需要设置#mian的宽度的
zelinlin(183.3.*.*) 发表于:2012-10-24 12:47:56
站长,左列固定右列自适应的例子中,把右列的margin-left: 120px;去掉,效果也是一样的,那么是加margin-left: 120px;好还是不加好?
管理员回复:margin-left:120px;去了之后右列的内容就会被左侧的挡住一部分
hhb1988(58.61.*.*) 发表于:2012-10-20 10:36:52
老师,为什么float属性那里我怎么也做不到那个效果啊,代码一摸一样的,文字总是在图片的下面的
管理员回复:你仔细看看,是不是代码哪个地方写错了
labko(113.12.*.*) 发表于:2012-10-19 13:38:19
我也遇到同样的问题,第三列老是跑到右下角去,对照代码是一模一样的,郁闷中~~~~
管理员回复:div 的顺序错了 仔细看看代码
dongdong2012(125.86.*.*) 发表于:2012-10-09 11:41:35
这个教材太好了,让我一下子有学习的欲望了,老师,当做了三个区域在一行内,但是我在下一行还想做三个区域一样的排,当把代码写成一样的,浮动的第一个块的位置就是中间没有浮动位置的起点,这个怎么解决,能否看得懂,急啊
管理员回复:给每个区域都加上个float:left
stoneli(222.136.*.*) 发表于:2012-09-19 14:10:12
我看你说的对,我按照你说的方法加了3px才正常显示。。。IE6威武啊
管理员回复:这事ie6的兼容问题
xiaoyanjing1990(125.215.*.*) 发表于:2012-08-31 16:56:43
老师我在三列固定宽度的实例中自己写上和您写的代码一样的内容,在我这里就右侧框跑下面,您帮忙看下我写的哪里不对了。 <!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" /> <style> body{ margin:0;} #content { width:980px; margin:0 auto;} #side{ background: #99FF99; height: 300px; width: 120px; float: left;} #main{background: #99FFFF; height: 300px; margin:0 120px;} #side1{ background:#CCFF33; height:300px; width:120px; float:right;} </style> </head> <body> <div id="content"> <div id="side">此处显示 id "side" 的内容</div> <div id="main">此处显示 id "main" 的内容</div> <div id="side1">此处显示 id "side1" 的内容</div> </div> </body> </html>
管理员回复:把第二个div和最后一个div换下位置就可以了
chaorenmao(119.176.*.*) 发表于:2012-08-06 16:45:52
给右侧content容器也增加float:left属性,就不会掉落了
anyflying(222.243.*.*) 发表于:2012-07-02 22:23:09
请问,我的第三个DIV一直在第二行的右下角,对照代码好是一样,但是拷过你的代码去调又是对的,这是为什么
管理员回复:你的div顺序错了
tin8(114.104.*.*) 发表于:2011-08-26 18:07:33
继续上一个问题,我把concent加宽3px浏览就正常了,这还是3像素bug引起的?
tin8(114.104.*.*) 发表于:2011-08-26 18:03:21
老师为什么按照例子一步一步来右边的main始终掉到右下角,点“四、xhtml的块级元素(div)和内联元素(span)”上面的预览显示的和本机的一样都是掉到右下角?这是怎么回事?浏览器是6.0内核。
管理员回复:1、宽度超过了总体宽度;2、代码的先后顺序不对
wj1zhd(113.12.*.*) 发表于:2011-08-25 17:45:10
#lift { float: left; height: auto; width: 160px;} #right { height: auto; width: 662px; margin-left: 161px; }
wj1zhd(113.12.*.*) 发表于:2011-08-25 17:44:29
老师好,我按教程做的二列网页在IE7中正常,IE6中 右侧的div跑到了左边div的右下角,这是怎么回事,怎么解决?谢谢!
管理员回复:我的实例在IE6中正常吗,如果正常,请仔细对照查找原因
casio0718(125.73.*.*) 发表于:2011-08-24 23:42:37
管理员回复:可以时和不可以时的代码一样吗,浏览器一样吗 都是一样的代码,同一个浏览器。就是加_margin-right:-3px;有时可以去掉3像素,有时还是留白。如果做两列居中,加父div时,宽度加3px,这样才显左右两列中间有白间隙。否则会显示成:右边列在左边右下角。
casio0718(125.73.*.*) 发表于:2011-08-24 14:23:45
_margin-right:-3px;用了这个代码,还是无法解决3像素的问题啊。做了几次,有时可以,有时不可以。。不知怎么回事。恳请老师回答
管理员回复:可以时和不可以时的代码一样吗,浏览器一样吗
fanf3(60.166.*.*) 发表于:2011-08-22 15:40:37
你好!我想问一下side1和main的插入顺序不同的话,显示的效果为什么也不同?
管理员回复:请仔细了解float属性
tin8(114.104.*.*) 发表于:2011-08-20 17:14:16
请问在side设置了3像素_margin-right:-3px;那个怎么在网页里显示side和main及side1三个指间还是有间隙?
管理员回复:我的实例呢?
tzy19931107(114.99.*.*) 发表于:2011-08-17 09:02:46
这个教程 挺不错的 对于初学者 很好理解的 可是我绝的那个css 应该分开写 比较好一点吧 不应该全部写在html 里面
管理员回复:这是为了讲解实例方便才写在里边的。最后一天的正式实例就分开了
peisen52133(180.174.*.*) 发表于:2011-08-12 12:01:39
huhu092400 :老师,你好,我的问题上面的会员有问到,就是在两列固定宽度居中的实例,运行代码后,右侧的div跑到了左边div的右下角,这是怎么回事,怎么调节? 这是side和main在body中的位置先后问题。你在body中把side放在前面就好了。。。
gl370879171(221.7.*.*) 发表于:2011-08-09 16:27:46
太牛B了,赞
zwlstc(180.159.*.*) 发表于:2011-08-06 14:00:01
老师 那个3列一行的那个 我自己写的 和你样式一模一样 右边的那个一直在其他两个的右下角 请问这是什么原因??如果已经回答过 最好给我个地址 谢谢!!
管理员回复:去和我的实例对照吧
jiabi(113.65.*.*) 发表于:2011-08-06 10:31:56
好教程,谢谢了,特地注册来表示感谢
1075387464(116.24.*.*) 发表于:2011-07-28 11:35:19
网站做得太好啦 顶你!
kardal(125.215.*.*) 发表于:2011-07-27 13:16:32
老师您好。三、两列固定宽度居中 这个样式是错误的。位置不对。 还有是不是 两个DIV的浮动 要加一个 #clear { clear:both; } 我们老大说高版本的可以。低版本的就不行了。我还在测试中。。。。
zmq5780902(125.78.*.*) 发表于:2011-07-14 21:19:10
MAIN的那个左边界有什么用啊?? 删掉了MAIN会变短 但是字的位置不变啊 好奇怪..
huhu092400(58.30.*.*) 发表于:2011-07-14 10:06:59
老师,你好,我的问题上面的会员有问到,就是在两列固定宽度居中的实例,运行代码后,右侧的div跑到了左边div的右下角,这是怎么回事,怎么调节???
管理员回复:这个问题好像回答过n遍了
xiaaofan(117.33.*.*) 发表于:2011-07-12 10:14:40
老师,你好,float属性章节中的实例在IE6中不能实现绕排,文字只会排在图片右侧,请老师赐教。
sdnd2000(24.0.*.*) 发表于:2011-07-07 10:04:03
请问下,如果自适应和固定能混合在一起用吗?
管理员回复:你想实现什么效果吧
zxx(124.117.*.*) 发表于:2011-07-06 17:57:23
感谢站长,我是自学者,虽然有很多代码还不懂,但是受益匪浅!
xiaofan(218.4.*.*) 发表于:2011-07-05 20:50:07
这个教程真不错。首先谢谢站长。其次我也遇到了“两列固定宽度居中”,运行代码 两个div不在同一行上的问题。是分两行显示的。我的是IE6.
Tyrande(110.88.*.*) 发表于:2011-06-28 16:03:35
虽然我已经做网站很长时间了,但是主要不是做页面的,你这个网站的CSS教程确实不错哈。赞一个
19084477(220.163.*.*) 发表于:2011-06-24 16:32:40
老师您好,学了float的应用后,我试着用float属性来做3列固定宽度,我把三列都设置了宽度,并且全都定义了float: left;的属性,没有用margin来设置让出左右位置的方法,在浏览器中显示倒是没有问题,似乎利用float: left;在理论上做多少列都能很方便的实现,不过这样做有什么弊端吗?
管理员回复:这样也可以,条条大道通罗马嘛
19084477(220.163.*.*) 发表于:2011-06-24 12:08:12
这一节的第三部份“三、两列固定宽度居中”里面,那个父div即#centent的margin属性是margin:0 auto;但是我改成margin:auto;显示的结果也是一样的。因为第二天里面讲的div居中都是margin:auto;就可以了,但是今天的为什么要把div属性定义成margin:0 auto;呢? 把div定义为margin:0 auto;和定义成margin:auto;在实际应用中有什么区别?
管理员回复:上下为0
seemysky(119.164.*.*) 发表于:2011-06-23 17:03:36
第三节,学完签字。 不错,顶你。
hushaoju(113.57.*.*) 发表于:2011-06-21 09:43:56
你好, 六、三列自适应宽度 为什么我将 <div id="side1">此处显示 id "side1" 的内容</div>放在最下面时,会令起一行跑到最右边了啊?放在中间又正常显示了。请指教,谢谢
管理员回复:把float搞懂就明白了
19084477(220.163.*.*) 发表于:2011-06-19 22:14:48
哦,刚才我问的那个关于marign 属性的问题,我现在解决了,是我更改CSS格式设置的原因,先前我选中使用速记,后来我取消了使用速记。
19084477(220.163.*.*) 发表于:2011-06-19 22:02:21
#main { background: #99C; height: 330px; margin-top: 0px; margin-right: 100px; margin-bottom: 0px; margin-left: 100px; } 我一边学一边动手做,可是有一个问题:例出上面这段CSS,是CS5自动生成的,margin属性有时会简化成 margin: 0px 100px; 可是有时候又会各自定义4种属性。
管理员回复:请注意第二天的css缩写
myq520(117.85.*.*) 发表于:2011-06-18 22:51:03
看完这篇以后才知道以前我对float的理解是错误的!
zz1202zz(58.49.*.*) 发表于:2011-06-16 00:05:33
老师这节的浮动不能解释清楚为什么必须是side、side1、main ”></div>,我是按预览时模块显示的先后顺序来写的,id=side、main、side1,却不能正常显示,side1在右下面 ,能够详细解释一下吗?
管理员回复:还是得认真理解浮动
zz1202zz(58.49.*.*) 发表于:2011-06-15 23:15:51
<style> #content { width:520px; margin:0 auto;} #side { background: #99FF99; height: 300px; width: 120px; float: left; } #main { background: #99FFFF; height: 300px; width: 400px; margin-left: 120px; } </style> 按照这个设置,两列居中,中的第二列跑到第一列的右下边去了,麻烦解释一下,谢谢(#main的总宽度为520px,未超出了父层宽度 另外测试本网案例代码也是相同结果)
管理员回复:应该是在ie6下,需要解决3px问题
hlc790915(112.82.*.*) 发表于:2011-06-15 13:45:17
老师好,你在二列固定居中实例里,我运行了你的代码,为什么右侧DIV会跑到下面呢?是不是没有加上3PX的bug?
管理员回复:哪个实例,在什么浏览器下运行的?
lovelyagee(123.121.*.*) 发表于:2011-06-15 09:59:29
在哪能看到视频啊??
管理员回复:没有视频
jo437(122.228.*.*) 发表于:2011-06-12 12:30:50
body { font-size:18px; line-height:200%; } #side { float:left;}在图文混排中,这个往哪放,,还有下面几段代码老师可不可以给出完整的代码
管理员回复:实例中不是有代码吗,你说是完整代码指什么
jo437(122.228.*.*) 发表于:2011-06-12 12:25:02
在图文混排中,代码放到哪都不对,老师能否给出完整的代码。
管理员回复:不明白
thebaby(58.54.*.*) 发表于:2011-06-08 11:55:33
我的那个 三列问题解决了。可是我还是不明白。为什么 中间的div要放到第三排列.
管理员回复:把浮动了解清楚就明白了
thebaby(58.54.*.*) 发表于:2011-06-08 10:04:12
七、三列固定宽度 这节。。。为什么我代码按上面写的一模一样。第三列的div.会错位咧。。郁闷啊研究了2天了研究不出原因
管理员回复:用对比软件,仔细对比一下源代码,肯定有差别,不然效果肯定一样。像上次有个会员也是这么说的,最后我一对比,发现他把ul写成u1(数字1)了
zhangliandi(219.142.*.*) 发表于:2011-06-07 15:56:51
专门注册账号来表示感谢,站长辛苦啦~~~非常感谢
管理员回复:不客气
xyq09968811(218.107.*.*) 发表于:2011-06-06 22:43:05
请问老师,两列居中,中的第二列跑到第一列的右下边去了,是乍回事?位置好像没有放错。。<!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"> <!-- #aa { width: 620px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } #left { background-color: #006699; height: 600px; width: 120px; float: left; } #main { background-color: #00FF66; height: 600px; width: 500px; margin-left: 122px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; } --> </style> </head> <body> <div id="aa"> <div id="left">此处显示 id "left" 的内容</div> <div id="main">此处显示 id "main" 的内容</div> </div> </body> </html>
管理员回复:#main的总宽度为622px,超出了父层宽度
sysngel(117.136.*.*) 发表于:2011-06-04 21:57:10
老师为什么在body中<div id=“调用的标签,为什么必须是side、side1、main ”></div>,我是按预览时模块显示的先后顺序来写的,id=side、main、side1,却不能正常显示,side1在右下面
管理员回复:把浮动理解清楚就明白了
linjin(117.43.*.*) 发表于:2011-06-02 15:47:23
第六中的#main margin:0 120px 如果删除,貌似不会被旁边的模块掩盖,那不是没有用了,不需要设置?
管理员回复:是有区别的,把main的高度变的比两边的高一点,加个背景,就看出区别了
linjin(117.43.*.*) 发表于:2011-06-02 15:01:19
特地注册号码来对你表示肯定
管理员回复:欢迎常来
cr2121(218.204.*.*) 发表于:2011-06-01 17:07:08
注册一个号,专门来感谢。 讲的太好了
管理员回复:谢谢肯定
976756739(123.6.*.*) 发表于:2011-05-26 17:23:01
前辈,你好!我一直在咱么网站学习,问个问题:就是标题栏的logo,就像咱们网站的那个A 是怎么做的,我再网上也找了,说是这样就行了 <head> <link rel="Shortcut Icon" href="../favicon.ico" type="text/css"> <link rel="Bookmark" href="../favicon.ico" type="text/css"> </head> 我把.ico的文件放到站点里面,但我打开网页时这个logo就是不显示?请问是怎么回事?thanks!!!
管理员回复:我的就是把ico文件放到根目录下就可以了
qq378258951(118.116.*.*) 发表于:2011-05-19 15:38:51
老师好,在一、两列自适应宽度那节,为什么#main的margin-left是从最左边开始,而不是从#side右边开始,是不是因为float? 在五、float属性那节,如果给#main加上width或height,它多出的文字也不会跑到图片(#side)的下方,为什么呢?
管理员回复:margin-left肯定是左侧边距呀
tonymercury(202.43.*.*) 发表于:2011-05-18 18:03:28
这个教程相当不错!比我买的教程都要好,易学易懂,循序渐进!推荐大家都来看看啦!
管理员回复:这句话我爱听
hewantian(221.10.*.*) 发表于:2011-05-08 10:11:23
请问站长,两列自适应宽度,中的第二列跑到第一列的右下边去了,是乍回事?是不是浏览器有问题
管理员回复:是不是位置放反了
laijuanhui(121.8.*.*) 发表于:2011-05-04 20:24:09
我在学习三列自适应时,最右边一列也是挤到下面去了,是怎么回事啊,我用的是Ie8和FF。
管理员回复:html的顺序对不
aa294993127(114.132.*.*) 发表于:2011-05-02 21:25:37
你好,我发现在“六、三列自适应宽度”中,如果把main像您那样放在最后面一个div,那么就不会出问题,但是如果把side1放在最后面一个div就会跑到右下角去。这是为什么呢?
管理员回复:浮动,好好看看css里的float
alantan(219.75.*.*) 发表于:2011-05-01 19:12:48
这个网站真不错啊!真是没少下功夫啊,不错的网站。
管理员回复:欢迎常来
ad4621(124.126.*.*) 发表于:2011-04-27 17:47:09
为什么早没发现这个网站,一定要坚持把这上面的教程看完。如果遇到困难希望大家多多给我帮助。
管理员回复:欢迎常来
cxlde2(125.78.*.*) 发表于:2011-04-24 17:49:49
站长有打算出十天学PS教程吗,我很想学啊
管理员回复:暂时没这个打算,能出个十天学会div+css已经不易了
xinxinxiyu(125.34.*.*) 发表于:2011-04-21 16:47:30
您的这些教程真好,说什么呢,哈哈,多谢多谢了。以后多多学习。
管理员回复:欢迎常来
cxlde2(59.57.*.*) 发表于:2011-04-20 18:26:28
我是先看了一遍教程,然后自己动手练习,遇到问题时对号入座查看相应章程,感觉这样效果很好,谢谢站长啊!
管理员回复:这就对了,要多动手
jr0623(58.245.*.*) 发表于:2011-04-16 19:59:01
你好 有个问题,今天照着做写本页的第一个例子 我自己写效果不一样于是复制过去这的代码也是不同效果呢 ? 就是俩DIV之间有空隙,, 怎么回事呢 我用的是IE6.0 好像跟那个没关系吧。。 下面的也出问题了 。。急救急救!
管理员回复:应该是IE6的3像素bug,接着把文章看完
chinareligion(114.249.*.*) 发表于:2011-04-13 21:59:27
这个教程相当不错,忍不住顶一个。
管理员回复:我也顶
xiahuajie(222.135.*.*) 发表于:2011-04-13 13:17:45
这个教程非常的好,图文解释非常到位,胜过一般的视频教程。这里有个小问题请教一下一列四行或者四行以上的怎么写代码
管理员回复:都朝一个方向浮动
lasweet(58.240.*.*) 发表于:2011-04-12 11:40:48
站长推荐几本书。谢谢啊
管理员回复:本系列教程就是最好的书
sheng4ever(116.31.*.*) 发表于:2011-04-11 00:06:52
讲的很丰富,请问你有Q群什么的吗?好让我可以交流交流!~~
管理员回复:主页上不是列出了一大堆吗
lan(59.61.*.*) 发表于:2011-04-09 15:41:46
您好,我在学习三列自适应宽度 时,右边的掉到下面一行了,用了本站的代码问题还是一样,为什么?
管理员回复:什么浏览器?
xiaobobo(118.254.*.*) 发表于:2011-04-07 22:33:20
当设置第2列或者第3列的宽度为百分比大小时,缩小浏览器宽度到一定程度时出点DIV换行的情况 有办法解决使其不换行么
管理员回复:用js定义最小宽度吧
xiaobobo(124.228.*.*) 发表于:2011-04-07 19:48:52
第一天来到这里,收获很大!非常感谢管理员!不知道是否有群可加,本人学PHP的,对页面模板的制作也有要求,以前也是略懂皮毛而已,最近有空想好好系统学习下web标准,发现此网站很好很强大。再次感谢管理员做出这么好的网站!不知管理员怎么称呼?
管理员回复:群是可以加的。鄙人姓张
cssabc(120.40.*.*) 发表于:2011-04-04 21:57:35
以下是两列固定宽度居中copy下来的代码,为什么我显示的是一个上一个在右下角?--ie6 文章出处:标准之路(http://www.aa25.cn/div_css/904.shtml) <!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" /> <style> #content { width:470px; margin:0 auto;} #side { background: #99FF99; height: 300px; width: 120px; float: left; } #main { background: #99FFFF; height: 300px; width: 350px; margin-left: 120px; } </style> </head> <body> <div id="content"> <div id="side">此处显示 id "side" 的内容</div> <div id="main">此处显示 id "main" 的内容</div> </div> </body> </html>
管理员回复:你用的什么浏览器?
sakura(113.73.*.*) 发表于:2011-04-03 02:02:10
讲解的非常好,我相信看完,一定能学会。谢谢~~~
管理员回复:我也相信
jordanis1(114.82.*.*) 发表于:2011-04-02 20:34:45
我真的觉得这个教程不是一般的好,简单易懂,没有基础的人也可以学的很好很轻松,等我可以做网站的时候,我一定会来好好感谢站长你!
管理员回复:谢谢肯定
zzsyn(112.248.*.*) 发表于:2011-03-29 23:42:44
谢谢您的教程,简单易懂。请教一个问题:在三、两列固定宽度居中#main { background: #99FFFF; height: 300px; width: 350px; margin-left: 120px; }样式里,为什么要加margin-left: 120px;呢?不加也可以啊。!谢谢指教
管理员回复:当main中的内容超side的内容时再看看效果
hhq0830(58.23.*.*) 发表于:2011-03-29 20:01:17
新手常见问题 的视频为什么不能下啊!!!
管理员回复:现在可以了
bzzl46(218.206.*.*) 发表于:2011-03-28 14:41:53
您好,我在学本节两列固定宽度居中时,为什么预览代码的时候会是side在左上方,main在右下方,而不是在同一水平上。写的代码也和教程中的代码一样啊,费解!请老师指点下吧。
管理员回复:可能是两者相加的宽度超出了总宽度
disx(60.181.*.*) 发表于:2011-03-27 23:03:28
八中说:当两列固定宽度时,最好把#main也固定宽度且向右浮动,这样就可以避免IE6的3像素bug了。 这样设置的话两列中间会有很大的缝隙,3像素的问题解决不了的。。。
管理员回复:你把两者相加的宽度等于父容器的宽度不就ok了
tiger04522(58.249.*.*) 发表于:2011-03-26 22:01:22
<div id="content"> <div id="side">此处显示 id "side" 的内容</div> <div id="main">此处显示 id "main" 的内容</div> </div> 两列固定宽度居中 在IE6中是一个高一个低,没有在一行,查了很久都没有发现有什么问题,请大师指教一二,谢谢!
管理员回复:样式怎么定义的
xuejing(118.183.*.*) 发表于:2011-03-22 18:07:29
在三列固定宽度一节,我定义了三个标签,设left为左浮动,right为右浮动,middle为左右都设了边界,后又定义一父标签cent,设为居中。在DW设计界面三个标签不在一行显示,总是有一个显示在下一行(right或middle),在浏览器中却显示正常。看了老师对网友的留言说是“应清除两侧的浮动”,我试过了(对四个标签的两侧的浮动都轮流清除),都不行。真的很迷惑,应清除那个标签的两侧浮动啊。
管理员回复:浏览器正常就行,dw和浏览器解析内核不一样
377273907(218.18.*.*) 发表于:2011-03-22 17:11:10
讲的好详细,不懂的东西看到别人的提问也好所收获,谢谢您的教程!
管理员回复:能看懂就好
zhizun968(111.78.*.*) 发表于:2011-03-21 12:25:57
IE6 下 三列固定宽度居中 间隙问题 这样改可行 <style> body { margin:0;} #content { width:470px; margin:0 auto;} #side { background: #99FF99; height: 300px; width: 120px; float: left;_margin-right:-3px;} #side1 { background: #99FF99; height: 300px; width: 120px; float: right; _margin-left:-3px;} #main { background: #99FFFF; height: 300px; margin:0 120px;_margin-left:-3px;_margin-right:-3px;} </style>
zhizun968(111.78.*.*) 发表于:2011-03-21 12:17:33
给左边加上了_margin-right:-3px; 右侧加上了_margin-left:-3px; IE6下解决空隙
leiyf(124.236.*.*) 发表于:2011-03-16 19:10:49
您好,我在做(六、三列自适应宽度的)的时候,我给左边加上了_margin-right:-3px; 右侧加上了_margin-left:-3px;但是在ie6下还是有三个像素距离,该怎么解决啊,向您请教
管理员回复:请看本站实例
qiuzhijie(218.9.*.*) 发表于:2011-03-15 11:46:59
谢谢您的教程,真的学会了不少的东西!
管理员回复:不客气
youyezi(117.27.*.*) 发表于:2011-03-09 14:47:40
我用的是ie8,需不需要解决3px bug?为何有些通不过w3c,要符合哪些条件才会通不过?
管理员回复:没必要刻意去非要兼容
boshan(119.59.*.*) 发表于:2011-03-06 23:07:08
“三列自适应宽度“那部分的:为何在代码中main是在side和side1的下面啊?而不是放到中间?我试了下,却把side1挤出去了,这怎么回事啊?为何一定是在他们的下面而却显示的是在中间,难道就不可以放到中间吗?否则也不方便看代码啊
管理员回复:你把float弄懂后就明白了
zhuqian0506(60.16.*.*) 发表于:2011-03-04 19:17:50
zhuqian0506 <div id="side">此处显示 id "side" 的内容</div> <div id="side1">此处显示 id "side1" 的内容</div> <div id="main">此处显示 id "main" 的内容</div> 我想问为什么我把这三行位置换了一下,把side1放第三行,结果就变成了,side1的区域在其他两个下面,不知我问的问题清楚不?
管理员回复:你把float搞懂就明白了
jennifer(118.132.*.*) 发表于:2011-03-01 23:12:07
有问题请教哦。side、side1、main这三块的代码顺序,为啥一定要这样 #side { background: #99FF99; height: 300px; width: 120px; float: left; } #side1 { background: #99FF99; height: 300px; width: 120px; float: right; } #main { background: #99FFFF; height: 300px; margin:0 120px; } 这样就不行哦: #side { background: #99FF99; height: 300px; width: 120px; float: left; } #main { background: #99FFFF; height: 300px; margin:0 120px; } #side1 { background: #99FF99; height: 300px; width: 120px; float: right; } 万能的站长,请问这是为什么?自己做好了检查半天才发现原来是顺序错了!
管理员回复:把float弄明白你就懂了
summer(183.26.*.*) 发表于:2011-02-28 16:14:29
此处显示 id "side" 的内容 此处显示 id "main" 的内容 不知怎么回事,运行后没有格式。只有这样,
fzzx11(112.251.*.*) 发表于:2011-02-28 12:43:34
老师,我想问一下,我按三列布局那样,如果上面没有加一行那么三列就可正常的在设计视图中排列,但是加上上面一行,中间那列就挤没了,但是在IE浏览器中却能正常显示,在三列的下面加一行,不影响,不知是怎么回事,谢谢。
管理员回复:上面那一行设置清除两侧浮动就可以了
tangguo0806(111.113.*.*) 发表于:2011-02-14 16:03:01
很给力!谢谢老师
管理员回复:不客气
yycvip(116.115.*.*) 发表于:2011-02-11 02:15:18
<!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" /> <style> #content { width:470px; margin:0 auto;} #side { background: #99FF99; height: 300px; width: 120px; float: left; } #main { background: #99FFFF; height: 300px; width: 350px; margin-left: 120px; } </style> </head> <body> <div id="content"> <div id="side">此处显示 id "side" 的内容</div> <div id="main">此处显示 id "main" 的内容</div> </div> </body> </html> 这段代码在IE6错位! 并且上面说的122PX有空隙,其实在120PX就已经有空隙! 希望老师你在IE6下测试一下! 谢谢了!
管理员回复:IE6的3px问题,本站提供的有3px bug的解决方法
kay89757sc(123.161.*.*) 发表于:2011-01-18 00:55:55
您好,能不能给个您的CS5的下载地址?看完教程后我在您网站上下载的Dreamweaver cs5新建css规则中没有高级这个选项,里面有类.ID.标签.符合内容.并且在规则定义中并没有汉化.
管理员回复:我的cs5是在官网下的
bearkr(222.80.*.*) 发表于:2011-01-14 23:37:37
那么3列的是不是就没有好办法解决3像素bug了?! 我有个想法准备试试,将第一列和第二列放在一个大div中,大div向左浮动,第三列向右浮动,这样应该也可以解决3像素bug了!
管理员回复:是一种思路
tikyan(172.16.*.*) 发表于:2011-01-06 15:03:05
楼主想问下,同样是在div中填色,为什么在不同的浏览器中显示的不同,在ie6中显示的有颜色,在火狐中显示是没有任何颜色的!谢谢!
管理员回复:不知你是怎么填色的呢
song727(114.249.*.*) 发表于:2011-01-04 14:02:41
老师,在讲float属性这个图文混排的例子中,为什么 设置了#main{}的宽度和高度后,文字有一部分就会在图片的下面排列,而如果不设置#main{}的宽度和高度,文字就可以围绕图片排列? 我的代码是:(css代码:) #side{float:left;} #main{height:300px;width:350px;margin-left:px;} body{font-size:18px;line-height:200%;} (html代码:) <div id="side"><img src="图片.gif" width="192" height="142" /></div> <div id="main"> 标准之路[www.aa25.cn]提供DIV+CSS教程,DIV+CSS视频教程,web2.0标准,DIV+CSS布局入门教程,网页布局实例,css布局实例,div+css模板,div+css实例解析,网站重构,网页代码,水晶图标,幻灯广告图片.教程适合初学者循序渐进学习,网页代码,水晶图标,幻灯广告图片.教程适合初学者循序渐进学习</div>
管理员回复:应该是不管设置不设置都会绕的呀
lookingout(60.2.*.*) 发表于:2010-12-31 11:26:25
麻烦管理员帮我解答一下我的问题 <style type="text/css"> body{margin:0 auto;} #cen{margin:0 auto; width:1100px; height:1300px} #top{width:1100px; height:300px; background-color:#ADE4FC} #left{width:400px; height:900px; background-color:#FDFAB3; float:left} #right{width:700px; height:900px; background-color:#F3CAF9;} #down{width:1100px; height:100px; background-color:#000000} </style> </head> <body> <div id="cen"> <div id="top"></div> <div id="left">left</div> <div id="right">right</div> <div id="down">down</div> </div> </body> IE8下 显示右侧小于700px,不知道是什么原因呢? 还有这种浮动的,代码位置,有什么需要注意的地方吗? 谢谢
管理员回复:IE8下不会的呀,应该正常的。需要注意的是不要把dw创建文件后默认的第一行声明文档类型的代码删除掉
Cash(121.13.*.*) 发表于:2010-12-30 21:57:25
老师,您好!你第三天的教程,在IE6和火狐里浏览都有空隙!
管理员回复:哪里?
bskjgeg(219.134.*.*) 发表于:2010-12-27 18:19:00
管理员你好:有些问题不太明白意思,想请教一下(带‘//’是不明白意思的。) <script language="javascript"> var x=50,y=60; var xin=true,yin=true,step=1; function float(){ var l=t=0;// var r=document.body.offsetWidth-document.all("Layer1").offsetWidth;// var b=document.body.offsetHeight-document.all("Layer1").offsetHeight;// document.all("Layer1").style.left=x;// document.all("Layer1").style.top=y; x=x+step*(xin?1:-1);// if(x<=l){xin=true;}// if(x>=r){xin=false;}// y=y+step*(yin?1:-1); if(y<=t){yin=true;} if(y>=b){yin=false;} setTimeout("float()",10); } </script>
管理员回复:注释部分
a262131247(121.27.*.*) 发表于:2010-12-25 20:53:52
我找这种有实例的教程很久了!终于找到了!这教程很好,写的都是精华,垃圾部分的已经省略,让学员门自己动脑,很强大!我会经常来这里挺你的!大家一起共同努力!哈哈哈!我之前看过好多人的教程都不合适我!我现在打算一天一晚上吧这10天的看完!不知道可以不!
管理员回复:欢迎学习,建议推荐给别人
qianchan(116.18.*.*) 发表于:2010-12-25 09:17:11
你好,我在学习二列自适应宽度和固定宽度,做出来的效果两列可以居中,但就是side栏偏下,main列偏上,无法并列在一块!不知是怎样回事?
管理员回复:可能是两者相加的总宽度超出了父容器的宽度造成的
xiaoxiao01(61.163.*.*) 发表于:2010-12-23 14:38:28
#side { background: #99FF99; height: 300px; width: 120px; float: left;_margin-right:-3px; } #side1 { background: #99FF99; height: 300px; width: 120px; float: right;_margin-left:-3px; } #main { background: #99FFFF; height: 300px; margin:0 117px; } 这样子在IE6下这三个内容中间就没有空白了
weifq24(123.147.*.*) 发表于:2010-12-20 20:33:54
回lwjzlj,我运行代码也是呈两行显示,因为该页面上的代码有误,你把main属性中的margin-left: 120px改成float:right就OK了,我觉得问题在于那个3px的bug,当用margin-left: 120px时,由于3px的bug,main盒子就把content盒子撑破了,所以掉到第二行了,而用float:right时,消除了bug,side盒子加main盒子的宽度刚好等于content盒子的宽度
ljllljlsy(110.230.*.*) 发表于:2010-12-20 14:35:14
我在dreamwear里面就这样,在IE6里字符也会跑到下一行,我如何解决这个问题啊?
管理员回复:什么问题?
ljllljlsy(110.230.*.*) 发表于:2010-12-18 23:35:25
<style type="text/css"> body{margin:0px} #main{margin:0px auto;width:800px;background:#0cf;height:600px} #middl{width:400px;height:600px;margin:0 200px;border:0px;padding:0px;background:#00f;} #k1{width:200px;height:600px;margin:0;border:0px;padding:0px;float:left;} #k2{width:200px;height:600px;margin:0;border:0px;padding:0px;float:right;} #cl{clear:both;} </style> <body> <div id="main"> <div id="k1">aaaaaaaaaaaaaaaaaa</div> <div id="middl"></div> <div id="k2">aaaaaaaaaaaaaaa</div> </div> </body> 老师,请给我看下,为什么middl中加上文字就会使k2跑到下一行啊!我试着把main的width增加,同时把middl中的margin外边距增加到了20px也不行
管理员回复:我在IE8下不加也跑到下一行
w106220454(123.54.*.*) 发表于:2010-12-18 08:44:56
老师您好,在第八个案例中,_margin-right:-3px后来加了这句,可是在ie6中预览时,还是有空隙。
管理员回复:有吗,这测试是没有的呀
bo500416(115.58.*.*) 发表于:2010-12-12 01:04:00
老师,您好!在3列固定宽度的例子中,side利用_margin-left:-3px可以和中间的没有距离 ,但是和右边的side1还是有距离的,应该怎么解决?
管理员回复:那用相反的试试
277401707(61.161.*.*) 发表于:2010-12-08 12:23:55
老师你好 请问你的教程有做成书出版的吗 我想买 在哪里怎么购买呢
管理员回复:不好意思,没有出书,万一出了之的没人买我不亏大了
hailushijie(202.194.*.*) 发表于:2010-12-06 10:39:20
老师你好,一、两列自适应宽度中,在预览效果中,我的side和main之间为什么还会出现一条空隙啊?
管理员回复:ie6的3像素bug
lwjzlj(221.221.*.*) 发表于:2010-12-05 23:34:37
老师,在第三节中,为什么我运行代码时side和main这两个div是呈两行显示的?
管理员回复:我这里正常的,你用的什么浏览器?
1383061ma(125.74.*.*) 发表于:2010-12-05 16:40:26
此站利国利民,望站长坚持,必洪福齐天..
abdius(221.213.*.*) 发表于:2010-12-03 09:49:06
就是我做一个网页,中间内容部分又分为3个小部分。我分别命名为side,side1,side2. 然后side和side2分别左右浮动。 我设置了side,side1,side2的左右浮动的距离。中间有7个像素的距离。side左浮动是7,宽382。side1宽345,左浮动是382+14。右浮动是245+14。side2左浮动,400+345,宽245。右浮动边距是7. 然后等我设置完毕,side2就和side,side1不在同一排上了,它跳到了side,side1右边底部去了,是怎么回事? 急求。谢谢admin.
管理员回复:看着你的一堆数字有点晕,其实我觉得这个问题没这么麻烦,两侧的分别向左右浮动,假如宽度是200的话,那么设置中间块的左右外边距为207就可以了
lucifer8826(180.152.*.*) 发表于:2010-11-23 23:42:55
老师你好, 请问如何把本地的字体 放到网页上 给用户看到? 比如 这个版面我需要用粗倩体,但用户电脑上又不一定有,该怎么办???
管理员回复:做成图片
leashion(113.90.*.*) 发表于:2010-11-23 17:08:30
老师,您好!在六、七两个案例中,如果我给#main设置width:px;属性,会导致main与side分两行显示,不设置width属性则依然是在同一行,请问这是为什么呢?我是在ie6下看的,ff没有这个问题。
管理员回复:总宽度超出了父容器的宽度
micheal(61.161.*.*) 发表于:2010-11-19 11:27:44
body { margin:0;} #side { float: left; background:#99FF99; height: 300px; width: 120px;} #main { background: #99FFFF; height: 300px;} 老师这个代码应该是分行显示的啊 为什么你的是在一行的啊 难道不应该给@#side 和#main添加一个父容器吗?
管理员回复:不知道你说的是什么意思
muzifeng55(60.166.*.*) 发表于:2010-11-17 10:27:14
站长你好,在第八节body { margin:0;} #side { float: left; background:#99FF99; height: 300px; width: 120px;} #main { background: #99FFFF; height: 300px;} 里,如果给main设置固定宽度,在IE8下会显示2个div块重叠,在IE6则不会!请问什么设置了宽度,就会有这样的变化呢?
管理员回复:不太明白
zhouzhiming(222.243.*.*) 发表于:2010-11-11 17:31:11
<!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" /> <style> #content { width:470px; margin:0 auto;} #side { background: #99FF99; height: 300px; width: 120px; float: left; } #main { background: #99FFFF; height: 300px; width: 350px; margin-left: 120px; } </style> </head> <body> <div id="content"> <div id="side">此处显示 id "side" 的内容</div> <div id="main">此处显示 id "main" 的内容</div> </div> </body> </html> 请问一下,为什么这个不能居中。。。非常感谢你呀
管理员回复:居中呀
qingfeng(60.210.*.*) 发表于:2010-10-26 05:54:47
这个狗日的IE6,3像素bug搞了我一晚上!
shaddow(183.166.*.*) 发表于:2010-10-23 10:13:57
其次,在例举两列布时,main的float属性没有设置为left。在dw显示时就会在下一行显示,而且如果设置高度的话,选中main的div块可以看到显示的高度和你设置的高度会不一致,但是在IE浏览器中显示一切正常,这是不是也和浏览器在显示html页面时的排版有关系呢?
管理员回复:不太明白你的问题
shaddow(183.166.*.*) 发表于:2010-10-23 10:08:37
你好,老师。这节学习了float这个属性,不明白的问题有点多。作为块级元素该有前后行的啊,为什么在例举中side设置为left,main默认(带情人节图片的那个)。那么显示出来时为什么main里面的文字不换行呢而是紧挨着他显示的。设置为float之后,文档的排版变成了怎样的呢,老师能详解下吗?
管理员回复:块级元素默认占据一行,也就是它后边不能再有其它内容了,但使用float:left属性后,它的右侧是可以显示内容的,除非clear:right;现在不明白没关系,知道在什么情况下使用就行了,等掌握的知识多了,自然就明白了
jahx(114.249.*.*) 发表于:2010-10-21 15:50:55
请问下,在两列自适应宽度的#main { background: #99FFFF; height: 300px; width: 350px; margin-left: 120px; } 这个选择器中 如果加上float:right后,main方框怎么不跟side方框在一行呢
管理员回复:不设置不就在一行吗
vae(119.180.*.*) 发表于:2010-10-20 09:55:00
老师: 您好!在五、float属性一节中,如果在main里设置了方框宽度,那main和side就会在dw里预览显示重叠(文字和图片叠加在一起),F12后显示的效果是2列竖直平行的(图片和文字竖直平行)。这样的话只能通过设置body属性控制main的宽度,请问有没有直接设置main的方法,实现5.1里的效果吗(即main里超出的文字跑到side图片的下方)?谢谢!
管理员回复:添加父层容器,然后设置父容器的宽度
vae(119.180.*.*) 发表于:2010-10-19 16:46:31
在网络逛了这么长时间,终于找到了一个这么好的学习网站。如果作者能再出javascript和网络端编程语言(php,jsp,asp)的教程就更好了哈!
管理员回复:目前只针对web标准
geoe(118.78.*.*) 发表于:2010-10-19 01:58:39
奇怪为什么三列固定宽度这个,在DW预览和你的一模一样,在IE8里预览,,就变成side和side1同在左边,main占剩下右边空间??我哪里弄错了??
管理员回复:不知道
huihuang(119.22.*.*) 发表于:2010-10-18 11:36:08
<style> #content { width:470px; margin:0 auto;} #side { background: #99FF99; height: 300px; width: 120px; float: left; } #main { background: #99FFFF; height: 300px; width: 350px; float: left; } </style> 您好 首先感谢站长的无私奉献,其次问个问题。我用的也是ie6的浏览器 关于(三、两列固定宽度居中)我使用的样式表是上面这个样子设计的,来规避ie6的3像素bug,不知道这个方法是不是正规合理,请给予回复!谢谢
管理员回复:这也是可以的
anan5512(117.45.*.*) 发表于:2010-10-17 10:45:13
你好 我想问一下 在三列自适应宽度的例子中 DIV的不位置为什么不是<div id="side"></div> <div id="main"></div> <div id="float"></div>
管理员回复:你不仿把他们的位置换一下看看
zhonlin12(61.153.*.*) 发表于:2010-10-15 13:54:48
老师问一下如果图片要透明 是不是要2个DIV层啊
管理员回复:什么意思呀,能不能表述清楚
itlohas(60.0.*.*) 发表于:2010-10-14 21:29:56
看看,是不是问题已经解决了。但它不能通过W3C验证。当两列固定宽度时,最好把#main也固定宽度且向右浮动,这样就可以避免IE6的3像素bug了。 如果两个都需要设置固定宽度的话是不是还需要一个 content 的div 把两个包围,这个content设置成两个列的宽的和咯~?
管理员回复:是的
chengonger(222.240.*.*) 发表于:2010-10-14 15:13:17
我顶你,好!老兄!
管理员回复:我也顶
wjltw(112.82.*.*) 发表于:2010-10-13 22:17:03
呵呵,刚才我发的评论删除吧,是我理解错误了。以为等宽了。兄弟见笑了,刚刚开始学。
管理员回复:没关系,我还犯迷糊呢,特意又看了遍教程
tianshi(221.221.*.*) 发表于:2010-10-13 22:12:42
上面的五: <!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> bady { font-size:30px; line-height:200%;} #side={ float:left; width:750px;} </style> </head> <body> <div id="side"><img src="file:///C|/Documents and Settings/Administrator/桌面/正.jpg" height="458" width="725";/></div> <div id="main">好的打算方师傅是德国但是不发生的结果vnjdkfnhlkhn和你分开后面非官方那么接口法轮功干嘛发好看老公方可恢复可没成年后开发出吗c.mf好处kghh场面话 科工贸客服麦克风还没发过将返回的时间看过竭斯底里的还是减肥的快乐感觉说的好就是打开的附件的话时间飞快的反对谁看过寄圣诞卡估计愤怒的时光绝对控股方个绝对控股的快感 但是感觉都看过尽快答复国家的开发工具方可恢复</div> </body> </html> 老师,我这个怎么实现不了文字在右边啊,不知道是怎么回事 这段代码有什么问题吗?
管理员回复:你在哪儿学的样式表中间带等号的写法: #side={
wjltw(112.82.*.*) 发表于:2010-10-13 22:11:20
二、两列固定宽度 有了前面的基础,两列固定固定宽度就容易多了,只需要把#main的宽度由百分比改为固定值450,应该改为120吧
管理员回复:为什么改为120?
lulu(27.38.*.*) 发表于:2010-10-07 15:52:14
您好!我想问一下,第七个示例固定宽度.content中的width是怎么得到470的。是三者的宽加起来吗,那side的宽为120px,side1的宽度为120px,main的宽是自动,那是怎么得出content的总和是470px的了?
管理员回复:不是根据哪儿算出来的,是你所要定义的容器宽度
qq88096404(114.102.*.*) 发表于:2010-10-06 16:48:43
知道原因了 我是IE6的原因
qq88096404(114.102.*.*) 发表于:2010-10-06 16:20:46
两列固定宽度剧中,严格按照教程设置,剧中确丢掉了环绕的功能,直接运行本页代码也是这个效果,我是新手,到现在为止还没找出原因,想请管理员帮我解释一下是什么原因啊,而且本页的运行代码效果和效果图不符啊
管理员回复:剧中确丢掉了环绕的功能,是什么意思?
pgg200(58.199.*.*) 发表于:2010-10-04 17:12:17
这个教程很好
管理员回复:我顶
wuzhbing(116.30.*.*) 发表于:2010-10-03 11:19:14
在五、float属性中,我设置的MIAN中的文字怎么不到SIDE下面呢,是什么原因呢,请老师指教下#side {background: #99FF99;width: 202px;float: left;} #main {background: #99FFFF;height: 300px;width: 200px;float: left;}
管理员回复:不明白你想实现什么效果
wfynn(125.33.*.*) 发表于:2010-09-30 11:03:05
我用IEtester上的 IE6测试,怎么还是有3px的bug?代码都没有问题
管理员回复:什么情况下?
whywhywhy(183.17.*.*) 发表于:2010-09-28 13:05:26
老师,我要问的问题和文字环绕一样的问题,可能你没看明白,意思是,第三大点的时候,#main,#side怎么就包含在了#content里面的……
管理员回复:不放它里边了那放哪儿?如果是固定宽度,这样固定content的宽度就行了,如果不这样,一个左浮动一个右浮动不都靠浏览器两侧了吗
xmuedu(218.3.*.*) 发表于:2010-09-28 10:09:16
两列固定宽度居中这个例子在ie6下两个块一个上,一个下。是不是3px bug的原因? 当两列固定宽度时,最好把#main也固定宽度且向右浮动,这样就可以避免IE6的3像素bug了。
管理员回复:上下没有3px这一说
linxia(58.20.*.*) 发表于:2010-09-27 16:22:30
我用的360浏览器不管加不加3bug main和side之间都会有空隙。想不通
管理员回复:不知道了
lookingout(222.247.*.*) 发表于:2010-09-27 09:03:28
在第六节三列自适应宽度,为什么用我的浏览器打开“运行代码”中间都会有三像素的空隙?我用的是腾讯的浏览器。 还有我自己按站长的教程编辑,打开后也有三像素的空隙,而且右侧下沉后右漂浮,可能是什么原因?麻烦站长给解答一下。
管理员回复:你的IE版本是不是IE6?如果是的话应该是IE6的3px bug
bit(220.181.*.*) 发表于:2010-09-25 16:52:41
老师,请教下! Div的边界都是相对于浏览器的Body吗? 比如说:三列自适应宽度例题中提到“把原来#main样式的width:70%去掉,然后设置左右外边距各120px,让出左右列的宽度”那么main的边距是相对于浏览器的是吗?
管理员回复:相对于父容器
ewade(113.68.*.*) 发表于:2010-09-20 16:52:46
_margin-right:-3px; 这句我加了还是会出现3px的间隔 请问这是什么原因呢?我用的是遨游浏览器
管理员回复:直接在IE下打开呢
jack(183.27.*.*) 发表于:2010-09-19 22:41:29
三列布局中为什么顺序是side side1 main 而不是side main side1,当然后者的效果没有显示出来
管理员回复:再好好理解理解float的概念吧
文字环绕(211.103.*.*) 发表于:2010-09-17 15:17:14
两个互不相关的div怎么会掺和在一起呢? 不理解 如上图:side和main两个的交合在一起 我怎么实现不了呢? side和main两个没有包含关系的。
管理员回复:不明白
174659708(60.164.*.*) 发表于:2010-09-11 20:36:25
你所说的3BUG现在是不是已经没了。。我前面做的别的教程也没出现。按你的代码页眉出现啊。
管理员回复:只有在IE6下有
happywxc(58.56.*.*) 发表于:2010-09-10 17:04:25
第一个,两列自适应宽度,我都是按照这个配置做的啊,为什么我显示的时候就不是紧挨着的,而是隔了1像素呢?side 120px,main 左 120px,看着都没错啊,但是就是隔着1像素呢!怎么回事呢?
管理员回复:不太明白
116298998(113.139.*.*) 发表于:2010-09-09 00:26:14
第三列总是在下一行,请问什么原因呀
管理员回复:html顺序可能写错了,请仔细对比教程中的代码。回头把整个代码贴出来
zzz(123.6.*.*) 发表于:2010-09-08 22:13:29
<!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"> #side { background-color: #0FF; float: left; height: 300px; width: 120px; } #main { background-color: #9F0; height: 300px; width: 380px; margin-left: 120px; } #content { width: 500px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } </style> </head> <body> <div id="content">此处显示 id "content" 的内容</div> <div id="side">此处显示 id "side" 的内容 </div> <div id="main">此处显示 id "main" 的内容</div> </body> </html> 两列固定宽度居中 怎么不行啊 还有能不能只适应居中啊
管理员回复:你的side和main为什么不放到content里边?
hxc(60.171.*.*) 发表于:2010-09-07 22:32:35
非常好,受教了
lenhan12345(124.115.*.*) 发表于:2010-09-06 15:09:27
在“三列自适应宽度”中<div id="side1">这列为什么显示到了下行,而且side和main之间有点空隙,给side设置_margin-rigth=-3px后不起作用~~
管理员回复:可能是html顺序错了,解决空隙可以让三列都浮动就行了
mandy(116.19.*.*) 发表于:2010-09-02 14:54:34
真是不错的程序,非常好!
管理员回复:欢迎常来
joykey(120.32.*.*) 发表于:2010-08-29 13:56:24
#side { background-color: #930; height: 400px; width: 200px; float: left; } #main { background-color: #936; height: 400px; width: 90%; margin-left: 300px; } 楼主你运行下这个代码,会发现一个问题 ,希望你能帮我解释下这是什么问题·
管理员回复:什么问题,单纯css如何运行?
sousou89(123.14.*.*) 发表于:2010-08-27 14:51:28
怎么都是换行的,老大!
管理员回复:什么换行的?
一切皆有可能(113.0.*.*) 发表于:2010-08-27 11:09:22
管理员辛苦了,谢谢!
管理员回复:不客气
wanghuatang(113.249.*.*) 发表于:2010-08-21 15:26:46
在火狐浏览器中两个层有叠压的部分
管理员回复:哪个例子?
wendellup(112.2.*.*) 发表于:2010-08-19 11:56:11
关于图片与文字包围的问题: 我没有输入#main { margin-left:202px;} 文字已经与图片单独成列。。不能把图片包围。。而且我定义了文字的宽度#main{width:300px; } 目的让文字包围图片。。却不能实现。求解。谢谢。。
管理员回复:不明白
xuemm2010(117.22.*.*) 发表于:2010-08-13 17:12:55
你好,3pxbug的问题,那在IE6下是不是比在IE7下整个的宽度都会多出3px?
管理员回复:不是
30701060(122.235.*.*) 发表于:2010-08-13 14:56:11
在“三列自适应宽度”中把<div id="side1">此处显示 id "side1" 的内容</div> 与<div id="main">此处显示 id "main" 的内容</div>位置互换后,出来的效果不同?为啥呢?能否解释下,谢谢!
管理员回复:建议去css样式表手册中认真查看下float的内容
石家庄(222.222.*.*) 发表于:2010-08-11 15:55:03
我试了下代码的顺序.还是换行呀.请教老师是怎么回事呢.
管理员回复:得看源代码
laozhang(60.180.*.*) 发表于:2010-08-11 14:55:52
div顺序问题,先side,再side1,再main 为什么是这个顺序呢?按我们惯性思维应该是side main side1才对啊?这是什么原因呢?
管理员回复:因为浮动
木(221.236.*.*) 发表于:2010-08-07 13:38:15
div顺序问题,先side,再side1,再main
管理员回复:
zhengtichufang(60.185.*.*) 发表于:2010-08-07 09:34:10
我用的dreamweaver8按照站长你的操作,无论是二列还是三列最右边这个DIV都会出现换行。我发现这里回复这个问题的很多。你的回答是:html代码顺序问题 。这点还是不明白。你能详细解析下原因么?
管理员回复:<div id="side">此处显示 id "side" 的内容</div><div id="main">此处显示 id "main" 的内容</div>这两行的顺序是不是写反了
zhengtichufang(60.185.*.*) 发表于:2010-08-07 08:58:24
#side {background:#99ff99;height:300px;width:120px;float:left;} #mian {background:#99ffff;height:300px;width:350px;margin-left:120px;} #content { margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; width: 470px; } </style> </head> <body><div> <div id="content"> <div id="side">side</div> <div id="mian">mian</div> </div> </div> 在IE6中看mian这块框是跑到side右边的跑到下一行,这是什么原因?
管理员回复:3px bug造成的
sdjnlf213(113.128.*.*) 发表于:2010-08-07 00:17:12
body { font-size:18px; line-height:200%; } #side { float: left; width: 202px; background-color: #009; } #main { margin-left: 202px; background-color: #0FF; } 请问下,为什么这么编写IE6没有3px漏洞的白条
管理员回复:3px bug出现在左侧浮动,右侧不浮动的情况下
331500333(123.170.*.*) 发表于:2010-08-06 22:51:59
请问管理员,input[type="text"] 这个CSS 为什么不起作用呢 麻烦了
管理员回复:教程中没用到这样的吧
dai(218.64.*.*) 发表于:2010-08-06 17:05:59
你好!我照你的方法做“三列自适应宽度”,但是右边的side1会跑到下一行去,为什么呀?代码应该是没有问题的。 #side {background:#33cc99; height:300px; width:120px; float:left ;_margin-right:-3px;} #main {background:#ff9999; margin:0 117px;height:300px;} #side1 { background: #99FF99; height: 300px; width: 120px; float: right; } body {margin:0;} 我用的是DW8,不是CS4
管理员回复:html代码顺序问题
smartant(180.172.*.*) 发表于:2010-08-06 16:22:45
答:guliguli 我照着你的教程做的,但是左边的就是side部分要跑到下一行,不然就是右边的跑到下一行 Div #main 需要放在 Div Side1之后
sdjnlf213(113.128.*.*) 发表于:2010-08-05 22:54:08
站长,我怎么做的两列div在ie6看的之间总有距离呢,参数完全按照教程,而且dw里看着正常呢?很是疑惑,谢谢
管理员回复:你把教程都认真看完了吗,可能是3px bug
guliguli(119.6.*.*) 发表于:2010-08-05 11:33:53
我照着你的教程做的,但是左边的就是side部分要跑到下一行,不然就是右边的跑到下一行
管理员回复:注意是否是宽度超出造成的
winlia520(116.24.*.*) 发表于:2010-08-02 00:07:10
管理员!您好!我想问一下,本站的你录制制作教程,是swf格式吧,高清的很不错!可否告诉我一下您是用什么软件录制的,后转成.swf格式的?
管理员回复:Camtasia Studio 6
tgdxun(121.61.*.*) 发表于:2010-08-01 11:52:23
这节内容充实,呵呵
maise(112.240.*.*) 发表于:2010-07-28 18:10:10
请问 我做三列自适应宽度的时候 为什么最右边的DIV自动换行,是哪里设置的不对?还有3px BUG用了站长的方法还是不行呢,是不是浏览器的原因??
管理员回复:请认真对照,如果我的代码在你的浏览器上没问题的话,那还是你的问题
cash(59.39.*.*) 发表于:2010-07-26 20:16:17
站长,一到四的教程好像弄不了。side弄不了和main同一行靠左!
管理员回复:能不能把问题表述详细点
aixuan2046(180.124.*.*) 发表于:2010-07-26 10:19:25
站长加油,教程不错,期待后续教程,另外弱弱的说下首页导航栏下面绿色背景的那一栏最后错位了,酒店预定的"定"字和"返回..部"跑第3行去了,被下面的挡了80%,字都看不清了,原来显示没问题,但加了"十天学会WEB标准"后就把第2行尾部的字顶到第3行了,我用的是Maxthon2.
管理员回复:谢谢指正
yuanmoo(113.240.*.*) 发表于:2010-07-25 21:53:43
期待着……终于来了 每看一节,还回顾前面几节,应该能学会吧,嘿嘿 支持站长
管理员回复:嗯,一定要多动手
kaillylau(218.18.*.*) 发表于:2010-07-23 19:00:34
站长,我想请教你个问题. 我在层里面设的magin-top怎么跑到外面去了 <!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>p的外补丁怎么跑到层外去了?</title> <style type="text/css"> <!-- body,div,p{ margin:0; padding:0} div{ width:500px; height:200px; background:#F60;} p{ width:400px; height:100px; background:#999; margin-top:10px;} --> </style> </head> <body> <div> <p></p> </div> </body> </html>
管理员回复:margin本身就是定义外边距的
xiehuijun(113.103.*.*) 发表于:2010-07-22 00:59:15
这节教程等好几天了 好东西 太谢谢站长了 哇哈哈
管理员回复:后边的教程可能还会放慢,因为这三节是去年整理的,一直没有发出来。后边的需要现在接着整理,因是图文教程,需要处理大量的图片,更新的会慢些,另外还可以看下大家对前边这些教程的反应做相应的调整

我要评论