div+css網(wǎng)頁(yè)標(biāo)準(zhǔn)化布局

1、div+css網(wǎng)頁(yè)標(biāo)準(zhǔn)化布局div+css網(wǎng)頁(yè)標(biāo)準(zhǔn)化布局！回顧 CSS的語(yǔ)言的語(yǔ)法？ 在HTML文檔中放置CSS樣式的三種方式？ CSS的6種選擇器的作用和使用？本章任務(wù)1. DIV+CSS對(duì)頁(yè)面布局的優(yōu)勢(shì)2.“無(wú)意義”的HTML元素div和span3. W3C盒子模型4. 和頁(yè)面布局有關(guān)的CSS屬性5. 盒子區(qū)塊框的定位6. 使用盒子模型的浮動(dòng)布局7. DIV+CSS的兼容性問(wèn)題8. 使用盒子模型設(shè)計(jì)頁(yè)面布局9. DIV+CSS網(wǎng)站首頁(yè)面布局實(shí)例1. DIV+CSS對(duì)頁(yè)面布局的優(yōu)勢(shì) 采用DIV+CSS模式的網(wǎng)站具有以下優(yōu)勢(shì)： 表現(xiàn)和內(nèi)容相分離 代碼簡(jiǎn)潔，提高頁(yè)面瀏覽速度 易于維護(hù)和改版 提高

2、搜索引擎對(duì)網(wǎng)頁(yè)的索引效率2.“無(wú)意義”的HTML元素div和spanHTML只是賦予內(nèi)容的手段，大部分HTML標(biāo)簽都有其意義（例如，標(biāo)簽p創(chuàng)建段落，h1標(biāo)簽創(chuàng)建標(biāo)題等等）的，然而div和span標(biāo)簽似乎沒(méi)有任何內(nèi)容上的意義，聽起來(lái)就像一個(gè)泡沫做成的錘子一樣無(wú)用。但實(shí)際上，與CSS結(jié)合起來(lái)后，它們被用得十分廣泛。你所需要記住的是span和div是“無(wú)意義”的標(biāo)簽。它們的存在純粹是應(yīng)用樣式，所以當(dāng)樣式表失效時(shí)它就沒(méi)有任何的作用它們被用來(lái)組合成一大塊的HTML代碼并賦予一定的信息，大部分用類屬性class和標(biāo)識(shí)屬性id與元素聯(lián)系起來(lái)。span和div的不同之處在于span是內(nèi)聯(lián)的，用在一小塊的內(nèi)聯(lián)H

3、TML中。而div（division）元素是塊級(jí)的（簡(jiǎn)單地說(shuō)，它等同于其前后有斷行），用于組合一大塊的代碼，為HTML 文檔內(nèi)大塊的內(nèi)容提供結(jié)構(gòu)和背景的元素，可以包含段落、標(biāo)題、表格甚至其他部分，這使div便于建立不同集成的類。div的起始標(biāo)簽和結(jié)束標(biāo)簽之間的所有內(nèi)容都是用來(lái)構(gòu)成這個(gè)塊的，其中所包含元素的特性由div標(biāo)簽的屬性來(lái)控制，或者是通過(guò)使用樣式表格式化這個(gè)塊來(lái)進(jìn)行控制。3. W3C盒子模型每個(gè)HTML元素都可以看作一個(gè)裝了東西的盒子，盒子具有寬度（width）和高度（height），盒子里面的內(nèi)容到盒子的邊框之間的距離即填充（padding），盒子本身有邊框（border），而盒子邊框

4、外和其他盒子之間，還有邊界（margin）。聲明盒子模型的CSS屬性盒子模型 盒子模型盒子模型 #box /* ID為為box的盒子模型的盒子模型 */ width:200px; /* 盒子的寬度為盒子的寬度為200px */ height:200px; /* 盒子的高度為盒子的高度為200px */ border:5px solid #ccc; /* 盒子邊框?qū)嵕€各邊寬盒子邊框?qū)嵕€各邊寬5px */ padding:10px; /* 盒子的盒子的4個(gè)內(nèi)填充為個(gè)內(nèi)填充為10px */ margin:20px; /* 盒子的盒子的4個(gè)外邊距為個(gè)外邊距為10px */ 內(nèi)容區(qū)內(nèi)容區(qū) 4. 和頁(yè)面布

5、局有關(guān)的CSS屬性和頁(yè)面布局有關(guān)的CSS屬性（二）和頁(yè)面布局有關(guān)的CSS屬性（三）和頁(yè)面布局有關(guān)的CSS屬性（四）#box /* 聲明ID選擇器，名稱為box */ position:absolute; /* 設(shè)置層的定位為絕對(duì)定位 */ top:30px; /* 層距離頂點(diǎn)縱向坐標(biāo)的距離為30個(gè)像素 */ left:100px; /* 層距離左點(diǎn)橫向坐標(biāo)的距離為100個(gè)像素 */ width:300px; /* 設(shè)置層的寬度為300個(gè)像素 */ height:150px; /* 設(shè)置層的高度為150個(gè)像素 */ overflow:auto; /* 當(dāng)內(nèi)容超出層的范圍時(shí)顯示滾動(dòng)條 */ z-i

6、ndex:1; /* 設(shè)置層的先后順序?yàn)楦采w關(guān)系 */ visibility:visible; /* 無(wú)論父層是否可見，子層都可見 */ 5. 盒子區(qū)塊框的定位相對(duì)定位：絕對(duì)定位：a:hover /* 定義a元素的偽選擇器，當(dāng)鼠標(biāo)移動(dòng)到鏈接上時(shí)改變樣式 */ position:relative; /* 設(shè)置元素使用相對(duì)定位 */ top:1px; /* 鼠標(biāo)進(jìn)入時(shí)a元素將出現(xiàn)在原位置頂部下面1px的地方 */ left:1px; /* 鼠標(biāo)進(jìn)入時(shí)a元素將出現(xiàn)在原位置右邊1px的地方 */ #demo /* 定義一個(gè)ID選擇器 */ position:absolute; /* 使用絕對(duì)位置進(jìn)行定

7、位 */ width:300px; /* 定義盒子寬度為300px */ height:300px; /* 定義盒子高度為300px */ top:100px; /* 定義盒子距離網(wǎng)頁(yè)頂部100px */ left:200px; /* 定義盒子距離網(wǎng)頁(yè)左邊200px */ background:#BABABA; /* 定義盒子的背景顏色為灰色 */ z-index:1; /* 定義盒子位于上一層中 */ 我是一個(gè)盒子區(qū)塊，我現(xiàn)在在網(wǎng)頁(yè)中的哪個(gè)位置呢？我是一個(gè)盒子區(qū)塊，我現(xiàn)在在網(wǎng)頁(yè)中的哪個(gè)位置呢？5. 盒子區(qū)塊框的定位（二） 登錄框的盒子模型定位登錄框的盒子模型定位 #login /* 定義一個(gè)

8、ID選擇器 */ width:300px; /* 定義盒子寬度為300px */ height:200px; /* 定義盒子高度為200px */ position:absolute; /* 使用絕對(duì)位置進(jìn)行定位 */ left:50%; /* 左部盒子開始位置是頁(yè)面寬度的50% */ top:50%; /* 頂部盒子開始位置是頁(yè)面高度的50% */ margin-left:-150px; /* 左部開始位置再退回盒子寬度的一半 */ margin-top:-100px; /* 頂部開始位置再退回盒子高度的一半 */ background:#BABABA; /* 定義盒子的背景顏色為灰色 */

9、 登錄框的盒子模型登錄框的盒子模型 6、使用盒子模型的浮動(dòng)布局 雖然使用絕對(duì)定位可以實(shí)現(xiàn)頁(yè)面布局，但由于調(diào)整某個(gè)區(qū)塊框時(shí)其它區(qū)塊的位置并不會(huì)跟隨著改變，所以并不是布局的首選方式。而使用浮動(dòng)的區(qū)塊框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含它區(qū)塊的邊框或另一個(gè)浮動(dòng)框的邊框?yàn)橹?。并且由于浮?dòng)框不在文檔的普通流中，所以文檔的普通流中的區(qū)塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。6.1 設(shè)置浮動(dòng)6.2 行框和清理在進(jìn)行頁(yè)面布局時(shí)，經(jīng)常需要設(shè)置多個(gè)區(qū)塊框并列在一行中排列。最常見的方式就是使用float屬性，再通過(guò)left或right值移動(dòng)區(qū)塊框向左或向右浮動(dòng)。但當(dāng)前面并列的多個(gè)區(qū)塊框總寬度不足包含框的100%時(shí)，

10、就會(huì)在行框中留出一定的寬度，而下面的某個(gè)區(qū)塊框又恰好滿足這個(gè)寬度，則很可能會(huì)向上提，和上一行并列的區(qū)塊框在同一行排列。而這不并是我們想要的結(jié)果，所以可以使用clear屬性解決這一問(wèn)題，該屬性的值可以是 left、right、both 或 none，它表示框的哪些邊不應(yīng)該挨著浮動(dòng)框。 6.2 行框和清理（二） .left /* 聲明一個(gè)css類選擇器，名子為left */ width:200px; /* 盒子模型寬度為200px*/ height:200px; /* 盒子模型高度為200px */ margin:10px; /* 盒子模型外邊距為10px */ border:solid 1px;

11、 /* 盒子1像素的實(shí)線邊框 */ float:left; /* 設(shè)置盒子向左浮動(dòng)，脫離了文檔流 */ .noleft /* 聲明另一個(gè)css類選擇器，名子為noleft */ width:200px; /* 設(shè)置盒子模型的寬度為200px */ height:200px; /* 設(shè)置盒子模型的高度為200px */ border:solid 1px; /* 設(shè)置盒子有一個(gè)像素的實(shí)線邊框 */ background:#ccc; /* 設(shè)置盒子模型背景為灰色 */ 框（一）框（一） 框（二）框（二） 框（三）框（三） 6.2 行框和清理（三） .left /* 聲明一個(gè)css類選擇器，名子為le

12、ft */ width:200px; /* 盒子模型的寬度為200px */ height:200px; /* 盒子模型的高度也為200px */ margin:10px; /* 盒子模型的外邊距為10px */ border:solid 1px; /* 盒子有1像素實(shí)線邊框 */ float:left; /* 盒子向左浮動(dòng)，脫離了文檔流*/ .noleft /* 聲明另1個(gè)css類選擇器，名子為noleft */ width:200px; /* 盒子模型寬度為200px */ height:200px; /* 盒子模型的高度為200px */ border:solid 1px; /* 盒子有

13、1像素實(shí)線邊框 */ background:#ccc; /* 設(shè)置盒子模型背景為灰色 */ clear:both; /* 設(shè)置盒子模型兩邊都不能挨著浮動(dòng)區(qū)塊 */ 框（一）框（一） 框（二）框（二） 框（三）框（三） 7. DIV+CSS的兼容性問(wèn)題 1. 不同瀏覽器解釋盒子模型的差異 2. 設(shè)置瀏覽器去遵循W3C標(biāo)準(zhǔn)8、使用盒子模型設(shè)計(jì)頁(yè)面布局 8.1 區(qū)塊居中設(shè)計(jì) 8.2 設(shè)置兩列浮動(dòng)的布局 8.3 設(shè)置三列浮動(dòng)的布局 8.4 設(shè)置多列浮動(dòng)的布局8.1 區(qū)塊居中設(shè)計(jì) 居中設(shè)計(jì)居中設(shè)計(jì) body /* 為網(wǎng)頁(yè)主體內(nèi)容區(qū)域設(shè)置樣式 */ margin:0; /* 設(shè)定網(wǎng)頁(yè)外部邊距值為0，消除b

14、ody默認(rèn)值 */ padding:0; /* 設(shè)定網(wǎng)頁(yè)內(nèi)部邊距值為0，消除body默認(rèn)值 */ text-align:center; /* 為了在IE中設(shè)置主體容器盒子居中 */ #container /* 為布局的最外層容器使用ID選擇器設(shè)置樣式 */ width:966px; /* 設(shè)置最外層容器寬度為966px */ margin:0 auto; /* 設(shè)置外邊距上下為0，左右自動(dòng)，則在FF中居中 */ text-align:left; /* 再將主容器中的文本內(nèi)容調(diào)回為居左顯示 */ background:#888; /* 臨時(shí)設(shè)置一下背景顏色顯示主容器布局效果 */ height:

15、800px; /* 也是臨時(shí)設(shè)置一下高度顯示主容器的布局效果 */ 最外層的容器最外層的容器div在屏幕上水平居中在屏幕上水平居中 8.2 設(shè)置兩列浮動(dòng)的布局 設(shè)置兩列浮動(dòng)設(shè)置兩列浮動(dòng) body margin:0; padding:0; text-align:center; #container width:966px; margin:0 auto; text-align:left; #left_main /* 設(shè)置左部導(dǎo)航區(qū)塊的CSS布局樣式 */ float:left; /* 設(shè)置該區(qū)塊框向左浮動(dòng)，脫離文檔流 */ width:256px; /* 設(shè)定該區(qū)塊框的寬度為256px */ he

16、ight:400px; /* 設(shè)定該區(qū)塊框的高度為400px,臨時(shí)設(shè)置 */ border:1px solid; /* 設(shè)定該區(qū)塊框的邊框?yàn)?px的直線邊框 */ #right_content float:right; /* 設(shè)置該區(qū)塊框向右浮動(dòng)，脫離文檔流 */ width:700px; /* 設(shè)定該區(qū)塊框的寬度700px */ height:400px; /* 設(shè)定該區(qū)塊框的高度400px,臨時(shí)設(shè)置 */ border:1px solid; /* 設(shè)定該區(qū)塊框的邊框?yàn)?px的直線邊框 */ 主導(dǎo)航區(qū)塊主導(dǎo)航區(qū)塊 內(nèi)容區(qū)塊內(nèi)容區(qū)塊 8.3 設(shè)置三列浮動(dòng)的布局設(shè)置三列浮動(dòng)設(shè)置三列浮動(dòng) body

17、 margin:0; padding:0; text-align:center; #container width:966px; margin:0 auto; text-align:left; #left_main float:left; width:256px; height:400px;border:1px solid; #right_content float:right; width:700px; #left_box /* 設(shè)置左部主要內(nèi)容區(qū)塊的CSS布局樣式 */ float:left; /* 設(shè)置該區(qū)塊框向左浮動(dòng)，脫離文檔流 */ width:400px; /* 設(shè)定該區(qū)塊框的寬度

18、為400個(gè)像素 */ height:400px; /* 設(shè)定該區(qū)塊框的高度為400個(gè)像素，臨時(shí)設(shè)置*/ border:1px solid;/* 設(shè)定該區(qū)塊框的邊框?yàn)?px的直線邊框 */ #right_box /* 設(shè)置右部次要內(nèi)容區(qū)塊的CSS布局樣式 */ float:right; /* 設(shè)置該區(qū)塊框向右浮動(dòng)，脫離文檔流 */ width:290px; /* 設(shè)定該區(qū)塊框的寬度為290個(gè)像素 */ height:400px; /* 設(shè)定該區(qū)塊框的高度為400個(gè)像素，臨時(shí)設(shè)置 */ border:1px solid; /* 設(shè)定該區(qū)塊框的邊框?yàn)?px的直線邊框 */ 8.4 設(shè)置多列浮動(dòng)的布局

19、 body margin: 0; padding: 0; text-align: center; #menu /* 聲明ID選擇器，用于設(shè)置菜單的樣式 */ width:800px; /* 菜單區(qū)塊的寬度設(shè)置為800px */ margin:0 auto; /* 菜單區(qū)塊設(shè)置為水平居中 */ text-align:left; /* 將文本設(shè)置回原來(lái)的居左 */ background:#ccc;/* 為菜單條設(shè)置一個(gè)灰色背景 */ #menu ul /* 為了兼容性將列表中原有樣式全部清除*/ float:left; /* 設(shè)置向左浮動(dòng)，目的是脫離文檔流 */ margin:0px; /* 設(shè)置列表外邊距為0 */ padding:0px; /* 設(shè)置列表內(nèi)邊距為0