CSS DIV與頁面佈局(Layout)應用

這裡介紹 <div>與 float (浮動)屬性做頁面佈局應用


div基本概念 :

<div id="container"> 略 </div>

還記得嗎? <div > 略 </div> 可想成是個大容器,

在 div 容器內仍可以再放入 div:(優點:外部div的css設定,可影響內部的div)

例如: <div >大div內容:略 <div > 小div內容:略 </div></div>

也可以是各自獨立的div區塊:(優點:因各自獨立,所以擺放位置可自由擺放排版面) , 沒指定位置時排列是從上而下,從左而右順序排列

例如: <div> vdi容器1 </div><div> vdi容器2 </div>

為div命名獨一無二的id 名號:

注意: div 與元素命名id名稱時不可重複,若要重複使用css 則用.class來指定相同的css。

float: 對 div區塊位置大挪移 :

float: left 將 div區塊左移

float: right 將 div區塊右移

clear:both; 消除div區塊float左和右浮移作用

clear:left; 消除div區塊float 左浮移作用

clear:right; 消除div區塊float 右浮移作用

重點:2塊Div內定排列會是以上下堆疊關係,而應用float屬性 可達成2個(或多個)的Div並排效果,但記得配合clear屬性來消除早先的float狀態,以免隨後的元素也跟著"浮上來"造成版面錯亂。



範例::用 <div>製作網頁版面

我的小心得

哈~把Div區塊想成木板排列,用從上而下,從左而右排列順序特性,就很容意想通版面設計概念了,例如:A.學校網站名區塊一片 B.選單區塊要靠左所以用(float:left) C.內文區塊仍要靠左用(float:left,此時並列選單旁了) D.此時版權聲明區塊,要向下一排放置使用(clear:both)(clear:left),以清除靠左排列屬性,版權區塊就在下方了,再把版面各div長寬大小分配好,版面佈局就ok了。