整體劃分幾個板塊，然后對各個板塊進行CSS定位，最后在各個板塊中添加相應的內容。514.1.1將頁面用Div分塊在利用CSS布局頁面時，首先要有一個整體的規(guī)劃，包括整個頁面分成哪些模塊，各個模塊之間的父子關系等。以
3、最簡單的框架為例，頁面由導航條(banner)、主體內容(content)、菜單導航(links)和腳注(footer)幾個部分組成，各個部分分別用自己的id來標識，如圖14.1所示。614.1.2設計各塊的位置當頁面的內容已經確定后，則需要根據內容本身考慮整體的頁面布局類型，如是單欄、雙欄還是三欄等，這里采用的布局如圖14.2所示。714.1.3用CSS定位下面首先對body標記與container父塊進行設置，CSS代碼如下所示。body{margin:10px;text-align:center;}#container{width:800p
4、x;border:1pxsolid#000000;padding:10px;}上面的代碼設置了頁面的邊界、頁面文本的對齊方式，以及父塊的寬度為800px。下面來設置banner板塊，其CSS代碼如下所示。#banner{margin-bottom:5px;padding:10px;background-color:#a2d9ff;border:1pxsolid#000000;text-align:center;}這里設置了banner板塊的邊界、填充、背景顏色等。814.1.3用CSS定位下面利用float方法將content移動到左側，link
5、s移動到頁面右側，這里分別設置了這兩個板塊的寬度和高度，讀者可以根據需要自己調整。#content{float:left;width:570px;height:300px;border:1pxsolid#000000;text-align:center;}#links{float:right;width:200px;height:300px;border:1pxsolid#000000;text-align:center;}由于content和links對象都設置了浮動屬性，因此footer需要設置clear屬性，使其不受浮動的影響，代碼如下所示
6、。#footer{clear:both;//*不受float影響*//padding:10px;border:1pxsolid#000000;text-align:center;}-->這樣頁面的整體框架便搭建好了，這里需要指出的是content塊中不能放寬度太長的元素，如很長的圖片或不折行的英文等，否則links將再次被擠到content下方。914.2固定寬度布局本節(jié)重點介紹如何使用CSS+Div創(chuàng)建固定寬度布局，對于包含很多大圖片和其他元素的內容，由于它們在流式布局中不能很好地表現，因此固定寬度布局是處理這種內容的最好方法。1014.2.1
7、一列固定寬度一列式布局是所有布局的基礎，也是最簡單的布局形式。一列固定寬度中，寬度的屬性值是固定像素。下面舉例說明一列固定寬度的布局方法，具體操作步驟如下。(1)在HTML文檔的
與之間相應的位置輸入定義的CSS樣式代碼，如下所示。1114.2.1一列固定寬度(2)然后在HTML文檔的與之間的正文中輸入以
8、下代碼，給div使用了layer作為id名稱。1列固定寬度
