这个例子是最典型实用
上中下
并且中间分 3列css布局有以下2个特点:1.中间 3列效果
可以任意实现单列背景色
2.整体最窄770px
最宽1024px也就是说窗口小于770xp就出底部滚动条如果大于1024px自动屏幕居中最外层
wrapper把所有内容都嵌套在里边整体相对定位maxmin已经很好控制了最窄最宽值但对IE没有作用如果没有其他布局穿插这
层其实写在body内就可以少层嵌套#wrapper{width:auto;border:1pxsolid#000;min-width:770px;max-width:1024px;text-align:left;margin-left:auto;margin-right:auto;position:relative;}
wrapper下级
outerheaderfooter其中header绝对定位
footer相对定位；outer分别对左右有130px外边距这是兼容非IE关键#outer{margin-left:130px;margin-right:130px;background:silver;border-left:1pxsolid#000;border-right:1pxsolid#000;color:#000;}
#header{position:absolute;top:0;left:0;width:100%;height:70px;line-height:70px;border-bottom:1pxsolid#000;overflow:hidden;background:#0ff;text-align:center;font-size:xx-large}
#footer{width:100%;clear:both;line-height:50px;border-top:1pxsolid#000;background:#ffc;color:#000;text-align:center;position:relative;}
outer下级
clearheaderouterwraprightclearerclearheader用做填补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内
centrecontentleftclearer就很简单了思路类似上边介绍说明<!--[
gteIE5]>指定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\");}IE6.0和FF1.5测试通过
查看运行效果:=\"ubbbuttonrt\">[ 可先修改部分代码 再运行查看效果 ]
开始只想搞清楚老外是如何实现居中minmax
没想到最后是expression太失望了其实这里使用脚本控制更好另外老外原文Minwidthof800px是错CSS定义就是770px后来截屏确认也是770px总
来说这是个很复杂布局例子融合了很多经典使用方法和定义同时很传统和实用类似复杂布局 4层嵌套实现对于传统布局来说还是比较有优势
最新评论