当前位置：首页 > 资讯 > 技术文档

div布局的自由伸展三栏式版面的代码

时间：2022-11-01 22:44 编辑：来源：阅读：
扫一扫，手机访问

摘要：div布局的自由伸展三栏式版面的代码

自由伸展的三栏式版面 
<meta content="August 24, 2002" name="Big John"></meta> 
<meta content="text/html; charset=GB2312" http-equiv="content-Type"></meta>  
<meta content="true" name="mssmarttagspreventparsing"></meta> 
<meta content="demo,test,big john,big,john,positioniseverything,css,html,what else do you want from me!?" name="keywords"></meta> 
<meta content="A demo of 3 fluid, full height columns, including header and footer, all with different BGs." name="description"></meta> 
<meta content="global" name="distribution"></meta> 
<meta content="document" name="resource-type"></meta> 
<meta content="all" name="robots"></meta> 
<meta content="no" http-equiv="imagetoolbar"></meta> 
<meta content="no-cache" http-equiv="pragma"></meta>

<h1> 
自由伸展的三栏式版面（Three Column Stretch）（页首） 
</h1>

<div id="leftbox"> 
<pre>[b]#leftbox[/b] { 
position: absolute; 
left: 10px; 
width: 180px(150px?); 
} 
</pre>

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

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

johnthebig66@yahoo.com  
©positioniseverything
 
最后更新日期： September 6, 2002
 
Created August 24, 2002

[url=http://www.1sucai.cn/../../ccca.nctu.edu.tw/~hlb/trans/pie/thr.col.stretch.html]繁体中文翻译：[/url][b]yyhuang[/b]
 
简体中文转换:
 
[url=http://www.1sucai.cn/../../www.onestab.net/default.htm][b]onestab[/b][/url]

[b]以下是填满栏段用的[/b]

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 [i]want[/i] to change.

Why did the egg cross the road?
 
Answer: It had an inclination.

</div>

[h1] 
自由伸展的三栏式版面（Three Column Stretch）（页尾） 
[/h1]

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

全部评论(0)

上一篇：css利用A标签的背景可能作出很有意思的效果第1/2页
下一篇：div+css如何实现页脚的置底

资讯排行榜
更多>>