DIV CSS網頁布局常用的方法與技巧

2021-07-02 16:51:59 字數 2209 閱讀 5196

這裡是第二列

/*這是違背we

css布局常用的方法

float:none|left|right

取值:none:預設值。物件不飄浮

left:文字流向物件的右邊

right:文字流向物件的左邊

它是怎樣工作的,看個一行兩列的例子

xhtml**:

example source code

這裡是第一列

這裡是第二列

/*這是違背web標準意圖的,只是想說明在它下面的元素需要清除浮動*/

css**:

example source code

#wrap

#column1

#column2

.clear

position:static|absolute|fixed|relative

取值:static:預設值。無特殊定位,物件遵循html定位規則

absolute:將物件從文件流中拖出,使用left,right,top,bottom等屬性相對於其最接近的乙個最有定位設定的父物件進行絕對定位。如果不存在這樣的父物件,則依據body物件。而其層疊通過z-index屬性定義

fixed:未支援。物件定位遵從絕對(absolute)方式。但是要遵守一些規範

relative:物件不可層疊,但將依據left,right,top,bottom等屬性在正常文件流中偏移位置

它來實現一行兩列的例子

xhtml**:

example source code

這裡是第一列

這裡是第二列

css**:

example source code [www.52css.com]

#wrap

#column1

#column2

他們的區別在哪?

顯然,float是相對定位的,會隨著瀏覽器的大小和解析度的變化而改變,而position就不行了,所以一般情況下還是float布局!

css常用布局例項

單行一列

example source code

body

#content

兩行一列

example source code

body

#content-top

#content-end

三行一列

example source code

body

#content-top

#content-mid

#content-end

單行兩列

example source code

#bodycenter

#bodycenter#dv1

#bodycenter#dv2

兩行兩列

example source code

#header

#bodycenter

#bodycenter#dv1

#bodycenter#dv2

三行兩列

example source code

#header

#bodycenter

#bodycenter#dv1

#bodycenter#dv2

#footer

單行三列

絕對定位

example source code

#left

#middle

#right

float定位一

xhtml**:

example source code

這裡是第一列

這裡是第二列

/*用法web標準不建議,但是記住下面元素需要清除浮動*/

這裡是第三列

/*用法web標準不建議,但是記住下面元素需要清除浮動*/

css**:

example source code

#wrap

#column

#column1

#column2

#column3

.clear

float定位二

xhtml**:

example source code

css**:

example source code

body

.column

#center

#left

#right

DIV CSS網頁布局常用的方法與技巧

css布局常用的方法 float none left right 取值 none 預設值。物件不飄浮 left 文字流向物件的右邊 right 文字流向物件的左邊 它是怎樣工作的,看個一行兩列的例子 xhtml 程式 1 這裡是第一列 這裡是第二列 這是違背web標準意圖的,只是想說明在它下面的元素...

DIV CSS網頁布局常用的方法與技巧

float none left right 取值 none 預設值。物件不飄浮 left 文字流向物件的右邊 right 文字流向物件的左邊 它是怎樣工作的,看個一行兩列的例子 xhtml example source code 這裡是第一列 這裡是第二列 這是違背web標準意圖的,只是想說明在它下...

div css 網頁布局

今天剛弄的,呵呵 設為首頁 加入收藏 12月活動 12月暫時不安排團拍 12月暫時不安排團拍 12月暫時不安排團拍 12月暫時不安排團拍 12月暫時不安排團拍 12月暫時不安排團拍 12月暫時不安排團拍 12月暫時不安排團拍 12月暫時不安排團拍 12月暫時不安排團拍 12月暫時不安排團拍 人之所以...