HTML CSS網(wǎng)頁布局與定位

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

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

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

4、距）、border（邊框）、（邊框）、padding（內(nèi)邊距）、（內(nèi)邊距）、content（內(nèi)容）（內(nèi)容）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; 定義了段落的邊內(nèi)補白為50px,p

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

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

8、的主體部分，再加上結(jié)構(gòu)化標記。 表現(xiàn)層：是你賦予內(nèi)容的一種樣式，就是文檔看起來的樣子。表現(xiàn)層：是你賦予內(nèi)容的一種樣式，就是文檔看起來的樣子。本PPT由曾樂設計，使用需征得許可。CSS+DIV網(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由曾樂設計，使用需征得許可。三列的浮動布局（示例2）本PPT由曾樂設計，使用需征得許可?？偨Y(jié)