打印

[讨论] 网页布局：“标准”遭遇“太极”，怎奈何？！

catest [楼主]

初级会员

帖子: 189
体力: 86
威望: 4
离线: 4 天

1^# 大中小发表于 2007-11-20 15:07

纵横web标准多年，今天终于被我碰到了如此布局，不得不叹服中国太极之深远博大。
大家看看对这样的布局，如果不用表格和绝对定位的话，有没有办法做出来？

[ 本帖最后由 catest 于 2007-11-20 15:13 编辑 ]

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

还得修练。。。

TOP

做西部数码代理.Cn1元国际45元 | 微软开发者工具互动网站

苍狼

中级会员

帖子: 215
体力: 420
威望: 0
当前: 四川泸州
离线: 33 天

2^# 大中小发表于 2007-11-20 15:10

强人啊！！

做人要厚道！QQ:383709

TOP

美橙vps独立IP月付189元 | 千千静听皮肤设计大赛

firhome

初级会员

帖子: 107
体力: 130
威望: 0
当前: 陕西西安

3^# 大中小发表于 2007-11-20 15:37

这个比较强。

TOP

掌握加薪筹码 IT薪资宝典给您答案！ | 《疯狂的程序员》劲爆上市

mlmuller

游山玩水

银牌会员

帖子: 614
体力: 1237
威望: 0
离线: 10 天

专长 网页设计,ASP,.NET

4^# 大中小发表于 2007-11-20 15:52

提示：您可以先修改部分代码再运行

IE6,FF测试通过,感觉用DIV做比表格要容易噢,

[ 本帖最后由 mlmuller 于 2007-11-20 15:55 编辑 ]

个站交流!开发郁闷期

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

marvellous

金翅擘海

荣誉管理团队

帖子: 11818
体力: 26926
威望: 140
当前: 北京朝阳区

5^# 大中小发表于 2007-11-20 15:53

用表格做起来并不难，用层做起来也不难，都做过。

提示：您可以先修改部分代码再运行

┏┯┓┏┯┓┏┯┓┏┯┓
┠知┨┠往┨┠观┨┠来┨
┗┷┛┗┷┛┗┷┛┗┷┛

TOP

sdw65063251

完全米撒了米

高级会员

帖子: 454
体力: 629
威望: 0
当前: 北京海淀区

专长 前端制作,JS

6^# 大中小发表于 2007-11-20 16:03

一边撒谎，一边陶醉

TOP

catest [楼主]

初级会员

帖子: 189
体力: 86
威望: 4
离线: 4 天

7^# 大中小发表于 2007-11-20 16:03

感谢mlmuller ！
事实证明很多时候我们思维存在着定势，还没有真正理解css，继续修练。。。

还得修练。。。

TOP

No01

咚咚吆

银牌会员

帖子: 5175
体力: 1694
威望: 1
当前: 北京崇文区

8^# 大中小发表于 2007-11-20 16:13

学习了.......

老百姓都是猪和兔子，公务员都是鸭子大师是乌龟！

TOP

laodifangderen

新手上路

帖子: 12
体力: 32
威望: 0
离线: 86 天

9^# 大中小发表于 2007-11-20 16:56

刚刚看了，构思太巧妙了！学习中。。。。。。。。。

TOP

jyyjch

橙木

高级会员

帖子: 260
体力: 505
威望: 0
当前: 四川雅安
离线: 4 天

专长 网页设计,前端制作,文案

10^# 大中小发表于 2007-11-20 17:52

#main_content { 00px;float:left;background-color:#00FF00}

请问那个00px，是什么意思？

TOP

chenzhe

高级会员

帖子: 398
体力: 543
威望: 9
当前: 辽宁沈阳

专长 JS,C/C++

11^# 大中小发表于 2007-11-20 18:32

引用:

原帖由 catest 于 2007-11-20 16:03 发表
感谢mlmuller ！
事实证明很多时候我们思维存在着定势，还没有真正理解css，继续修练。。。

呵呵，你看看他的代码就知道了。要实现这个过布局需要对float flow的完全理解。《精通CSS》一书里面的介绍就不错，推荐楼主看一下。

菜鸟吧

TOP

chenzhe

高级会员

帖子: 398
体力: 543
威望: 9
当前: 辽宁沈阳

专长 JS,C/C++

12^# 大中小发表于 2007-11-20 19:05

来个大号的，这个就是把mlmuller的解决办法用em修改一下，加上margin就和你的图片一样了。

提示：您可以先修改部分代码再运行

本帖最近评分记录

greengnn 威望 +3 谢谢分享 2007-11-21 12:07

菜鸟吧

TOP

maize

新手上路

帖子: 20
体力: 0
威望: 0

13^# 大中小发表于 2007-11-20 20:54

这个样的怎么做啊？弱弱的问。。。另一种太极，我工作中遇到的。。。

TOP

MarVell

高级会员

帖子: 778
体力: 766
威望: 0
当前: 河南洛阳
离线: 3 天

专长 前端制作

14^# 大中小发表于 2007-11-20 21:38

提示：您可以先修改部分代码再运行

不在放荡中变坏,就在沉默中变态...

TOP

dizyh

初级会员

帖子: 99
体力: 157
威望: 2
离线: 2 天

15^# 大中小发表于 2007-11-21 10:50

<!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">
#main {background:#00FF00; width:150px; height:150px; position:relative; color:#FFFFFF; padding-left:50px; padding-top:50px;}
#left {width:50px; height:150px; background:#FF0000; position:absolute; left:0px; top:0px;}
#top {width:150px; height:50px; background:#000000; position:absolute; right:0px; top:0px;}
#right {width:50px; height:150px; background:#0000FF; position:absolute; right:0px; bottom:0px;}
#bottom {width:150px; height:50px; background:#000000; position:absolute; left:0px; bottom:0px;}
#main2 {background:#00FF00; width:200px; height:200px; position:relative; color:#FFFFFF;}
#left2 {width:50px; height:150px; background:#FF0000; position:absolute; left:0px; top:0px;}
#top2 {width:150px; height:50px; background:#000000; position:absolute; right:0px; top:0px;}
#right2 {width:50px; height:150px; background:#0000FF; position:absolute; right:0px; bottom:0px;}
#bottom2 {width:150px; height:50px; background:#000000; position:absolute; left:0px; bottom:0px;}
#center2 {width:100px; height:100px; background:#00FF00; position:absolute; left:50px; bottom:50px;}
</style>
</head>
<body>
<div id="main">
  main
  <div id="left">left</div>
  <div id="top">top</div>
  <div id="right">right</div>
  <div id="bottom">bottom</div>
</div>
<br />
<br />
<div id="main2">
  main
  <div id="left2">left</div>
  <div id="top2">top</div>
  <div id="right2">right</div>
  <div id="bottom2">bottom</div>
  <div id="center2">main</div>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

竹与笛：http://www.dizyh.cn

TOP

ksyo

新手上路

帖子: 4
体力: 13
威望: 0
离线: 120 天

16^# 大中小发表于 2007-11-21 15:19

虽然在DW里最后一块会掉下来但是在FF 和IE6 7 里都OK
浮动浮动

TOP

DellGrass

新手上路

帖子: 165
体力: 5
威望: 3
当前: 上海徐汇

17^# 大中小发表于 2007-11-22 10:21

看着很复杂，，试了一下也没什么，，，看看我的这种方法怎么样。我感觉比22楼的作法要好理解点
而且支持IE6。7。ff.fafari .opera

提示：您可以先修改部分代码再运行

TOP

shgnn2

初级会员

帖子: 59
体力: 131
威望: 0
当前: 上海徐汇
离线: 91 天

18^# 大中小发表于 2007-11-22 11:28

#main_content {float:left;}

这个内容是在正中央
为什么中间的一块内容它是float:left？
为什么不是float:right
或者是none

www.target.com

TOP

maklove

爱噪音

初级会员

帖子: 306
体力: 100
威望: 0
当前: 北京东城区
离线: 4 天

专长 前端制作,JS

19^# 大中小发表于 2007-11-22 11:35

用绝对定位更好理解要什么样子的都可以

mimiwang.net

TOP

alexnyy717

高级会员

帖子: 352
体力: 609
威望: 0
当前: 北京朝阳区
离线: 13 天

20^# 大中小发表于 2007-11-22 11:46

我想知道不拷贝代码的情况下重新写一个要多长时间。。。

厨房网 http://www.chufang.cn

TOP

DellGrass

新手上路

帖子: 165
体力: 5
威望: 3
当前: 上海徐汇

21^# 大中小发表于 2007-11-22 11:59

float:left;margin:210px 0 0 -500px;

好几个这样的东东应该好理解多了。都是左浮动，通过margin来控制他们的显示位置

TOP

chenzhe

高级会员

帖子: 398
体力: 543
威望: 9
当前: 辽宁沈阳

专长 JS,C/C++

22^# 大中小发表于 2007-11-22 14:42

引用:

原帖由 shgnn2 于 2007-11-22 11:28 发表
#main_content {float:left;}

这个内容是在正中央
为什么中间的一块内容它是float:left？
为什么不是float:right
或者是none

还是那句话，需要理解float的工作原理。

菜鸟吧

TOP

AMY8287

初级会员

帖子: 69
体力: 148
威望: 0
离线: 6 天

专长 网页设计,前端制作,策划

23^# 大中小发表于 2007-11-22 14:50

<!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>
<title>Untitled Page</title>
</head>
<body style="padding: 0; margin: 0;">
<div style="width: 800px; padding: 0; margin: auto;">
      <div style="width: 200px; background-color: Fuchsia; float: left; height: 700px;">
      </div>
      <div style="background-color: Gray; width: 600px; height: 200px; float: right;">
      </div>
      <div style="background-color: Green; width: 200px; height: 700px; float: right;">
      </div>
      <div style="background-color: Maroon; width: 400px; height: 500px; float: right;">
      </div>
      <div style="background-color: Olive; height: 200px; width: 600px; float: left;">
      </div>
</div>
</body>
</html>

TOP

AMY8287

初级会员

帖子: 69
体力: 148
威望: 0
离线: 6 天

专长 网页设计,前端制作,策划

24^# 大中小发表于 2007-11-22 15:06

17楼那个窗口缩小就变掉下来了.........

TOP

DellGrass

新手上路

帖子: 165
体力: 5
威望: 3
当前: 上海徐汇

25^# 大中小发表于 2007-11-22 15:24

body{width:900px;}

因为我没有定他外围的宽度。所以掉下来是正常的

TOP

chen231133

新手上路

帖子: 12
体力: 31
威望: 0
当前: 福建福州
离线: 117 天

26^# 大中小发表于 2007-11-23 12:04

引用:

原帖由 shgnn2 于 2007-11-22 11:28 发表
#main_content {float:left;}

这个内容是在正中央
为什么中间的一块内容它是float:left？
为什么不是float:right
或者是none

你试着把中间一块内容float改为right,你会发现它飘到最右侧。而原本右侧这块飘到它的左侧（也就是在中间）。

如果中间内容浮动改为right,那么在xhtml代码顺序把右侧这块写在中间内容上面，就可以了。

你可以参考下6楼的贴子，个人认为这个是最通俗易懂的。这个例子很简单，我们都被楼主的标题吓到了：）

TOP

hx7248292

鼎视视觉

中级会员

帖子: 247
体力: 361
威望: 1
当前: 福建厦门

专长 前端制作,JS,ASP

27^# 大中小发表于 2007-11-23 16:09

大家都挑上面那图做？

为什么不做下面的太极图呢？

我来一个太极图！showTime

提示：您可以先修改部分代码再运行

鼎视视觉：www.xmarea.com

TOP

catest [楼主]

初级会员

帖子: 189
体力: 86
威望: 4
离线: 4 天

28^# 大中小发表于 2007-11-23 16:18

楼上的是大侠，拜了！

还得修练。。。

TOP

zhaoyaqi05

新手上路

帖子: 100
体力: 25
威望: 0
当前: 北京朝阳区

29^# 大中小发表于 2007-11-23 16:26

服了,如果这样也行的话,那还有什么不行吗?

TOP