HTML CSS網(wǎng)頁布局與定位（課堂PPT）

1、本PPT由曾樂設計，使用需征得許可。1CSSCSS網(wǎng)頁布局與定位網(wǎng)頁布局與定位本PPT由曾樂設計，使用需征得許可。2理解表現(xiàn)和結構分離1掌握如何使用DIV2掌握如何使用盒子模型34CONTENTS掌握如何使用浮動定位本PPT由曾樂設計，使用需征得許可。3 理解表現(xiàn)和結構分離理解表現(xiàn)和結構分離01本PPT由曾樂設計，使用需征得許可。4 如何優(yōu)化網(wǎng)頁如何優(yōu)化網(wǎng)頁 內(nèi)容 結構 表現(xiàn)本PPT由曾樂設計，使用需征得許可。5本PPT由曾樂設計，使用需征得許可。6什么是什么是Div？本PPT由曾樂設計，使用需征得許可。7DivDiv介紹介紹Html標簽：Div標簽中可以直接放入文本，也可以放入其他的標簽，也

2、可以多個Div標簽進行嵌套使用。Div的使用形式：內(nèi)容區(qū)域姓名 性別年齡本PPT由曾樂設計，使用需征得許可。8DIV+CSS本PPT由曾樂設計，使用需征得許可。9Div網(wǎng)頁布局網(wǎng)頁布局 制作網(wǎng)頁前我們需要對網(wǎng)頁整體結構做一個版塊的劃分，制作網(wǎng)頁前我們需要對網(wǎng)頁整體結構做一個版塊的劃分，版塊劃分的合理性很大程度上決定了網(wǎng)頁布局的復雜程度。版塊劃分的合理性很大程度上決定了網(wǎng)頁布局的復雜程度。如：如： 分析：整個圖片分為以下幾個部分分析：整個圖片分為以下幾個部分頂部：包括頂部：包括Logo和一個背景圖片和一個背景圖片導航欄導航欄內(nèi)容部分分為側邊欄和主體內(nèi)容內(nèi)容部分分為側邊欄和主體內(nèi)容底部頁腳包括一些

3、版權信息底部頁腳包括一些版權信息頭部頭部導航菜單導航菜單內(nèi)容區(qū)域內(nèi)容區(qū)域側邊欄側邊欄底部底部本PPT由曾樂設計，使用需征得許可。10常見網(wǎng)頁常見網(wǎng)頁Div布局布局本PPT由曾樂設計，使用需征得許可。11常見網(wǎng)頁常見網(wǎng)頁Div布局布局本PPT由曾樂設計，使用需征得許可。12常見網(wǎng)頁常見網(wǎng)頁Div布局布局本PPT由曾樂設計，使用需征得許可。13掌握如何使用盒子模型掌握如何使用盒子模型本PPT由曾樂設計，使用需征得許可。14理解盒子模型理解盒子模型 盒子模型是CSS的核心概念之一，它指定元素如何顯示以及如何相互交互。頁面中所有元素都可以看成一個盒子，占據(jù)著一定的頁面空間。一個頁面就是由很多這樣的盒子

4、組成，這些盒子之間會互相影響，共同構成復雜的頁面效果。在在CSS中，一個獨立的盒子中，一個獨立的盒子（DIV）模型由）模型由 margin（外邊距）、（外邊距）、border（邊框）、（邊框）、padding（內(nèi)邊距）、（內(nèi)邊距）、content（內(nèi)容）（內(nèi)容）4個部分組個部分組成。如圖：成。如圖：本PPT由曾樂設計，使用需征得許可。15本PPT由曾樂設計，使用需征得許可。16理解盒子模型理解盒子模型- Margin Margin(外邊距)：指邊框以外留的空白（相對所在的容器）。例如： margin:50px; 等于 margin 50px 50px 50px 50px； CSS margin

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

6、得許可。18理解盒子模型理解盒子模型- Padding CSS padding 屬性示例 p padding:50px; border:thick solid green; 定義了段落的邊內(nèi)補白為50px,padding:50px;所以內(nèi)容與邊框間會有50px的間隔. 本PPT由曾樂設計，使用需征得許可。19掌握如何使用浮動定位掌握如何使用浮動定位本PPT由曾樂設計，使用需征得許可。20浮動布局浮動布局我們利用float屬性實現(xiàn)了定位，實際上當你把它用到標簽上時，浮動就是變成一個強大網(wǎng)頁布局工具?；诟拥牟季掷昧薴loat屬性來并排定位元素，我們只需要設定一個寬度，將元素設為左浮動和右浮動

7、就可以了。CSS允許如果元素浮動float，不論是圖片，段落還是列表。無論先前元素是什么狀態(tài)，浮動后都成為塊級元素。浮動元素的寬度默認為auto。本PPT由曾樂設計，使用需征得許可。21兩列的浮動布局（示例）兩列的浮動布局（示例）本PPT由曾樂設計，使用需征得許可。22清除浮動清除浮動本PPT由曾樂設計，使用需征得許可。23理解表現(xiàn)和結構分離理解表現(xiàn)和結構分離本PPT由曾樂設計，使用需征得許可。24結構（結構（DIV）與表現(xiàn)（）與表現(xiàn)（CSS）的分離）的分離 所有所有HTML和和XHTML頁面都由頁面都由內(nèi)容結構表現(xiàn)這幾方面組成。這幾方面組成。本PPT由曾樂設計，使用需征得許可。25結構（結構

8、（DIV）與表現(xiàn)（）與表現(xiàn)（CSS）的分離）的分離 內(nèi)容層：是頁面實際要傳達的真正信息，包含數(shù)據(jù)、文檔或者圖片等內(nèi)容層：是頁面實際要傳達的真正信息，包含數(shù)據(jù)、文檔或者圖片等。注意著里強調(diào)的。注意著里強調(diào)的“真正信息真正信息”是指純粹的數(shù)據(jù)信息本身。是指純粹的數(shù)據(jù)信息本身。 結構層：是由文檔中的主體部分，再加上結構化標記。結構層：是由文檔中的主體部分，再加上結構化標記。 表現(xiàn)層：是你賦予內(nèi)容的一種樣式，就是文檔看起來的樣子。表現(xiàn)層：是你賦予內(nèi)容的一種樣式，就是文檔看起來的樣子。本PPT由曾樂設計，使用需征得許可。26CSS+DIV網(wǎng)站設計的優(yōu)勢網(wǎng)站設計的優(yōu)勢 首先，CSS的極大優(yōu)勢表現(xiàn)的簡潔的代碼，對于一個大型網(wǎng)站來說，可以節(jié)省大量帶寬（速度加快）；而且從所周知，搜索引擎喜歡清潔的代碼（其真正意義在于，增加了有效關鍵詞占網(wǎng)頁代碼的比重），因此使用CSS+DIV的web標準制作的網(wǎng)站具有搜索引擎好的一定優(yōu)勢。 其次，CSS+DIV制作的網(wǎng)站使得網(wǎng)站改版相對簡單，很多問題只需要改變CSS而不需要改變程序，從而降低了網(wǎng)站改版的成本。本PPT由曾樂設計，使用需征得許可。27三列的浮動布局（示例三列的浮動布局（示例2）本PPT由曾樂設計，使用需征得許