亚洲无码在线观看不卡,噼里啪啦国语在线播放

主頁(yè) > 知識(shí)庫(kù) > div布局的自由伸展三欄式版面的代碼

div布局的自由伸展三欄式版面的代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "../../../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）（頁(yè)首） </h1> <div class="asqw06c" id="leftbox"> <pre> #leftbox { position: absolute; left: 10px; width: 180px(150px?); } </pre> 這個(gè)欄段的背景是利用 body 卷標(biāo)設(shè)定的圖片，以垂直方向重復(fù)貼上所產(chǎn)生的。圖片的寬度和中間欄段的左邊界(margin)相等，高度為20px，這樣可以減少圖片重復(fù)的次數(shù)，加快演算上色的速度。 這一欄的內(nèi)容(#leftbox)以絕對(duì)位置(absolutely positioned)的方式放在左邊的區(qū)域。另外因?yàn)榈讓颖尘皥D片的尺寸限制，需要給定一個(gè)以像素作單位的"寬度(width)"值。 測(cè)試用連結(jié) </div> <div class="qkygeea" id="rightbox"> <pre> #rightbox { position: absolute; right: 2%; width: 30%; } </pre> 這個(gè)欄段也能顯示"body"的背景，但是因?yàn)?body"的背景 圖片只在垂直方向重復(fù)，而且僅與中間欄段的左邊界同寬，所以這邊顯示的是"body"的背景顏色(background-color)。 這個(gè)欄段的"寬度(width)"和右邊界的區(qū)域是用百分比作單位，你想用其它單位也可以。 如果頁(yè)面比 640px 還窄，中間和右邊欄段使用的"pre"卷標(biāo)會(huì)導(dǎo)致內(nèi)容重疊。 測(cè)試用連結(jié) </div> <div class="ms4sise" id="middlebox"> <div id="qwg4qs6" class="return"> 返回 p.i.e. </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> 中間欄段有設(shè)定背景色，以便跟右邊欄段作區(qū)分。 這個(gè)欄段也需要補(bǔ)白(padding)和邊框(border)，不過(guò)因?yàn)闆](méi)有設(shè)定"寬度(width)"屬性，并不會(huì)觸發(fā) IE5.x 的區(qū)塊模塊(box model)問(wèn)題。 這個(gè)欄段也必須是最長(zhǎng)的欄段，并且用你支持的最大分辨率(resolution)瀏覽時(shí)，仍要能夠延伸到檢視區(qū)(viewport)底端下方，否則"body"的背景就會(huì)在頁(yè)尾(footer)下方出現(xiàn)。 這整個(gè)范例沒(méi)有在任何欄段里宣告"高度(height)"屬性，這是為了避掉一些瀏覽器表現(xiàn)"高度(height)"屬性的獨(dú)特方式。 因?yàn)檫@些條件的限制，這個(gè)版面非常適合那些總是有很長(zhǎng)的中間欄段的網(wǎng)頁(yè)，像是 weblogs。 頁(yè)首、頁(yè)尾和中間欄段是"固定的(static)"（或說(shuō)"相對(duì)的(relative)"），而這三者一起定義了網(wǎng)頁(yè)的尺寸。你可以幫頁(yè)首和頁(yè)尾指定"高度(height)"。 在原始文件里，以絕對(duì)位置表示的 div#rightbox 放置在 div#leftbox 之后， 因此這些 div 的"top"屬性可以忽略。 這會(huì)讓它們待在它們?cè)撛诘拇怪狈较蚱瘘c(diǎn)，也就是說(shuō)它們是固定的（直接連在固定的頁(yè)首下）。 所以如果頁(yè)首因?yàn)轭~外的內(nèi)容擴(kuò)大，三個(gè)欄段都會(huì)往下調(diào)整，這樣不是很棒嗎？ Mozilla 中，因?yàn)榇怪狈较虻纳崛胝`差(rounding error)，在某些分辨率里，頁(yè)尾下方可能有 1px 的空隙， 這個(gè)范例描述得更詳細(xì)。 Nav4 中沒(méi)辦法使用像"div#leftbox"這類(lèi)語(yǔ)法，所以請(qǐng)用"#leftbox"來(lái)代替。我的寫(xiě)法只是為了要明確地表示。 致謝：再次感謝Philippe Wittenbergh ，因?yàn)樗膸兔Γ屵@個(gè)范例更為完善。更感謝 Mark Howells ，因?yàn)樗峁┝俗畛醯?body 背景點(diǎn)子。 Big John e-mail ©positioniseverything 最后更新日期： September 6, 2002 Created August 24, 2002 繁體中文翻譯：yyhuang 簡(jiǎn)體中文轉(zhuǎn)換: onestab 以下是填滿欄段用的 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）（頁(yè)尾） </h2> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

您可能感興趣的文章:

利用JQuery動(dòng)畫(huà)制作滑動(dòng)菜單項(xiàng)效果實(shí)現(xiàn)步驟及代碼
javascript 仿QQ滑動(dòng)菜單效果代碼
jQuery 淡入淡出、展開(kāi)收縮菜單實(shí)現(xiàn)代碼
用Javascript 編寫(xiě)可以緩慢彈出收縮的層
JavaScript設(shè)置FieldSet展開(kāi)與收縮
js iframe網(wǎng)站后臺(tái)左右收縮型頁(yè)面腳本
jQuery+CSS實(shí)現(xiàn)菜單滑動(dòng)伸展收縮(仿淘寶)

標(biāo)簽：石家莊濰坊深圳玉樹(shù) 昭通濰坊商洛大同

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《div布局的自由伸展三欄式版面的代碼》，本文關(guān)鍵詞 div,布局,的,自由,伸展,三,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。