1、CSS網頁布局與定位網頁布局與定位本PPT由曾樂設計，使用需征得許可。理解表現和結構分離1掌握如何使用DIV2掌握如何使用盒子模型34CONTENTS掌握如何使用浮動定位本PPT由曾樂設計，使用需征得許可。 理解表現和結構分離理解表現和結構分離01本PPT由曾樂設計，使用需征得許可。 如何優化網頁 內容 結構 表現本PPT由曾樂設計，使用需征得許可。本PPT由曾樂設計，使用需征得許可。什么是Div？本PPT由曾樂設計，使用需征得許可。DIV介紹Html標簽：Div標簽中可以直接放入文本，也可以放入其他的標簽，也可以多個Div標簽進行嵌套使用。Div的使用形式：內容區域姓名 性別年齡本PPT由曾

2、樂設計，使用需征得許可。DIV+CSS本PPT由曾樂設計，使用需征得許可。DIV網頁布局 制作網頁前我們需要對網頁整體結構做一個版塊的劃分，制作網頁前我們需要對網頁整體結構做一個版塊的劃分，版塊劃分的合理性很大程度上決定了網頁布局的復雜程度。版塊劃分的合理性很大程度上決定了網頁布局的復雜程度。如：如： 分析：整個圖片分為以下幾個部分分析：整個圖片分為以下幾個部分 頂部：包括頂部：包括Logo和一個背景圖片和一個背景圖片 導航欄導航欄 內容部分分為側邊欄和主體內容內容部分分為側邊欄和主體內容 底部頁腳包括一些版權信息底部頁腳包括一些版權信息頭部頭部導航菜單導航菜單內容區域內容區域側邊欄側邊欄底部

3、底部本PPT由曾樂設計，使用需征得許可。常見網頁DIV布局本PPT由曾樂設計，使用需征得許可。常見網頁DIV布局本PPT由曾樂設計，使用需征得許可。常見網頁DIV布局本PPT由曾樂設計，使用需征得許可。掌握如何使用盒子模型掌握如何使用盒子模型本PPT由曾樂設計，使用需征得許可。理解盒子模型 盒子模型是CSS的核心概念之一，它指定元素如何顯示以及如何相互交互。頁面中所有元素都可以看成一個盒子，占據著一定的頁面空間。一個頁面就是由很多這樣的盒子組成，這些盒子之間會互相影響，共同構成復雜的頁面效果。在在CSS中，一個獨立的盒子中，一個獨立的盒子（DIV）模型由）模型由 margin（外邊距）、（外邊

4、距）、border（邊框）、（邊框）、padding（內邊距）、（內邊距）、content（內容）（內容）4個部分組個部分組成。如圖：成。如圖：本PPT由曾樂設計，使用需征得許可。本PPT由曾樂設計，使用需征得許可。理解盒子模型- MARGIN Margin(外邊距)：指邊框以外留的空白（相對所在的容器）。例如： margin:50px; 等于 margin 50px 50px 50px 50px； CSS margin CSS margin 屬性屬性 p p margin:50px; margin:50px; border:thick solid green; border:thick so

5、lid green; 定義了段落的邊外補白為定義了段落的邊外補白為50px,margin:50px;50px,margin:50px;所以段落之間會有所以段落之間會有50px50px的的間隔間隔. . 我是接下來的第二段我是接下來的第二段 本PPT由曾樂設計，使用需征得許可。理解盒子模型- BORDERp border: medium double greenSome text本PPT由曾樂設計，使用需征得許可。理解盒子模型- PADDING CSS padding 屬性示例 p padding:50px; border:thick solid green; 定義了段落的邊內補白為50px,p

6、adding:50px;所以內容與邊框間會有50px的間隔. 本PPT由曾樂設計，使用需征得許可。掌握如何使用浮動定位掌握如何使用浮動定位本PPT由曾樂設計，使用需征得許可。浮動布局我們利用float屬性實現了定位，實際上當你把它用到標簽上時，浮動就是變成一個強大網頁布局工具。基于浮動的布局利用了float屬性來并排定位元素，我們只需要設定一個寬度，將元素設為左浮動和右浮動就可以了。CSS允許如果元素浮動float，不論是圖片，段落還是列表。無論先前元素是什么狀態，浮動后都成為塊級元素。浮動元素的寬度默認為auto。本PPT由曾樂設計，使用需征得許可。兩列的浮動布局（示例）本PPT由曾樂設計，

7、使用需征得許可。清除浮動本PPT由曾樂設計，使用需征得許可。理解表現和結構分離本PPT由曾樂設計，使用需征得許可。結構（DIV）與表現（CSS）的分離 所有所有HTML和和XHTML頁面都由頁面都由內容結構表現這幾方面組成。這幾方面組成。本PPT由曾樂設計，使用需征得許可。結構（DIV）與表現（CSS）的分離 內容層：是頁面實際要傳達的真正信息，包含數據、文檔或者圖片等內容層：是頁面實際要傳達的真正信息，包含數據、文檔或者圖片等。注意著里強調的。注意著里強調的“真正信息真正信息”是指純粹的數據信息本身。是指純粹的數據信息本身。 結構層：是由文檔中的主體部分，再加上結構化標記。結構層：是由文檔中

8、的主體部分，再加上結構化標記。 表現層：是你賦予內容的一種樣式，就是文檔看起來的樣子。表現層：是你賦予內容的一種樣式，就是文檔看起來的樣子。本PPT由曾樂設計，使用需征得許可。CSS+DIV網站設計的優勢 首先，CSS的極大優勢表現的簡潔的代碼，對于一個大型網站來說，可以節省大量帶寬（速度加快）；而且從所周知，搜索引擎喜歡清潔的代碼（其真正意義在于，增加了有效關鍵詞占網頁代碼的比重），因此使用CSS+DIV的web標準制作的網站具有搜索引擎好的一定優勢。 其次，CSS+DIV制作的網站使得網站改版相對簡單，很多問題只需要改變CSS而不需要改變程序，從而降低了網站改版的成本。本PPT由曾樂設計，使用需征得許可。三列的浮動布局（示例2）本PPT由曾樂設計，使用需征得許可。總結