時(shí)間：2015-06-28 00:00:00 來源：IT貓撲網(wǎng) 作者：網(wǎng)管聯(lián)盟 我要評(píng)論(0)
瀏覽器顯示頁面是一行一行的按順序執(zhí)行代碼，也就是說寫在前面的先執(zhí)行顯示，而對(duì)于左中右3欄布局的設(shè)計(jì)，代碼要么是從左-->中-->右來書寫，要么就是到過來從右-->中-->左來書寫，要做到要求的效果，那首先要書寫的是中欄的代碼。
所以我首先定義了一個(gè)id=m的DIV，并且padding-left:150px，定義這個(gè)是為了給左欄留出140PX的顯示位置，然后再在這個(gè)DIV里面嵌套定義一個(gè)id=middle的DIV，我用position:absolute的屬性(絕對(duì)定位);然后再定義左欄left和右欄right。用position:absolute的屬性有一個(gè)不好的地方就是它象photoshop里的層一樣，它的自動(dòng)延伸并不會(huì)帶動(dòng)整個(gè)布局的延伸，所以會(huì)遮住一些頁面元素，比如我們通常會(huì)在網(wǎng)站的最下面寫上一些copyright的信息，如果用先顯示中欄的這種方法，如果不做處理的話，這些信息會(huì)被遮蓋住。處理的辦法就是使用javascript,讓左右2欄的高度隨中欄一起自動(dòng)延伸。
|
以下為引用的內(nèi)容： |
關(guān)鍵詞標(biāo)簽：方法,顯示,最先,布局,
相關(guān)閱讀
熱門文章
DIV+CSS網(wǎng)頁布局常用的一些基礎(chǔ)知識(shí)整理
完美解決CSS網(wǎng)頁水平居中
XHTML+CSS兼容解決方案
CSS網(wǎng)頁布局困擾新手的八個(gè)問題
人氣排行 DIV CSS完美兼容IE6/IE7/FF的通用方法 CSS實(shí)例：list-style-type在IE與FF中奇怪的現(xiàn)象解析-CSS布局實(shí)例 CSS實(shí)例:通過定義漸變邊框給圖片加陰影 CSS常用技巧之一 禁止文字自動(dòng)換行 網(wǎng)頁頁面設(shè)計(jì)中CSS十大注意 解決用CSS控制DIV居中失效的問題 css div設(shè)置float后高度不能自動(dòng)增加 讓CSS兼容IE和Firefox的技巧集合