网页最窄770px最宽1024px经典布局_网页制作_学习笔记★闵涛★计算机学习电脑编程软硬件技巧


	转至繁体中文版	\| 网站首页 \| 图文教程 \| 资源下载 \| 站长博客 \| 图片素材 \| 武汉seo \| 武汉网站优化 \|

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

作者：闵涛文章来源：闵涛的学习笔记点击数：671 更新时间：2009/4/23 13:49:13

最典型实用的上中下，并且中间分三列的布局，这个例子有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

附：布局代码

<！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>最窄770px最宽1024px的经典布局</title> <meta http-equiv="Content-Type" content="text/html； charset=utf-8" />

* margin：0； padding：0；body padding：10px 0 0 0； color：#000； background：#fff； text-align：center；#wrapper width：auto； border：1px solid #000； min-width：770px； max-width：1024px； text-align：left； margin-left：auto； margin-right：auto； position：relative；

#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 #left position：relative；/*ie needs this to show float */ width：130px；float：left；left：-1px；margin-left：-129px；/*must be 1px less than width otherwise won"t push footer down */

* html #left margin-right：-3px；/* 3px jog*/ * html #outer/* 3px jog*/ margin-left：127px； margin-right：127px；p margin-bottom：1em； padding：0 5px

#right position：relative；/*ie needs this to show float */ width：130px； float：right； left：1px；margin-right：-129px；/*must be 1px less than width otherwise won"t push footer down */

* html #right margin-right：-130px； margin-left：-3px/* stop float drop in ie + 3px jog */

#footer width：100%； clear：both； line-height：50px； border-top：1px solid #000； background：#ffc； color：#000； text-align：center； position：relative；#clearheader height：72px；/*needed to make room for header*/ #centrecontent float：right； width：100%； position：relative；

html>body #centrecontent margin：0 -0.5%/*moz needs this*/。outerwrap float：left； width：99%；。clearer height：1px； overflow：hidden； margin-top：-1px； clear：both；

/* mac hide\*/ * html #outer， * html #wrapper，* html #centrecontent height：1% /* end hide */

</style> <！——[if gte IE 5]> <style type="text/css"> 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" ）；</style> <！[endif]——> </head>

<div id="centrecontent"> <h1>Min width of 770px and max width of 1024px</h1> <p>centre content goes here centre content goes here ： centre content goes here centre content goes here ： centre content goes here centre content goes here ： centre content goes here centre content goes here： centre content goes here centre content goes here ： centre content goes here centre content goes here ： centre content goes here centre content goes here ： centre content goes here centre content goes here： centre content goes here centre content goes here ： centre content goes here centre content goes here ： centre content goes here centre content goes here ： centre content goes here centre content goes here： centre content goes here centre content goes here ： centre content goes here centre content goes here ： centre content goes here centre content goes here ： centre content goes here centre content goes here： centre content goes here centre content goes here ： centre content goes here centre content goes here ： centre content goes here centre content goes here ： centre content goes here content goes here ： </p> </div>

<div id="left"> <p>Left content goes here ： Left content goes here ： Left content goes here ： Left content goes here ： Left content goes here ： Left content goes goes here ： Left content goes here ： </p> </div>

</div>

<！——end outer wrap ——> <div id="right"> <p>Start Right content goes here ： Right content goes here ： Right content goes here ： Right content goes here ： Right content goes here ： Right content goes here ： Right content goes here ： Right content goes here： Right content goes here ： </p> </div>

</div>

<div id="footer">Footer - | - Footer </div> <div id="header">Header </div>

</div> </body> </html>

[网页制作]最窄770px最宽1024px经典布局

教程录入：mintao 责任编辑：mintao

上一篇教程： w3c技术架构介绍

下一篇教程：反spam与spam间的较量

【字体：小大】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】

注：本站部分文章源于互联网，版权归原作者所有！如有侵权，请原作者与本站联系，本站将立即删除！本站文章除特别注明外均可转载，但需注明出处！ [MinTao学以致用网]