IT学习者 | 文章大全 | 技术文档 | 桌面壁纸 | 实用查询 | 网络电台 | 成语 | 歇后语 | 网址 | 下载 | 周公解梦 | 生日密码 | 电视剧365 | Flash
 您现在的位置: IT学习者 >> 文章大全 >> 网页制作 >> HTML&CSS

最窄770px最宽1024px经典布局

【 作者:一叶千鸟    来源:一叶千鸟的Blog  更新时间:2006-6-7 | 字体:

最典型实用的上中下,并且中间分三列的布局,这个例子有2个特点:

1. 中间三列效果,可以任意实现单列背景色。
2. 整体最窄770px,最宽1024px,也就是说窗口小于770xp就出底部滚动条,如果大于1024px自动屏幕居中。

IE6.0和FF1.5测试通过

效果浏览

分析:

最外层的wrapper把所有内容都嵌套在里边,整体相对定位。max min已经很好的控制了最窄最宽值,但对IE没有作用。如果没有其他布局的穿插,这一层其实写在body内就可以,少一层嵌套。

#wrapper{ width:auto; border:1px solid #000; min-width:770px; max-width:1024px; text-align:left; margin-left:auto; margin-right:auto; position:relative;}

wrapper 下级的 outer header footer

其中header绝对定位,footer 相对定位;outer分别对左右有130px的外边距,这是兼容非IE的关键。

#outer{ margin-left:130px; margin-right:130px; background:silver; border-left:1px solid #000; border-right:1px solid #000; color: #000;}
#header{ position:absolute; top:0; left:0; width:100%; height:70px; line-height:70px; border-bottom:1px solid #000; overflow:hidden; background:#0ff; text-align:center; font-size:xx-large}
#footer { width:100%; clear:both; line-height:50px; border-top:1px solid #000; background:#ffc; color:#000; text-align:center; position:relative;}

outer 下级的 clearheader outerwrap right clearer

clearheader 用做填补header的空白,clearer 是一个常用的填充hack用法。
outerwrap 宽为什么是99%,而不是100%?因为他的上层outer有边框,100%宽再加2个边框象素就会撑大,FF有明显效果。
right 的处理很经典,IE下解析为定位,FF下则为浮动。负边距的处理也刚好使用上outer留出的空白。

#clearheader{ height:72px;}
.outerwrap { float:left; width:99%;}
#right {
  position:relative;
  width:130px; float:right; left:1px;
  margin-right:-129px;
}
* html #right { margin-right:-130px; margin-left:-3px}
.clearer{ height:1px; overflow:hidden; margin-top:-1px; clear:both;}

outerwrap 内的 centrecontent left clearer 就很简单了,思路类似上边说明。

<!--[if gte IE 5]> 指定IE5.0及版本以上浏览器有效

使用expression方法实现对IE5.0及以上版本的宽度条件控制。

body {width:expression( documentElement.clientWidth < 770 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 770 ? "770" : "auto") : "770px") : "auto" );}
#wrapper {width:expression( documentElement.clientWidth > 1024 ? (documentElement.clientWidth == 0 ? (body.clientWidth >1024 ? "1024" : "auto") : "1024px") : "auto" );}

开始只想搞清楚老外是如何实现居中min max的,没想到最后是expression,太失望了,其实这里使用脚本控制更好。另外,老外原文的 Min width of 800px 是错的,CSS定义就是770px,后来截屏确认也是770px。

总的来说这是一个很复杂的布局例子,融合了很多经典用法和定义,同时很传统和实用。类似的复杂布局,四层嵌套实现对于传统布局来说还是比较有优势的。

Referrence:
3 col layout with equalising columns and footer http://www.pmob.co.uk/temp/min-max-3col.htm

相 关 文 章
没有相关文章
相 关 软 件
没有相关下载
逃生 放生 黄玫瑰 想太多 那滋味 擦肩而过 放手去爱 北京欢迎你 依然在一起 吻得太逼真 感动天感动地 坐上火车去拉萨 怎么会狠心伤害我
心碎 冲动 小太阳 别碰我 蒲公英 千山万水 改变自己 一定要爱你 等爱的玫瑰 陷入爱里面 北极星的眼泪 最后一次的温柔 亲爱的那不是爱情
光荣 火花 坏女人 日不落 樱花草 为你写诗 独家记忆 夏天的味道 寂寞才说爱 忘不掉的伤 爱上你是个错 第三者的第三者 地球人都知道我爱你
假如 相思 是非题 有缘人 舍不得 我的答铃 死而无憾 外滩十八号 越爱越难过 123木头人 和寂寞说分手 爱上你是我的错 爱情里没有谁对谁错
加入收藏留言建议自助友情链接普通友情链接站长的Blog
版权所有   COPYRIGHT 2002-2008 ★IT学习者★ ALL RIGHTS RESERVED.