悉尼Strathfield 全新公寓 | Meriton悉尼最著名的城市公寓,价格最实惠,详情>>> | ****Casino网络辅导课程***** | 0.75%*低於浮动房屋贷款利率 | Google 搜索 | 澳洲中文网首页 | 澳洲地产网
成人聊天网
澳洲宝华房地产
澳洲留学移民 专业小提琴教学 澳洲移民课程
便宜购物 澳洲味千拉面 澳大利亚墨尔本学校 澳大利亚海运
澳洲地产 ABC集团 澳洲地产网


 
标题: CSS入门之布局实例
城市童话 (╰☆悉尼☆)
Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9




社区区长
等级: 79 -
生命值 : 2948 / 2948
魔力值 : 6408 / 17921
经验值 : 61 %

UID: 10239
精华: 54
积分: 38206
帖子: 19224
威望: 38206
澳币: 40
现金: 170196
存款: 2147483647
魅力: 4719
阅读权限: 200
注册: 2005-10-10
状态:
荣誉勋章
★★荣誉勋章★★
发表于 2006-8-3 15:37  资料  短消息  加为好友  添加 城市童话 为MSN好友 通过MSN和 城市童话 交谈 QQ
CSS入门之布局实例



ABC环球集团 | Meriton,悉尼最著名的城市公寓开发商 | 澳洲免费贷款在线申请 | 澳美留学移民 | 澳洲下一位百万富翁
----------------------------------------------------------------------------------------------------------------------------------------------------------
接下来开始要真正设计布局了。和传统的方法一样,你首先要在脑海里有大致的轮廓构想,然后用photoshop把它画出来。你可能看到有关web标准的站点大都很朴素,因为web标准更关注结构和内容,实际上它与网页的美观没有根本冲突,你想怎么设计就怎么设计,用传统表格方法实现的布局,用DIV也可以实现。技术有一个成熟的过程,把DIV看成和TABLE一样的工具,如何运用就看你的想象力了。
注:在实际应用过程中,DIV在有些地方的确不如表格方便,比如背景色的定义。但任何事情都有得有失,取舍在于你的价值判断。好,不罗嗦了,我们开始:
1.确定布局

用表格的设计方法的话,一般都是上中下三行布局

用DIV的话,我考虑使用三列来布局,成为这样

2.定义body样式
先定义整个页面的body的样式,代码如下:
body { MARGIN: 0px;
PADDING: 0px;
BACKGROUND: url(../images/bg_logo.gif) #FEFEFE no-repeat right bottom;
FONT-FAMILY: 'Lucida Grande','Lucida Sans Unicode','宋体','新宋体',arial,verdana,sans-serif;
COLOR: #666;
FONT-SIZE:12px;
LINE-HEIGHT:150%; }

以上代码的作用在上一天的教程有详细说明,大家应该一看就明白。定义了边框边距为0;背景颜色为#FEFEFE,背景图片为bg_logo.gif,图片位于页面右下角,不重复;定义了字体尺寸为12px;字体颜色为#666;行高150%。
3.定义主要的div
初次使用CSS布局,我决定采用固定宽度的三列布局(比自适应分辨率的设计简单,hoho,别说我偷懒,先实现简单的,增加点信心嘛!)。分别定义左中右的宽度为200:300:280,在CSS中如下定义:
/*定义页面左列样式*/
#left{ WIDTH:200px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: #CDCDCD;
}
/*定义页面中列样式*/
#middle{ POSITION: absolute;
LEFT:200px;
TOP:0px;
WIDTH:300px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: #DADADA;
}
/*定义页面右列样式*/
#right{ POSITION: absolute;
LEFT:500px;
TOP:0px;
WIDTH:280px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: #FFF; }

注意:定义中列和右列div我都采用了POSITION: absolute;,然后分别定义了LEFT:200px;TOP:0px;和LEFT:500px;TOP:0px;这是这个布局的关键,我采用了层的绝对定位。定义中间列距离页面左边框200px,距离顶部0px;定义右列距离页面左边框500px,距离顶部0px;。
这时候整个页面的代码是:

欢迎进入新《网页设计师》:web标准教程及推广
页面左列
页面中列
页面右列
这时候页面的效果仅仅可以看到三个并列的灰色矩形,和一个背景图。但是我希望高度是满屏的,怎么办呢?
4.100%自适应高度?
为了保持三列有同样的高度,我尝试在#left、#middle和#right中设置"height:100%;",但发现完全没有预想的自适应高度效果。经过一番尝试后,我只好给每个div一个绝对高度:"height:1000px;",并且随着内容的增加,需要不断修正这个值。难道没有办法自适应高度了吗?随着阿捷自己学习的深入,发现一个变通的解决办法,实际上根本不需要设置100%,我们已经被table思维禁锢太深了,这个办法在下一节的学习中详细介绍。





顶部
[广告] 悉尼RHODES豪华雅柏文发展商大减价 | 悉尼Carlingford 花园式雅柏文全新推出 | 全澳最优惠的贷款利率,不成功不收费,在线预批,保证24小时回复
xjlf123 (大牙)
Rank: 2Rank: 2



澳洲幼稚园
等级: 5 - 驾轻就熟
生命值 : 0 / 108
魔力值 : 14 / 635
经验值 : 35 %

UID: 85107
精华: 0
积分: 81
帖子: 43
威望: 81
澳币: 0
现金: 147
存款: 0
魅力: 9
阅读权限: 20
注册: 2006-11-24
来自: 中国新疆
状态:
发表于 2006-11-24 20:50  资料  主页 短消息  加为好友  QQ
谢谢 !!!!!!!!!!!!!!!!!!!!






我曾有一种生活从来也不舍得给触摸,视生命一样细心的看护可是现在丢了~~~~
顶部
[广告] 悉尼RHODES豪华雅柏文发展商大减价 | 悉尼Carlingford 花园式雅柏文全新推出 | 全澳最优惠的贷款利率,不成功不收费,在线预批,保证24小时回复
夜灵乄蝎 (B&G)
Rank: 3Rank: 3Rank: 3
夜灵乄蝎


澳洲高中生
等级: 23 - 炉火纯青
生命值 : 43 / 558
魔力值 : 218 / 3772
经验值 : 32 %

UID: 79274
精华: 0
积分: 1967
帖子: 654
威望: 1967
澳币: 0
现金: 1442
存款: 400
魅力: 14
阅读权限: 70
注册: 2006-8-1
来自: SYDNEY
状态:
发表于 2007-3-14 17:49  资料  短消息  加为好友 
这个也收以下





夜灵乄蝎
*&%@!)(*&^%$#@!
顶部
[广告] 悉尼RHODES豪华雅柏文发展商大减价 | 悉尼Carlingford 花园式雅柏文全新推出 | 全澳最优惠的贷款利率,不成功不收费,在线预批,保证24小时回复
 


澳大利亚楼盘 澳大利亚免费贷款

当前时区 GMT+11, 现在时间是 2008-11-23 07:20

澳大利亚中文网 Powered by Discuz! 5.5.0 © 2001-2007
Processed in 0.018128 second(s), 6 queries , Gzip enabled

清除 Cookies - 联系我们 - 澳洲中文网 - Archiver