标签

毛泽东思想汇编 (355) 继承并进行改良了的文革汇编 (218) 杨佳案文学汇编 (189) 生命生存经济政治文化社会 (185) 生命自身生存:经济政治文化社会 (169) 薄熙来 (126) 生命繁殖遗传变异进化论性世界 (71) 系统构件设置 (59) 温家宝 (47) 推荐更多精彩热门文章 (46) 免费热门图片自拍动画 (45) 本期精选热点导航 (44) 最新免费模板 (35) 免费博客工具 (29) 胡锦涛 (28) 网络电脑知识经验交流 (25) 王铮 (22) 免费成人图片AV艳照 (21) 王立军 (21) 文章构件设置 (15) 薄谷开来 (13) 网站史记 (12) 网站故障及维护 (12) 免费热门视频偷拍电影 (10) 汉语900句 (10) 创造创新发明专利公益 (9) 吴邦国 (8) 海伍德 (8) 习近平 (7) 唱红打黑 (7) 影帝 (7) 重庆模式 (6) 周永康 (5) 文革 (5) 秦桧 (5) 免费成人视频AV电影 (4) 全国人大 (4) 十八大 (4) 岳飞 (4) 毛泽东 (4) 项观奇 (4) 江泽民 (3) 温总理 (3) 乌有之乡 (2) 免费古典民乐歌剧戏曲FLASH音乐 (2) 免费网络电视直播 (2) 国务院 (2) 左派 (2) 新华社 (2) 杨佳 (2) 社会主义. (2) 财产公开 (2) 黄奇帆 (2) 18大 (1) 中国人权 (1) 中纪委 (1) 二奶 (1) 人大代表 (1) 克林顿 (1) 六四 (1) 北京大学 (1) 占领华尔街 (1) 反华势力 (1) 喝茶 (1) 基辛格 (1) 封杀 (1) 政治体制改革 (1) 曾庆红 (1) 朱镕基 (1) 李希光 (1) 杜建国 (1) 法轮功 (1) 爆料 (1) 王阳明 (1) 立案调查 (1) 翻墙 (1) 腐败 (1) 艾未未 (1) 茅以轼 (1) 路透社 (1) 进步社 (1) 陈光诚 (1) 黑社会 (1)

2009年4月8日星期三

网站博客网页自动满屏模块html代码集成 系统构件设置

网站博客网页自动满屏模块html代码集成 系统构件设置




自动换行





未知标题外






……

首先我们定义body和顶部第一行#header,这里面的关键是body中的text-align:center;和header中的margin-right: auto;margin-left: auto;,通过这两句使得header居中。注:其实定义text-align:center;就已经在IE中实现居中,但在mozilla中无效,需要设置margin:auto;才可以实现mozilla中的居中。


接下来定义中间的两列#right和#left。为了使中间两列也居中,我们在它们外面嵌套一个层#contain,并对contain设置margin:auto;,这样#right和#left就自然居中了。

注意中间两列定义的顺序,我们首先定义#right,通过float: right;让它浮在#contain层的最右边。然后再定义#left,通过float: left;让它浮动在#right层的左面。这和我们以前表格从左到右定义的顺序正好相反(更正:先左后右、还是先右后左都可以实现,根据自己需要设计)。


我们看到代码中在#contain和两列之间还嵌套了一个层#mainbg,这个层是做什么用的呢?这个层就是用来定义#contain的背景的。你肯定会问,为什么不直接在#contain中定义背景,而要多套一层呢?那是因为在#contain中直接定义的背景,在mozilla中将显示不出来,必须定义高度值才可以。如果定义了高度值,#right层就无法实现根据内容的自动伸缩。为了解决背景和高度问题,就必须增加这么一个#mainbg层。窍门在于#mainbh这个层定义float: left;,因为float使层自动有宽和高的属性。(暂且这么理解:)

最后是定义底部的#footer层。这个定义的关键是:clear:both;,这一句话的作用是取消#footer层的浮动继承。否则的话,你会看到#footer紧贴着#header显示,而不是在#right的下面。

主要的层定义完毕,这个布局就ok了。补充一点:你看到我还定义了一个.text{margin:0px;padding:20px;},这个class的作用是使内容的外围有20px的空白。为什么不直接在#right里定义margin或者padding呢,因为mozilla和IE对css盒模型的解释不一致,直接定义margin/padding会造成mozilla里布局变形。我一般采用内部再套一层的做法来解决。

……

没有评论: