Html 經典布局(三)

2022-03-04 03:07:33 字數 842 閱讀 8445

經典布局案例(三):

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>css布局

title

>

head

>

<

body

>

<

div

style

="height: 400px;width: 200px;float: left"

>

div>

<

div

style

="height: 400px;width: 200px;float: left;clear: both"

>

div>

<

div

style

="height: 800px;overflow: hidden"

>

div>

body

>

html

>

上述**定義了三個div塊,用到了float浮動屬性、overflow屬性和clear屬性。

頁面效果如下:

其中紅色和藍色div塊為定寬綠色不定寬。 

Html 經典布局(一)

經典布局案例 一 doctype html html lang en head meta charset utf 8 title css布局 title head body style margin 0 div style width 200px height 500px float left di...

html的三種布局

特點 1 塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分布,因為在預設狀態下,塊狀元素的寬度都為100 2 內聯元素都會在所處的包含元素內從左到右水平分布顯示。內聯元素可不像塊狀元素這麼霸道獨佔一行 特點 預設布局下,塊狀元素這麼霸道都是獨佔一行,如果現在我們想讓兩個塊狀元素併排顯示。就需要...

5 經典三欄式布局

html部分 body div id main div id middle div div div id left div div id right div body css部分 style type text css html,body main middle left,right left ri...