<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 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"> <!-- html {margin: 0; padding: 0;}
body {margin: 0; padding: 0; font-family: "Palatino Linotype", Georgia, "Times New Roman", Times, serif; font-size: small; color:#333;background: #ee8 repeat-y url(images/browncol.gif);} /*** Image is 180px wide, and 20px high ***/
pre {margin: 0; font-family: verdana, sans-serif; font-size: .9em;}
/******************************************************************************* Positioning rules *******************************************************************************/ h1, h2 { font-size: 22px; margin: 0; color: #040; background-color: #c83; /*** The header and footer have backgrounds, to cover the 2-tone body BG ***/ border-top: 4px solid #000; border-bottom: 5px solid #000; padding: 3px 0 3px 1em; }
h2 {background-color: #638; color: #fff;}
div#leftbox { /*** No side padding or borders, to avoid the IE5.x box model problem ***/ position: absolute; left: 10px; width: 150px; color: #333; padding-top: 10px; }
#middlebox { margin: 0 34% 0 170px; border-left: 3px solid #000; border-right: 3px solid #000; padding: 10px; background-color: #dda; /*** This div has a background to cover the 2-tone body BG ***/ }
div#rightbox { /*** No side padding or borders, to avoid the IE5.x box model problem ***/ position: absolute; right: 25px; /*** IE5/mac will show a horizontal scrollbar if this is less than 16px, or other units are used http://www.l-c-n.com/IE5tests/right_pos/ ***/ width: 30%; color: #820; padding-top: 10px; } --> </style> </head> <body> <h1> 自由伸展的三栏式版面(Three Column Stretch)(页首) </h1> <div id="leftbox"> <pre> <strong>#leftbox</strong> { position: absolute; left: 10px; width: 180px(150px?); } </pre> <p> <strong>这个栏段</strong>的背景是利用 body 卷标设定的图片,以垂直方向重复贴上所产生的。图片的宽度和中间栏段的左边界(margin)相等,高度为20px,这样可以减少图片重复的次数,加快演算上色的速度。 <p> </p> 这一栏的内容(#leftbox)以绝对位置(absolutely positioned)的方式放在左边的区域。另外因为底层背景图片的尺寸限制,需要给定一个以像素作单位的“宽度(width)”值。