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

2021-04-13 02:46:20 字數 2443 閱讀 5043

css布局常用的方法

float:none|left|right

取值:

none:預設值。物件不飄浮

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

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

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

xhtml**:

程式**1

這裡是第一列

這裡是第二列

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

css**:

程式**2

#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**:

程式**3

這裡是第一列

這裡是第二列

css**:

程式**4

#wrap 

#column1

#column2

他們的區別在哪?

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

css常用布局例項

單行一列

程式**5

body 

#content

兩行一列

程式**6

body 

#content-top

#content-end

三行一列

程式**7

body 

#content-top

#content-mid

#content-end

單行兩列

程式**8

#bodycenter 

#bodycenter#dv1

#bodycenter#dv2

兩行兩列

程式**9

#header 

#bodycenter

#bodycenter#dv1

#bodycenter#dv2

三行兩列

程式**10

#header 

#bodycenter

#bodycenter#dv1

#bodycenter#dv2

#footer

單行三列

絕對定位

程式**11

#left 

#middle

#right

float定位一

xhtml**:

程式**12

這裡是第一列

這裡是第二列

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

這裡是第三列

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

css**:

程式**13

#wrap 

#column

#column1

#column2

#column3

.clear

float定位二

xhtml**:

程式**14

css**:

程式**15

body 

.column

#center

#left

#right

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

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

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

這裡是第二列 這是違背we css布局常用的方法 float none left right 取值 none 預設值。物件不飄浮 left 文字流向物件的右邊 right 文字流向物件的左邊 它是怎樣工作的,看個一行兩列的例子 xhtml example source code 這裡是第一列 這裡是...

div css 網頁布局

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