div+css網(wǎng)頁標準化布局

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

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

3、TML中。而div（division）元素是塊級的（簡單地說，它等同于其前后有斷行），用于組合一大塊的代碼，為HTML 文檔內(nèi)大塊的內(nèi)容提供結(jié)構(gòu)和背景的元素，可以包含段落、標題、表格甚至其他部分，這使div便于建立不同集成的類。div的起始標簽和結(jié)束標簽之間的所有內(nèi)容都是用來構(gòu)成這個塊的，其中所包含元素的特性由div標簽的屬性來控制，或者是通過使用樣式表格式化這個塊來進行控制。3. W3C盒子模型每個HTML元素都可以看作一個裝了東西的盒子，盒子具有寬度（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個內(nèi)填充為個內(nèi)填充為10px */ margin:20px; /* 盒子的盒子的4個外邊距為個外邊距為10px */ 內(nèi)容區(qū)內(nèi)容區(qū) 4. 和頁面布

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

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

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

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

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

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

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

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

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

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

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

16、ight:400px; /* 設定該區(qū)塊框的高度為400px,臨時設置 */ border:1px solid; /* 設定該區(qū)塊框的邊框為1px的直線邊框 */ #right_content float:right; /* 設置該區(qū)塊框向右浮動，脫離文檔流 */ width:700px; /* 設定該區(qū)塊框的寬度700px */ height:400px; /* 設定該區(qū)塊框的高度400px,臨時設置 */ border:1px solid; /* 設定該區(qū)塊框的邊框為1px的直線邊框 */ 主導航區(qū)塊主導航區(qū)塊 內(nèi)容區(qū)塊內(nèi)容區(qū)塊 8.3 設置三列浮動的布局設置三列浮動設置三列浮動 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 /* 設置左部主要內(nèi)容區(qū)塊的CSS布局樣式 */ float:left; /* 設置該區(qū)塊框向左浮動，脫離文檔流 */ width:400px; /* 設定該區(qū)塊框的寬度

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

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