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月暫時不安排團拍 人之所以...