三栏复合布局演示

2022-07-15 80酷酷网 80kuku.com

From:http://www.onestab.net/a/pie/3colcomplex.html<!DOCTYPE html PUBLIC "-//W3C//DTD 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<title>自由伸展的三栏式版面</title>
<meta name="Big John" content="August 24, 2002" />
<meta http-equiv="content-Type" content="text/html; charset=GB2312" />
<meta name="mssmarttagspreventparsing" content="true" />
<meta name="keywords" content="demo,test,big john,big,john,positioniseverything,css,html,what else do you want from me!?" />
<meta name="description" content="A demo of 3 fluid, full height columns, including header and footer, all with different BGs. " />
<meta name="distribution" content="global" />
<meta name="resource-type" content="document" />
<meta name="robots" content="all" />
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="pragma" content="no-cache" />

<style type="text/css">

</style>
</head>
<body>
<h1>
自由伸展的三栏式版面（Three Column Stretch）（页首）
</h1>
<div id="leftbox">
<pre>
#leftbox {
position: absolute;
left: 10px;
width: 180px(150px?);
}
</pre>

这个栏段的背景是利用 body 卷标设定的图片，以垂直方向重复贴上所产生的。图片的宽度和中间栏段的左边界(margin)相等，高度为20px，这样可以减少图片重复的次数，加快演算上色的速度。


这一栏的内容(#leftbox)以绝对位置(absolutely positioned)的方式放在左边的区域。另外因为底层背景图片的尺寸限制，需要给定一个以像素作单位的“宽度(width)”值。


<a href="#">测试用连结</a>

</div>
<div id="rightbox">
<pre>
#rightbox {
position: absolute;
right: 2%;
width: 30%;
}
</pre>

这个栏段也能显示“body”的背景，但是因为“body”的背景
图片只在垂直方向重复，而且仅与中间栏段的左边界同宽，所以这边显示的是“body”的背景颜色(background-color)。
这个栏段的“宽度(width)”和右边界的区域是用百分比作单位，你想用其它单位也可以。


如果页面比 640px 还窄，中间和右边栏段使用的“pre”卷标会导致内容重叠。


<a href="#">测试用连结</a>


</div>

<div id="middlebox">

<div class="return">
<a href="index.html">返回 p.i.e.</a>
</div>

<pre>
#middlebox {
margin: 0 34% 0 170px;
border-left: 2px solid #000;
border-right: 2px solid #000;
padding: 0 10px 10px;
background-color: #6b9;
}
</pre>

中间栏段有设定背景色，以便跟右边栏段作区分。
这个栏段也需要补白(padding)和边框(border)，不过因为没有设定“宽度(width)”属性，并不会触发 IE5.x 的区块模块(box model)问题。


这个栏段也必须是最长的栏段，并且用你支持的最大分辨率(resolution)浏览时，仍要能够延伸到检视区(viewport)底端下方，否则“body”的背景就会在页尾(footer)下方出现。



这整个范例没有在任何栏段里宣告“高度(height)”属性，这是为了避掉一些浏览器表现“高度(height)”属性的独特方式。
因为这些条件的限制，这个版面非常适合那些总是有很长的中间栏段的网页，像是 weblogs。


页首、页尾和中间栏段是“固定的(static)”（或说“相对的(relative)”），而这三者一起定义了网页的尺寸。你可以帮页首和页尾指定“高度(height)”。


在原始文件里，以绝对位置表示的 div#rightbox 放置在 div#leftbox 之后，
因此这些 div 的“top”属性可以忽略。
这会让它们待在它们该在的垂直方向起点，也就是说它们是固定的（直接连在固定的页首下）。
所以如果页首因为额外的内容扩大，三个栏段都会往下调整，这样不是很棒吗？


Mozilla 中，因为垂直方向的舍入误差(rounding error)，在某些分辨率里，页尾下方可能有 1px 的空隙，
<a href="mozshift.html">这个范例</a>描述得更详细。




Nav4 中没办法使用像“div#leftbox”这类语法，所以请用“#leftbox”来代替。我的写法只是为了要明确地表示。


致谢：再次感谢<a href="http://www.l-c-n.com/">Philippe Wittenbergh</a>
，因为他的帮忙，让这个范例更为完善。更感谢
<a href="http://www.mark.ac/help/">Mark Howells</a>
，因为他提供了最初的 body 背景点子。



<a href="http://users.rraz.net/mc_on_the_rocks/"
title=" My mountain bike site ">Big John</a>

<a href="mailto:johnthebig66yahoo.com" title="If you've found something new and
interesting to say about any subject, please contact me. I want to know! ">e-mail</a>
©positioniseverything 
最后更新日期： September 6, 2002 
Created August 24, 2002


<a href="http://ccca.nctu.edu.tw/~hlb/trans/pie/thr.col.stretch.html" title="">繁体中文翻译：</a>yyhuang 

简体中文转换: 
<a href="http://www.onestab.net/">onestab</a>
 

以下是填满栏段用的 
Why don't cannibals eat clowns? 
Answer: They taste funny. 
What is the difference between a lousy golfer and a lousy skydiver? 

Answer: A lousy golfer goes WHAP! "Oh crap!". A lousy skydiver goes "Oh crap!" WHAP! 

Did you hear about the geneticist that tried to cross a potato and a chicken? 
He wanted to produce a chicken that would definitely NOT cross the road, but instead,
got a bunch of potatoes that sat around pecking eachother's eyes out. 
How many Psychiatrists does it take to change a light bulb? 
Answer: Only one, but the bulb has to really want to change. 
Why did the egg cross the road? 
Answer: It had an inclination.


</div>

<h2>
自由伸展的三栏式版面（Three Column Stretch）（页尾）
</h2>
</body>
</html>