DIV+CSS佈局

一：簡單介紹

    DIV：DIV是層疊樣式表中的定位技術，全稱DIVision，即為劃分。有時可以稱其為圖層。DIV元素是用來為HTML（標準通用標記語言下的一個應用）文件內大塊（block-level）的內容提供結構和背景的元素，DIV是HTML的標籤。

    CSS：(Cascading Style Sheets)層疊樣式表一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等檔案樣式的計算機語言。是能夠真正做到網頁表現與內容分離的一種樣式設計語言。相對於傳統HTML的表現而言，CSS能夠對網頁中的物件的位置排版進行畫素級的精確控制，擁有對網頁物件和模型樣式編輯的能力，並能夠進行初步互動設計。

二：HTML的DIV標籤

HTML中DIV結構

│body {}　/*這是一個HTML元素*/
　　└#Container {}　/*頁面層容器*/
　　　　　├#Header {}　/*頁面頭部*/
　　　　　├#PageBody {}　/*頁面主體*/
　　　　　│　├#Sidebar {}　/*側邊欄*/
　　　　　│　└#MainBody {}　/*主體內容*/
　　　　　└#Footer {}　/*頁面底部*/

三.CSS(層疊樣式表)

    在HTML文件中加入CSS，真正做到網頁表現與內容分離的一種樣式設計語言。CSS減少重複性工作，讓內容和樣式進行了分類，介面只負責呈現內容.

    樣式表可分為嵌入式樣式表、外部樣式表和內聯樣式表三種，在同一文件內可以同時使用三種方法。

外聯式Linking（也叫外部樣式）：將網頁連結到外部樣式表。

嵌入式Embedding（也叫內頁樣式）：在網頁上建立嵌入的樣式表。

內聯式Inline（也叫行內樣式）：應用內嵌樣式到各個網頁元素。

優先順序：內聯式 > 嵌入式 > 外聯式

四：DIV+CSS

    使用DIV的巢狀使用來完成整個網頁的佈局，將div理解成一個一個的塊，然後在DIV塊中寫入P，h1等等其他標籤，然後再通過CSS來修飾，設定樣式。在HTML元素中設定CSS樣式，需要在HTML元素中設定"id" 和 "class"選擇器。id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。HTML元素以id屬性來設定id選擇器,CSS 中 id 選擇器以 "#" 來定義，設定製定內容的樣式；

<div>

<p></p>
</div>

五：DIV+CSS的優點

    1.精簡的程式碼，使用DIV+CSS佈局，頁面程式碼精簡

    2.提高訪問速度、增加使用者體驗性

    3.div+css結構清晰，很容易被搜尋引擎搜尋到，適合優化seo，降低網頁大小，讓網頁體積變得更小。