div對齊與網頁布局詳解

2022-09-25 22:42:20 字數 1284 閱讀 4397

div布局之所以要學懂學透,是因為table的布局實在是難堪大用,如果是同處於乙個**之內,各行的規格分布根本就沒法調,例如下面的一段非常簡單的**:

無標題文件

11111gfykaguuyq111111111

11111111111111

11111111111111

11111111111111

11111111111111

11111111111111

11111111111111

11111111111111

本想寫出這樣的布局:

但實際上出來的效果卻是這樣:

這很正常,因為table布局中僅有第一行對於td的設定是起作用的,餘下行的td設定都會給第一行的td設定所覆蓋。

這個問題很嚴重,尤其是各位網頁設計師,把table的border屬性設定成0的情況下,很難想出發生了什麼?

解決這樣的問題,如果還是用table布局,那你有兩種方法,一是讓這兩行不處於同乙個**,二是使用**巢狀的方式。

不過這也太蛋疼了吧,每次布局都要用乙個新的**?而且指令碼對這麼多**如何編號?如何控制?

所以說table的網頁布局不堪大用,只能用於行內的布局,table在行內布局的作用對於div確實強大很多。

但是div布局同樣可以完成行內布局,只不過要定義好style中的float屬性,並且完成了一次行內布局,要使用style中的clear:both換行。

如上的圖層排放是通過如下的**所實現的:

div

而對於一些如導航條等固定在頁面首部或者頁面尾部的圖層,一些游離於體系之外的廣告圖層,則需要用到position的對齊方式,前者是fixed後者是absolute。

在上面的**中,繼續加入如下**:

游離於體系之外

游離於體系之外

則能夠出現如下效果:

被position:fixed的圖層,即使滾動條拉下來也是一直掛著頭部的:

上述關於「導航條」圖層與「廣告」圖層的兩行**可以放在任何位置,不影響網路布局。那麼,網頁的所有**演變成如下:

div

>

gfykaguuyqe="background:#00f; width:10%; height:100px; float:right;">

程式設計客棧0af; width:15%; height:100px;">

游離於體系之外

游離於體系之外

所以說,div布局比table布局強大得多,可控,可用。

本文標題: div對齊與網頁布局詳解

本文位址:

網頁布局 div

簡單的網頁布局 注釋就不寫了,看看就懂了,不懂看前面的兩個博文都有詳細講解 效果圖 網頁布局.html charset gb2312 網頁布局title rel stylesheet href style.css type text css head id first 導航div id second...

DIV布局之position詳解

div布局之position詳解 相對定位和絕對定位 定位標籤 position 包含屬性 relative 相對 absolute 絕對 1.position relative 如果對乙個元素進行相對定位,首先它將出現在它所在的位置上。然後通過設定垂直或水平位置,讓這個元素 相對於 它的原始起點進...

DIV與CSS布局需知

對於乙個網頁布局,我們需要知道一些關鍵點 第一 什麼是樣式 css 什麼是容器,怎麼認識容器,第二 樣式的優先順序和繼承的關係,那些是不被繼承的,那些元素是能被繼承的 第四 背景 background 第五 什麼是塊級元素,什麼是行內元素,特點是什麼 第六 什麼是布局,分為 流式布局,響應式布局,布...