用CSS floats建立三欄頁布局

2021-03-31 08:56:58 字數 702 閱讀 3118

html**中各部分出現的順序是非常重要的。左欄和右欄div必須在中欄之前出現。這樣才可以讓這兩個邊欄浮動到它們的位置上(螢幕兩側),並讓中欄的內容將「流」入它們之間的空間。如果瀏覽器在乙個或者兩個邊欄div之前先發現中欄,那麼中欄將佔據螢幕的一側或者兩側,這樣浮動的部分就會跑到中欄的下面而不是中欄的旁邊了。

div#header和div#footer樣式(style)中的clear:both申明用來確保這浮動部分不會佔據標題和頁尾的空間。div#header樣式中的padding:1px申明用來消除頁頭背景色中的異常邊,如果padding設定為零,那麼在***scape瀏覽器中就會看到這個異常。

div#left樣式中的float:left申明是用來把左欄擠壓到左側。width:150px申明用來設定欄的固定寬度,不過你也可以把它的寬度設定為其它具體值。類似的,div#right樣式中的float:right申明用來把右欄div擠壓到右側。在本例中,float把左欄和右欄完全擠壓到瀏覽器視窗的左邊緣和右邊緣。然而,如果這些div被其它div包含,那麼float將會把它們擠壓到包含它們的div的邊緣。

在div#middle樣式中,clear申明允許中欄的內容「流淌」在兩個邊欄之間。padding:0px 160px 5px 160px申明設定了到左欄和右欄的填充,這樣允許150象素寬度的欄div,在加上10象素的間距。

這個例子非常粗糙和簡單,但是它很好的演示了用浮動div來建立三欄液態布局的邊欄這一基本技術。

CSS floats建立三欄網頁布局

三欄布局是目前最常見的網頁布局,主要頁內容放在中間一欄,邊上的兩欄放置導航鏈結之類的內容。基本布局一般是標題之下放置三欄,三欄佔據整個頁面的寬度,最後在頁的底端放置頁尾,頁尾也佔據整個頁面寬度。絕大多數網頁設計者都熟悉傳統的網頁設計技術,用這些技術可以生成帶有 建立固定寬度布局或者 液態 它可以根據...

python三種多執行緒建立風格,第三種用的最廣泛

本博文源於python炫酷技能,主要講述三種多執行緒的建立。尤其是第三種基於類繼承構造是大型工程必知的內容 所謂匿名函式構造就是即用即走那種 import threading defshow i print 被執行了!str i threading.thread target show,args 2...

用VS2010建立三層架構開發模式及三層架構的研究

三層架構的研究三層體系結構的概念使用者介面表示層 usl 業務邏輯層 bll 資料訪問層 dal bll將usl與dal隔開了,並且加入了業務規則 在 資料訪問層 中,最好不要出現任何 業務邏輯 也就是說,要保證 資料訪問層 的中的函式功能的原子性!即最小性和不可再分。資料訪問層 只管負責儲存或讀取...