1、CSS網(wǎng)頁(yè)布局與定位網(wǎng)頁(yè)布局與定位本PPT由曾樂(lè)設(shè)計(jì)，使用需征得許可。理解表現(xiàn)和結(jié)構(gòu)分離1掌握如何使用DIV2掌握如何使用盒子模型34CONTENTS掌握如何使用浮動(dòng)定位本PPT由曾樂(lè)設(shè)計(jì)，使用需征得許可。 理解表現(xiàn)和結(jié)構(gòu)分離理解表現(xiàn)和結(jié)構(gòu)分離01本PPT由曾樂(lè)設(shè)計(jì)，使用需征得許可。 如何優(yōu)化網(wǎng)頁(yè) 內(nèi)容 結(jié)構(gòu) 表現(xiàn)本PPT由曾樂(lè)設(shè)計(jì)，使用需征得許可。本PPT由曾樂(lè)設(shè)計(jì)，使用需征得許可。什么是Div？本PPT由曾樂(lè)設(shè)計(jì)，使用需征得許可。DIV介紹Html標(biāo)簽：Div標(biāo)簽中可以直接放入文本，也可以放入其他的標(biāo)簽，也可以多個(gè)Div標(biāo)簽進(jìn)行嵌套使用。Div的使用形式：內(nèi)容區(qū)域姓名 性別年齡本PPT由曾

2、樂(lè)設(shè)計(jì)，使用需征得許可。DIV+CSS本PPT由曾樂(lè)設(shè)計(jì)，使用需征得許可。DIV網(wǎng)頁(yè)布局 制作網(wǎng)頁(yè)前我們需要對(duì)網(wǎng)頁(yè)整體結(jié)構(gòu)做一個(gè)版塊的劃分，制作網(wǎng)頁(yè)前我們需要對(duì)網(wǎng)頁(yè)整體結(jié)構(gòu)做一個(gè)版塊的劃分，版塊劃分的合理性很大程度上決定了網(wǎng)頁(yè)布局的復(fù)雜程度。版塊劃分的合理性很大程度上決定了網(wǎng)頁(yè)布局的復(fù)雜程度。如：如： 分析：整個(gè)圖片分為以下幾個(gè)部分分析：整個(gè)圖片分為以下幾個(gè)部分 頂部：包括頂部：包括Logo和一個(gè)背景圖片和一個(gè)背景圖片 導(dǎo)航欄導(dǎo)航欄 內(nèi)容部分分為側(cè)邊欄和主體內(nèi)容內(nèi)容部分分為側(cè)邊欄和主體內(nèi)容 底部頁(yè)腳包括一些版權(quán)信息底部頁(yè)腳包括一些版權(quán)信息頭部頭部導(dǎo)航菜單導(dǎo)航菜單內(nèi)容區(qū)域內(nèi)容區(qū)域側(cè)邊欄側(cè)邊欄底部

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

4、距）、border（邊框）、（邊框）、padding（內(nèi)邊距）、（內(nèi)邊距）、content（內(nèi)容）（內(nèi)容）4個(gè)部分組個(gè)部分組成。如圖：成。如圖：本PPT由曾樂(lè)設(shè)計(jì)，使用需征得許可。本PPT由曾樂(lè)設(shè)計(jì)，使用需征得許可。理解盒子模型- MARGIN Margin(外邊距)：指邊框以外留的空白（相對(duì)所在的容器）。例如： 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; 定義了段落的邊外補(bǔ)白為定義了段落的邊外補(bǔ)白為50px,margin:50px;50px,margin:50px;所以段落之間會(huì)有所以段落之間會(huì)有50px50px的的間隔間隔. . 我是接下來(lái)的第二段我是接下來(lái)的第二段 本PPT由曾樂(lè)設(shè)計(jì)，使用需征得許可。理解盒子模型- BORDERp border: medium double greenSome text本PPT由曾樂(lè)設(shè)計(jì)，使用需征得許可。理解盒子模型- PADDING CSS padding 屬性示例 p padding:50px; border:thick solid green; 定義了段落的邊內(nèi)補(bǔ)白為50px,p

6、adding:50px;所以內(nèi)容與邊框間會(huì)有50px的間隔. 本PPT由曾樂(lè)設(shè)計(jì)，使用需征得許可。掌握如何使用浮動(dòng)定位掌握如何使用浮動(dòng)定位本PPT由曾樂(lè)設(shè)計(jì)，使用需征得許可。浮動(dòng)布局我們利用float屬性實(shí)現(xiàn)了定位，實(shí)際上當(dāng)你把它用到標(biāo)簽上時(shí)，浮動(dòng)就是變成一個(gè)強(qiáng)大網(wǎng)頁(yè)布局工具?；诟?dòng)的布局利用了float屬性來(lái)并排定位元素，我們只需要設(shè)定一個(gè)寬度，將元素設(shè)為左浮動(dòng)和右浮動(dòng)就可以了。CSS允許如果元素浮動(dòng)float，不論是圖片，段落還是列表。無(wú)論先前元素是什么狀態(tài)，浮動(dòng)后都成為塊級(jí)元素。浮動(dòng)元素的寬度默認(rèn)為auto。本PPT由曾樂(lè)設(shè)計(jì)，使用需征得許可。兩列的浮動(dòng)布局（示例）本PPT由曾樂(lè)設(shè)計(jì)，

7、使用需征得許可。清除浮動(dòng)本PPT由曾樂(lè)設(shè)計(jì)，使用需征得許可。理解表現(xiàn)和結(jié)構(gòu)分離本PPT由曾樂(lè)設(shè)計(jì)，使用需征得許可。結(jié)構(gòu)（DIV）與表現(xiàn)（CSS）的分離 所有所有HTML和和XHTML頁(yè)面都由頁(yè)面都由內(nèi)容結(jié)構(gòu)表現(xiàn)這幾方面組成。這幾方面組成。本PPT由曾樂(lè)設(shè)計(jì)，使用需征得許可。結(jié)構(gòu)（DIV）與表現(xiàn)（CSS）的分離 內(nèi)容層：是頁(yè)面實(shí)際要傳達(dá)的真正信息，包含數(shù)據(jù)、文檔或者圖片等內(nèi)容層：是頁(yè)面實(shí)際要傳達(dá)的真正信息，包含數(shù)據(jù)、文檔或者圖片等。注意著里強(qiáng)調(diào)的。注意著里強(qiáng)調(diào)的“真正信息真正信息”是指純粹的數(shù)據(jù)信息本身。是指純粹的數(shù)據(jù)信息本身。 結(jié)構(gòu)層：是由文檔中的主體部分，再加上結(jié)構(gòu)化標(biāo)記。結(jié)構(gòu)層：是由文檔中

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