网页制作重大改进!：用“层”构造网页布局
用“层”构造网页布局早就是网页制作的一个推荐的方法，因为简单。但是由于使用不当，制作的页面不能适应不同的屏幕分辨率！比如针对1024x768 设计的页面，在 800x600 分辨率下，页面就完全变形，面目全非！
这是困扰我好长时间的问题！昨天经过实验，合理的解决了问题。今后我做网页，就可以不用无数的嵌套的 Table 来布局了。画一个层（<div style="...">...</div>），放上我们的文字或（和）图片，定义好层的绝对坐标（可以用可视化工具拖拉、拖放），就 OK 拉了！！！想放到屏幕的哪里就放到哪里！！
我解决的问题是：适应不同的分辨率，适应窗口的大小变化…… 不多说了，看看我的示例代码和页面就全知道了(要完全解释我的做法，要费太多口舌)：
http://www.why100000.com/test/div/div.htm
我希望大家在不同的浏览器下测试一下，看我的做法是不是可行。我是在 IE 6.0.3790 下做的。
问题点数：55、回复次数：121Top
1 楼fangq（jack）回复于 2005-08-18 12:21:05 得分 0
呵呵，顶一下Top
2 楼wanghui0380（放歌）回复于 2005-08-18 12:32:56 得分 0
嘿嘿，你应该自己写了一个ide工具，发布出来，咱们就有福Top
3 楼MOTA（YodFz·杭州）回复于 2005-08-18 12:59:41 得分 0
如果用表格 100%会怎么样呢
估计效果一样Top
4 楼zhangking（网眼-why100000.com）回复于 2005-08-18 22:24:18 得分 0
就是要彻底抛弃用表格布局的笨办法!Top
5 楼Hozaka（空虚的狼）回复于 2005-08-18 23:09:24 得分 0
其实，使用“绝对定位”的方式来定位页面上的层，是不合理的，至少对于动态页面来说。原因很简单：对于动态页面，你无法预知块的高度。
而且，使用绝对定位也会产生一些不可预料的结果，比如一个 top=0; height=50 的层 和一个 top=20; height=50 的层，内容就会重叠。根本原因在于：绝对定位的元素在页面上只占据一个点，而并非是一个块。
可以浏览 w3c 的官方网站，有多种方法。Top
6 楼cnnico（三两）回复于 2005-08-19 02:32:23 得分 0
有这方面意识的朋友,俺强推你去www.w3cn.org看一下,虽然是个个人部,不过早有w3中国导航站之说了Top
7 楼zhangking（网眼-why100000.com）回复于 2005-08-19 12:14:42 得分 0
Hozaka(空虚的狼) 说的，你用表格是怎么解决的？？
对于动态页面，你无法预知块的高度-你用表格就能预知高度了？
使用绝对定位也会产生一些不可预料的结果，层内容就会重叠--我可以控制层的坐标和大小，不让他重叠呀！相反,利用重叠,能做出表格布局很难做的效果来的!Top
8 楼zhangking（网眼-why100000.com）回复于 2005-08-19 12:18:03 得分 0
先看看我的代码,
把我的解决办法看明白了再发表意见。
搞计算机的，脑子是应该能转过弯子的！Top
9 楼YaohuiLee（）回复于 2005-08-19 15:17:24 得分 0
看过了，感觉和 Table 套 Table 的方法类似，不过的确是比较好的方法，有兴趣可以看看这个网站：
http://www.htmldog.com/
查看代码．Top
10 楼poolnet（）回复于 2005-08-19 15:50:35 得分 0
赫赫，，Top
11 楼poolnet（）回复于 2005-08-19 15:53:18 得分 0
感觉楼主像从秦朝通过时光水稻进入21世纪
DINGTop
12 楼hawkflying（hawk）回复于 2005-08-19 16:09:26 得分 0
偶早已不用表格了,div+CSS搞定布局,至于两种分辨率的问题,css控制的好不会出现问题.
http://www.csszengarden.com/ 此网站为css+div经典网站,全站无一个表格!学习ing...Top
13 楼zhangfeng1133（）回复于 2005-08-19 16:10:25 得分 0
<div styple=""></div>确实比table 牵套好啊，搂住是 why10000的站长啊，兴会啊。
Top
14 楼Estyle（靳田）回复于 2005-08-19 16:16:26 得分 0
介个帖子我就不发表看法了，留个影，关注后续动态。OVER！Top
15 楼phuson（寂寞沙洲）回复于 2005-08-19 17:23:12 得分 0
我想知道用表格布局有什么不好？又方便又整齐！我一般是在一个页面插入一张固定宽度的，居中的1*1的大表格，其他都放在这个表格里面！
请高手指点，这样有什么不好的地方，谢谢!Top
16 楼fenglik（风易）回复于 2005-08-19 17:32:36 得分 0
占个位子先
呵呵,这个我这段时间也在玩,有兴趣的朋友可以看看www.ige.com这个游戏网站,全部用css与div控制,还可以用css作出多种图片效果,从中我学到不少东西!Top
17 楼wanghui0380（放歌）回复于 2005-08-19 17:38:50 得分 0
嘿嘿,层套层!感觉像在堆金字塔,不过那一天一个不小心把z-index写错了,就好玩了!估计你本人在定z-index时候会在dw里来回找layer吧!Top
18 楼AppleBBS（Dicky）回复于 2005-08-19 17:43:47 得分 0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>网页制作新改进：用“层”构造网页布局</title>
</head>
<body leftmargin=0 topmargin=0>
<div align="center">
<div style="position: relative; width: 600px; z-index: 10; left: 20px; top: 0px; border:1px" id="layer10">
<div id="div1" style="POSITION:absolute; left:130px; top:0px; border:1px; width:468px; height:42px; border:0"><img src="images/pic008.gif" width="468" height="60"></div>
<div id="div2" style="POSITION:absolute; left:154px; top:87px; border:1px; width:119; height:83; border:0"><img src="images/1_01.gif" width="119" height="83"> </div>
<div id="div3" style="POSITION:absolute; left:5px; top:75px; border:1px; width:139px; height:53px; border:0"><img src="images/Adobe11.jpg" width="128" height="128"></div>
<div id="div4" style="POSITION:absolute; left:0px; top:376px; width:137px; height:134px; border:0 none; "><img src="images/Adobe12.jpg" width="128" height="128"></div>
<div id="Layer1" style="position:absolute; left:273px; top:87px; width:326; height:83; z-index:11; border:0"><img src="images/1_02.gif" width="326" height="83"></div>
<div id="Layer2" style="position:absolute; left:154px; top:170px; width:119; height:340; z-index:12; border:0"><img src="images/1_03.gif" width="119" height="340"></div>
<div id="Layer3" style="position:absolute; left:273px; top:170px; width:326px; height:340; z-index:13; border:0"><img src="images/1_04.gif" width="326" height="340"></div>
<div id="LayerText" style="position:absolute; left:273px; top:155px; width:32px; height:34; z-index:13; border:0">测试文字</div>
<div id="LayerLogo" style="position:absolute; left:12px; top:14px; width:90px; height:35; z-index:13; border:0 none; "><a href="http://why100000.com" target="_blank"><img src="images/why100000_88x31.gif" border=0></a></div>
</div>
</div>
<!--
网页制作：张庆 QQ:9365822
电脑学习网 http://www.why100000.com 测试页面
------->
</body>
</html>Top
19 楼zy51（Final）回复于 2005-08-19 19:46:13 得分 0
不明白为什么不用表格！
觉得用层只适合页面比较简单的网站吧．你用层先把新浪的页面画一个出来我看看先?Top
20 楼yjbnew（伟大的光荣的正确的ASP千岁千岁千千岁）回复于 2005-08-19 19:50:40 得分 0
我有一个问题：
我们知道一般作网页是用图片处理软件比如：ｐｈｏｔｏｓｈｏｐ，ｆｉｒｅｗｏｒｋｓ等切割图片，生成表格的。那我怎么样把他方便的改成DIV形式？当然我认为总是可以改的 但是这可能要花费更多的时间，所以，这个问题不解决，用DIV还是意义不大。Top
21 楼zhangking（网眼-why100000.com）回复于 2005-08-19 20:08:01 得分 0
用不用层,和处理图片(包括切割)没有关系!
除非有个工具直接切割图片再自动放到层里.Top
22 楼hsboy（PHP it!）回复于 2005-08-19 20:25:47 得分 0
用层好处是不少。最近也研究了下。我的blog现在已经是最严格的html1-strict达标了哦
http://www.hsboy.com/blog/Top
23 楼patchclass（黑翼）回复于 2005-08-19 20:36:29 得分 0
关键是 margin padding float 和clear的用法
我的网页也是最严格的html1-strict达标
http://www.yuhuatel.com/yang/index0.aspTop
24 楼sunshift（http://www.56390.com/）回复于 2005-08-21 03:53:40 得分 0
学习中···Top
25 楼superdullwolf（超级大笨狼,每天要自强,MVP）回复于 2005-08-21 10:21:00 得分 0
自由伸展的三栏式版面,div布局，非绝对定位，IE,FireFox都OK.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>DIV布局测试</TITLE>
<style>
div
{
height:150px;
}
div.left
{
width:20%;
float:left;
clear:right;
background-color:#eeeeee;
}
div.center
{
width:50%;
float:left;
clear:right;
background-color:#CCCCCC;
}
div.right
{
width:30%;
float:left;
clear:right;
background-color:#808080;
}
div.both
{
width:100%;
clear:both;
background-color:#696969;
}
</style>
</HEAD>
<BODY>
<div class="left">左侧</div>
<div class="center">中侧</div>
<div class="right">右侧</div>
<div class="both">全行</div>
<div class="left">左侧</div>
<div class="center">中侧</div>
<div class="right">右侧</div>
</BODY>
</HTML>
Top
26 楼superdullwolf（超级大笨狼,每天要自强,MVP）回复于 2005-08-21 10:21:20 得分 0
自由伸展的三栏式版面,div布局，非绝对定位，IE,FireFox都OK.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>DIV布局测试</TITLE>
<style>
div
{
height:150px;
}
div.left
{
width:20%;
float:left;
clear:right;
background-color:#eeeeee;
}
div.center
{
width:50%;
float:left;
clear:right;
background-color:#CCCCCC;
}
div.right
{
width:30%;
float:left;
clear:right;
background-color:#808080;
}
div.both
{
width:100%;
clear:both;
background-color:#696969;
}
</style>
</HEAD>
<BODY>
<div class="left">左侧</div>
<div class="center">中侧</div>
<div class="right">右侧</div>
<div class="both">全行</div>
<div class="left">左侧</div>
<div class="center">中侧</div>
<div class="right">右侧</div>
</BODY>
</HTML>
Top
27 楼zhangking（网眼-why100000.com）回复于 2005-08-21 20:58:21 得分 0
superdullwolf(超级大笨狼,每天要自强) ( ):
你的制作符合 web 标准! 很有借鉴意义!!!Top
28 楼feng04230091（紫枫）回复于 2005-08-22 10:50:31 得分 0
留名记录
方便学习
Top
29 楼ice_berg16（寻梦的稻草人）回复于 2005-08-22 11:38:16 得分 0
这种仁者见仁，智者见智的贴子就不发表看法了。Top
30 楼zhangking（网眼-why100000.com）回复于 2005-08-22 11:38:42 得分 0
一个布局大的例子:
http://www.why100000.com/myBlogs/Doc/div布局.htmTop
31 楼KissRose（远离荧光屏）回复于 2005-08-22 11:39:42 得分 0
表格有什么不好呢
Top
32 楼Hozaka（空虚的狼）回复于 2005-08-23 00:52:09 得分 0
呵呵，楼主的语气有一点冲
举个例子，一个表格两行一列，第一行内的内容有可能挤到第二行去么？即使你给第一行指定50px的高度，这个单元格内就算你放入1000个字符，单元格是会自动向下扩展高度的。
但是，你可以试试看，用绝对定位做两个层，纵向贴着，高度都是50px，你试试看在上面的层里放入1000个字符，看看这个层会不会自动扩展高度。Top
33 楼HHH3000（蓝色爱琴海 知耻而后勇）回复于 2005-08-23 10:42:08 得分 0
这个东西看情况用，
该用div用div，该用table用table，
没必要必须用哪个，灵活运用最重要，
csdn的首页也不都是div阿，也有table的。Top
34 楼gatey（吹过的海风）回复于 2005-08-23 11:13:13 得分 0
灵活运用才是最重要的Top
35 楼QQgenie（妖魔鬼怪）回复于 2005-08-23 13:24:09 得分 0
DIV层的缺点就会不会自动扩展高度:
把"狼兄"的<div class="left">左侧</div>换成
<div class="left">左侧
a<p>a<p>a<p>a<p>a<p>a<p>a<p>a<p>a<p>a<p>a<p>a<p>a<p>
</div>
结果,中间,右侧都空出一大块颜色
用好div不易呀,不用算了Top
36 楼zhangking（网眼-why100000.com）回复于 2005-08-24 16:37:57 得分 0
说的是呀! 还要想别的办法!Top
37 楼luffyes（luffyes）回复于 2005-08-24 17:03:56 得分 0
有值得借鉴的东西！留名记录！Top
38 楼superdullwolf（超级大笨狼,每天要自强,MVP）回复于 2005-08-24 23:54:57 得分 0
恩，用DIV就要考虑内容撑开的情况，可以考虑OverFlow:hidden或者ScrollTop
39 楼stefli（）回复于 2005-08-25 09:16:51 得分 0
hsboy(hsboy)
你的还不是strict哦
Line 80 column 7: document type does not allow element "ul" here; assuming missing "li" start-tag.
<ul>
✉
Error Line 85 column 4: end tag for "li" omitted, but OMITTAG NO was specified.
</ul>
Top
40 楼hawk2004（漠沙飞-relearn）回复于 2005-08-25 09:25:19 得分 0
收藏Top
41 楼stefli（）回复于 2005-08-25 09:27:16 得分 0
http://validator.w3.org/check?uri=域名
先检查一下，再说web standardTop
42 楼coolwindkaka（寒の风）回复于 2005-08-25 09:45:49 得分 0
这个问题就像是孔乙已的“回”字有N种写法一样，写来写去还不是一个回字，或者你弄得太复杂反而弄巧成拙。。Top
43 楼wcbm（阿钟）回复于 2005-08-25 09:50:03 得分 0
下面这个是小弟我做来玩的，还在改，不过基本上快通过W3C标准的验证了，CSS当然早就通过了
http://home.goofar.com/mynet/
只是因为图片上的忘了加alt :(Top
44 楼stefli（）回复于 2005-08-25 09:50:31 得分 0
帮我看看www.stefli.com，为什么到了firefox下就发生变化了。Top
45 楼lanyd（寻找甘当科学家的女人）回复于 2005-08-31 22:04:10 得分 0
看不懂其中的好处~~~~
功力不够深啊，继续努力中...Top
46 楼mikespook（CSDN ＝＝ 吹死大牛）回复于 2005-08-31 22:05:46 得分 0
呵呵，我这里看有两个没有用途的滚动条在页面上～～
PS:许多年前（不是99，就是00年的时候的文章）就有很多文章是教大家用层来做布局的了～～楼主真的一点没看过？Top
47 楼wzhiyuan（我是谁）回复于 2005-08-31 22:50:03 得分 0
真新鲜呀 ：）Top
48 楼jackycxg（黑白灰）回复于 2005-09-01 07:40:06 得分 0
mark
Top
49 楼zwrtv（蝙蝠）回复于 2005-09-02 11:33:14 得分 0
学习下Top
50 楼zhuangyan2004（庄严）回复于 2005-09-02 12:38:03 得分 0
我们需要有创新精神的程序员。学习。Top
51 楼tzh0sh（暗夜游魂）回复于 2005-09-02 13:43:12 得分 0
表格要等闭合以后才会显示，这就是用表格最大的不足，一个页面用一个大表格的话，自己感受一下吧，table快还是div快，Top
52 楼ASP0000（代码狂热者）回复于 2005-09-02 15:28:52 得分 0
呵呵,DIV是要比用table速度快很多~Top
53 楼hsboy（PHP it!）回复于 2005-09-04 13:39:55 得分 0
to stefli(该找个女朋友了～) :
是有问题啊。网页设计达标了，但是往里贴文章就不行了啊，WEB方式的HTML编辑器生成的代码乱得很，没办法了。Top
54 楼asde2004（FLY）回复于 2005-09-04 14:41:09 得分 0
如何适应不同分辨率用JS解决easy的很呀。动态网页就是DIV+CSS+DOM模型+JS的结合证这点没错吧。Top
55 楼oldhim（苏鱼）回复于 2005-09-04 15:08:53 得分 0
还是习惯用表格，好象没碰到解决不了的布局，div太可怕了，麻烦Top
56 楼x123jing（蓝点）回复于 2005-09-04 20:36:36 得分 0
顶，关注一下。Top
57 楼yuliang0828（殷剑平）回复于 2005-09-04 23:00:34 得分 0
有个问题就是如果用Div做大规模的开发工作，比如：一个个的商业网站或企业网站，如何能够在DW中方便的编辑？不会所有都用记事本来编写吧？Top
58 楼YaohuiLee（）回复于 2005-09-08 19:43:04 得分 0
我在用这个做毕业设计的前台，一直是用 EditPlus 编辑，感觉用 DW 还没有记事本来得顺手～～～Top
59 楼YaohuiLee（）回复于 2005-09-08 20:25:07 得分 0
to stefli(该找个女朋友了～):
在 #mainBody 中加个 overflow: auto;
去掉 #menu li 中的 float:left;
基本上就差不多了……Top
60 楼YaohuiLee（）回复于 2005-09-08 20:33:14 得分 0
to stefli(该找个女朋友了～):
#content 的 height width 改成：
width: 579px !important;
width: 616px;
height:100%;Top
61 楼harryCom（）回复于 2005-09-13 13:33:14 得分 0
国内的网易早都是css+div啦
www.163.com
mail.163.com
Top
62 楼zwrtv（蝙蝠）回复于 2005-10-08 13:15:54 得分 0
学习下Top
63 楼brothercat（猫猫 ^_^）回复于 2005-10-08 14:19:17 得分 0
发展趋势的探讨，严重关注...Top
64 楼lp820515（）回复于 2005-10-08 15:41:29 得分 0
用表格排版可以在外部表格使用绝对定位，内部表格嵌套使用相对定位
Top
65 楼jzywh（江大鱼）回复于 2005-10-08 16:04:47 得分 0
网站重构是去年就开始兴起的话题！Top
66 楼tongrong515（老玩童周伯通）回复于 2005-10-08 17:54:08 得分 0
好好的收藏Top
67 楼xiongzai（熊仔）回复于 2005-10-08 21:05:30 得分 0
学习中……Top
68 楼longyu0414（龙宇）回复于 2005-10-15 14:15:38 得分 0
路過 好亂~
個人看法 想用那個用那個
妳們好痲煩Top
69 楼jurlear（☆炽天使☆）回复于 2005-10-15 15:59:24 得分 0
看来页面排版还是大问题,值的这么多人研究!Top
70 楼Estyle（靳田）回复于 2005-10-24 09:06:37 得分 0
仿佛又是一个长期不结的帖子哦，HOHO。Top
71 楼menrock（教坏细路）回复于 2005-10-24 09:19:28 得分 0
table可以做到的东西，用div+css也可以做到，既然是网页制作发展的趋势，自然有他的优点，尝试一下便会知道好处了Top
72 楼yaohaishuai（无心）回复于 2005-10-24 12:06:00 得分 0
呵呵！
看看http://www.macromedia.com/
用DIV+CSS还是可以去尝试的Top
73 楼satans18（(何畏)(只要你过得比我好)）回复于 2005-10-24 12:34:51 得分 0
其实是差不多的，想当年，用表格布局也感觉很困难，
常常不是这里有个缝 就是那里没对齐
用多了就好了Top
74 楼dh20156（风之石）回复于 2005-10-24 13:02:56 得分 0
管它白猫黑猫，能上网就是好猫！
Top
75 楼mylove36（离开以后）回复于 2005-10-24 14:13:22 得分 0
学习学习`~~~!
Top
76 楼fox1999（红狐）回复于 2005-10-24 15:53:51 得分 0
看我的
http://redsoft.yculblog.com
http://www.myjoblib.comTop
77 楼pzhuyy（喝小酒泡尼姑）回复于 2005-10-24 17:11:52 得分 0
学习！Top
78 楼caobin518（linlin）回复于 2005-10-24 20:55:53 得分 0
收藏.Top
79 楼hannibal7188616（疯一样的男子）回复于 2005-10-24 21:16:41 得分 0
关注~不过提醒楼主一句,CSS+div绝对不是你理解的那样.Top
80 楼sfel801208（笨笨豆）回复于 2005-10-25 09:22:19 得分 0
学习中...Top
81 楼etononline（瑞金 www.rj163.com）回复于 2005-10-25 10:01:39 得分 0
当N多的CSS定义写到一个CSS文件里面,我想速度也不怎么快......
我一直为这个世界改变,原来这个世界却不曾改变我.
KAO 原来这个世界如此潦草......Top
82 楼zhangking（网眼-why100000.com）回复于 2005-11-20 16:31:32 得分 0
欢迎交换友情连接，可以去我的why100000.com站上自助申请：
http://why100000.com/autolinks/addlink.asp
自助友情连接，申请成功后，请记住您的用户名和密码！
必须把我站的友情连接放在您的站上，并至少点击一次，
才能在我的站上看见你的连接。点击的次数越多，
在我的站上排名越靠前。Top
83 楼jerry_love_tom（K歌之王）回复于 2006-01-27 23:56:36 得分 0
KAO,写出来的代码不都是几K，十几K的吗！用户们都用宽带了，就哪怕是56K的猫，除去图片等其他元素，对这表格和层的下载速度的差异用户们你TMD眼睛是火眼金睛还是高速摄影机能看的出来！！
我们写代码的在这里讨论个毛劲，试问一下你们的用户，有多少人能感觉表格和层的差异，一句话“我觉得好像没有什么变化耶～”，绝的足以让你融化掉～
还不是那些所谓这个大公司那个全球组织，今天WEB2.0，明天AJAX，概念一天换几个，表面上讲XX技术，靠，为的还是自己赚钱！Top
84 楼hotren1999（故意）回复于 2006-01-28 00:07:49 得分 0
效果不错，如果动态表格呢，用函数写出来的表格，要怎么把他们定位啊？Top
85 楼y7967（三千）回复于 2006-01-28 13:25:38 得分 0
用户确定能加快显示速度~Top
86 楼y7967（三千）回复于 2006-01-28 13:27:40 得分 0
用层确实能加快显示速度~
Top
87 楼syre（神仙）回复于 2006-01-28 16:35:27 得分 0
寒下绝对定位
用div不等于用层
Top
88 楼superdullwolf（超级大笨狼,每天要自强,MVP）回复于 2006-01-28 17:06:16 得分 0
这个帖子还没结？Top
89 楼51one（今天你学习了吗？）回复于 2006-01-28 17:22:00 得分 0
div+css是个方向，但感觉楼主理解的比较狭隘？
Top
90 楼RISONG（risong）回复于 2006-01-29 09:19:46 得分 0
有没有人可以贴出一张解决div绝对定位的教程来?Top
91 楼syre（神仙）回复于 2006-01-30 18:42:19 得分 0
顺便发现了css错误
css的注释只能用/**/不能用//
background-repeat: repeat-x repeat-y;
既然都有就不用了
这样也是错误的Top
92 楼Novolee（人民子弟兵)(http://biglee.cn/?c）回复于 2006-01-30 20:48:00 得分 0
学习一下！Top
93 楼scao（真·白金之星）回复于 2006-02-02 17:12:35 得分 0
关注(这应该算前台吧,和程序有关系么?)Top
94 楼SunCHcloud（好熊一族）回复于 2006-02-03 09:27:43 得分 0
请问. 那个层..div经常很多是做为广告的代码, 然后整个被浏览器助手拦截, 那用的多不就.... 谁能指点一下我?Top
95 楼cao5（草屋主人）回复于 2006-02-16 12:05:46 得分 0
用你的还不如用表格,你知道为什么别人用div+css构架吗?
而且定位是不应该象你用的绝对定位的,当你开发动态网页的时候,你会碰到很多很多
我们用的div+css,而不是你说的层Top
96 楼santwy（易易）回复于 2006-02-16 12:51:52 得分 0
我不懂,为什么要吵Top
97 楼ybcola（极点冰）回复于 2006-02-16 13:04:11 得分 0
呵呵,用css样式表控制显示W3C中强烈推荐的,抛弃一些陈旧的不好用的效率低的东西是必然的,我强烈推存大家参考淘宝网的网页,其中没有用任何表格,而且Css写得非常规范,当我前几天去研究它时,确实让我知道了他成都第一电子商C2C网站的原因之一Top
98 楼sdxlh007（海）回复于 2006-04-12 08:53:28 得分 0
还有网易的主页,也是用div+css做的Top
99 楼ShiningstarHu（Shining_star）回复于 2006-04-12 09:14:38 得分 0
哈哈，看来讨论很激烈啊。
我来讲讲我的看法。
先讲讲DIV的好处，我开始使用DIV主要是为了替换网页里面IFRAME和,FRAME等框架。
大约1年半前开始的。 这样做的好处是，所有网页内容都在一个窗体里面，便于ASP/ASP.net
传递变量。免去了不同页面之间传递变量的不方便。 而且文件数量也减少了很多。
用DIV来完全替换表格，我觉得大可不必。表格当然有表格的优势。对于局部的数据显示
我相信对于目前来讲，表格还是有优势的。至少写起来方便，举个例子：
如果你要实现一个日历控件，我相信大部分人还是首选表格作为数据的载体。
但是对于整个页面的排版，使用一个1 : 1的大表格，就像上面有朋友说的那样，这的确不是一个好方法。对于这个问题，我早在7年前开始写网页的时候，就尽量避免了。可能你会问，为什么，很多人不知道这样做的坏处是什么。原因很简单，一个是<TABLE>这个标签载浏览器里面的显示效率比较低，还有就是当浏览器在解释HTML标记的时候。对于表格来讲浏览器一定要读到</TABLE>这个标记时才会把整个表格之间的内容显示出来。你们可能会有这样的经验，有时候放问一个王站，连接速度很慢，网页显示一片空白，等待数十秒，甚至1-2分钟后，网页内容突然全部现实出来。这个现象一般都是因为有了一个1:1的大表格，嵌套了无数小表格造成的现象。造成这个现象的根本原因是因为，浏览器还没有读取到最外面一层表格的</TABLE>标记。 当然对于目前越来越多的人使用宽带上网情况，这个现象不严重了，但是想想7年前，我开始做网页的时候，当时的连接才28.8的猫啊!!
现在讲讲表格的好处。我前面讲了，对于局部的数据显示，表格还是有优势的。比如实现如下的效果：
<TABLE BORDER="2">
<COL Span="2" STYLE="color:red">
<COL STYLE="color:green">
<COL STYLE="color:blue">
<TR>
<TD>This column is in the first group.</TD>
<TD>This column is in the first group.</TD>
<TD>This column is in the second group.</TD>
<TD>This column is in the third group.</TD>
</TR>
<TR>
<TD>This column is in the first group.</TD>
<TD>This column is in the first group.</TD>
<TD>This column is in the second group.</TD>
<TD>This column is in the third group.</TD>
</TR>
</TABLE>
我相信，如果你要用DIV实现上述效果，就没有像表格来得这么容易了吧:DTop
100 楼Deneral（我是中国人）回复于 2006-04-12 09:59:19 得分 0
关注Top
101 楼quiii（Lemon）回复于 2006-04-12 10:35:27 得分 0
!!!-_-
不要歧视 table
table 和 div 一样只是实现设计的工具
关键看你的设计
什么方便就用什么
哈Top
102 楼quiii（Lemon）回复于 2006-04-12 10:42:33 得分 0
很多网站改用 div + css
还说了一大堆优点
其他的没看懂 就看懂一点“页面相应快了”
网易的邮箱是快了很多
那只是因为用 div 换了 table 吗？我不相信！
没必要刻意追求 div 关键还是设计Top
103 楼intereye（面朝大海，春暖花开）回复于 2006-04-12 11:59:54 得分 0
偶公司已经在用了。
http://www.chinaok.net.cn/
对CSS的要求很高~~~Top
104 楼tongrong515（老玩童周伯通）回复于 2006-04-13 16:41:53 得分 0
大家对这个感兴趣的可加入群：16579631网站重构！Top
105 楼soft_2008（冬天到了，春天还远吗？）回复于 2006-04-17 15:29:38 得分 0
- -Top
106 楼mhxz568（aa）回复于 2006-04-17 15:45:07 得分 0
纵观风云，谁主沉浮
一块石激起千层浪
好事！
帮顶Top
107 楼laifangsong（手机网站开发:QQ:25313644）回复于 2006-06-06 09:30:28 得分 0
请问用 div做,我想用ps切出来要怎么做?Top
108 楼xxsoft（上海,今夜请将我遗忘!）回复于 2006-06-06 09:40:45 得分 0
GOOGLE BAIDU CSDN 都是通过DIV。
另外我还发现一个好处，用DIV他是一个一个加载的，Top
109 楼zrqgood（梦欣）回复于 2006-06-06 09:46:26 得分 0
我看了代码，怎么没感觉出来它的好？我太笨了，得再仔细看看...Top
110 楼seasol（海子@CSDN助手：http://www.cuteie.com/other.asp）回复于 2006-06-06 10:00:49 得分 0
用table能简化思维，用div能锻炼思维Top
111 楼coolattt（隐锋）回复于 2006-06-06 10:05:14 得分 0
关注一下：）Top
112 楼yinxiaoyue（）回复于 2006-06-06 10:13:34 得分 0
收藏。
Top
113 楼grakey（透明的深蓝）回复于 2006-06-06 10:39:26 得分 0
用层来定义布局，我个人感觉，如果是很简单的页面，你可以那么做！
如果是比较复杂，内容较多的页面，你用层的话不累死才怪！！而且日后的维护是很麻烦的，我一直都是用表格来布局，但是表格一定要规划好了，不要胡乱的嵌套，那样会影响显示速度。
用表格简单明了，维护起来直观！
Top
114 楼thefirstwind（准备学习PHP）回复于 2006-06-06 10:46:50 得分 0
反正感觉,现在有从表格往层转的趋势,可能一直以来层对于网页的流缆就是主推的方式.Top
115 楼welland（微蓝色）回复于 2006-06-06 11:29:17 得分 0
用DIV+CSS布局的小型门户首页
http://www1.99you.com/index.htmlTop
116 楼klend（苯鸟（2006））回复于 2006-06-06 11:45:05 得分 0
不错的帖子，收藏一下。
因为觉得table确实不能约束自己写出规范的网页代码，
所以个人比较钟爱div的方法。Top
117 楼ATHENA112（18以下请不要回复我的帖子）回复于 2006-06-06 17:27:56 得分 0
div + css的好处用过的都知道。
谁说用DIV维护是很麻烦的？一个div + css的站点换一个CSS文件可以变成另一个完全不同的站点，也就是说“网站改版”只要修改一个文件，用table呢？
只不过div + css开始设计的时候比较复杂，想当初第一次用纯div + css做站点弄了半个月，头都大了。现在熟悉了就N快啦。
Top
118 楼grakey（透明的深蓝）回复于 2006-06-06 17:33:34 得分 0
见过一个人做的垃圾站，用div＋css定义的导航栏，靠，居然被当作浮动广告被拦截！！
真是爆汗啊……Top
119 楼goga21cn（)外城◣◥◣◥奔III的预备团员︻$▅▆▇◤()︻︼─一(）回复于 2006-06-07 00:00:39 得分 0
不一定非要用纯DIV或者纯TABLE,各有长处,我一般两个结合着用!Top
120 楼sunshift（http://www.56390.com/）回复于 2006-06-26 09:06:20 得分 0
与大家分享一个DIV+CSS的页面；
http://www.56390.com/Search.asp?k=%B2%D6%B4%A2
HEHETop
121 楼scalewingzip（程是程序员的程，序是程序员的序，员是程序员的员）回复于 2006-06-26 09:16:47 得分 0
mark!!!!Top
