css化網(wǎng)頁部局準(zhǔn)備工作下視頻課件

1、DIV+CSS標(biāo)準(zhǔn)化網(wǎng)頁部局準(zhǔn)備工作課程內(nèi)容DIV+CSS標(biāo)準(zhǔn)化布局的優(yōu)勢“無意義”的元素div和span盒子模型布局中的主要樣式使用區(qū)塊框設(shè)計頁面布局 參考教材：細(xì)說PHP第四章概述使用“DIV+CSS”對網(wǎng)站進行布局符合W3C標(biāo)準(zhǔn)，采用這種方式布局通常是為了說明與HTML表格定位方式的區(qū)別。因為現(xiàn)在的網(wǎng)站設(shè)計標(biāo)準(zhǔn)中，已經(jīng)不再使用表格定位技術(shù)，而是采用DIV+CSS的方式實現(xiàn)各種定位。通過使用div盒子模型結(jié)構(gòu)將各部分內(nèi)容劃分到不同的區(qū)塊，然后用css來定義盒子模型的位置、大小、邊框、內(nèi)外邊距、排列方式等。簡單地說，div用于搭建網(wǎng)站結(jié)構(gòu)（框架）、css用于創(chuàng)建網(wǎng)站表現(xiàn)（樣式/美化）。該標(biāo)準(zhǔn)

2、簡化了HTML頁面代碼，獲得一個較優(yōu)秀的網(wǎng)站結(jié)構(gòu)，有利于日后網(wǎng)站維護、協(xié)同工作和便于搜索引擎抓取。當(dāng)然并不是所有的網(wǎng)頁都需要用div布局，例如數(shù)據(jù)頁面、報表之類的頁面，還是使用HTML的表格會比較方便，web標(biāo)準(zhǔn)里并沒有說要拋棄table。 DIV+CSS標(biāo)準(zhǔn)的優(yōu)點表現(xiàn)和內(nèi)容相分離代碼簡潔，提高頁面瀏覽速度易于維護和改版提高搜索引擎對網(wǎng)頁的索引效率各個瀏覽器之間的差異安裝多種瀏覽器,對比差異進行調(diào)試在FF瀏覽器中安裝firebugFirebug 為你的 Firefox 集成了瀏覽網(wǎng)頁的同時隨手可得的豐富開發(fā)工具。你可以對任何網(wǎng)頁的 CSS、HTML 和 JavaScript 進行實時編輯、調(diào)試

3、和監(jiān)控就算在不同的瀏覽器中效果不完全一至，也要做到大概一至“無意義”的元素div和span HTML只是賦予內(nèi)容的手段，大部分HTML標(biāo)簽都有其意義（例如，標(biāo)簽p創(chuàng)建段落，h1標(biāo)簽創(chuàng)建標(biāo)題等等）的，然而div和span標(biāo)簽似乎沒有任何內(nèi)容上的意義，聽起來就像一個泡沫做成的錘子一樣無用。但實際上，與CSS結(jié)合起來后，它們被用得十分廣泛。你所需要記住的是span和div是“無意義”的標(biāo)簽。它們的存在純粹是應(yīng)用樣式，所以當(dāng)樣式表失效時它就沒有任何的作用它們被用來組合成一大塊的HTML代碼并賦予一定的信息，大部分用類屬性class和標(biāo)識屬性id與元素聯(lián)系起來。span和div的不同之處在于span是內(nèi)

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

5、，而盒子邊框外和其他盒子之間，還有邊界（margin）。 布局中的主要樣式fontline-heightcolormarginpaddingbordertext-alignbackgroundwidth:heightfloat:cleardisplay定位屬性 屬 性描 述Position用于定義一個元素是否absolute（絕對），relative（相對），static（靜態(tài)），或者fixed（固定）Top層距離頂點縱坐標(biāo)的距離Left層距離頂點橫坐標(biāo)的距離Width層的寬度，可以用一個長度或“auto”值來指定其寬度，不允許使用負(fù)值Height層的高度，可以用一個長度或“auto”值來指定

6、其高度，不允許使用負(fù)值z-index決定層的先后順序和覆蓋關(guān)系，值高的元素會覆蓋值比較低的元素Display是一個顯示屬性，設(shè)定block值是以塊狀顯示，在元素后面添加換行符，既其他元素不能在其后面并列顯示。如果設(shè)定inline值則內(nèi)聯(lián)顯示，在元素后面刪除換行符，多個元素可以在一行內(nèi)并列顯示。使用值none將關(guān)閉指定元素及其子元素的顯示Visibility這個屬性是針對嵌套層的設(shè)置，如果存在嵌套的層（子層）和被嵌套的層（父層）時，可以使用inherit值設(shè)置子層繼承父層的可見性，如果父層可見，子層也可見。當(dāng)使用visible值時，無論父層是否可見，子層都可見。而值為hidden時，無論父層是否

7、可見，子層都隱藏Overflow用于設(shè)置層內(nèi)的內(nèi)容超出層所能容納的范圍處理方式，為該屬性設(shè)置visible值時，無論層的大小，內(nèi)容都會顯示出來。當(dāng)設(shè)置hidden值時，會隱藏超出層大小的內(nèi)容。當(dāng)設(shè)置值為scroll時，不管內(nèi)容是否超出層的范圍，選中此項都會為層添加滾動條。而值使用auto值時，只在內(nèi)容超出層的范圍時才顯示滾動條區(qū)塊屬性(區(qū)塊模型)屬 性描 述Margin(注)是定義區(qū)塊外邊界與上級元素距離的屬性，用1到4個值來設(shè)置元素的邊界，每個值都是長度、百分比或者auto，百分比值參考上級元素的寬度，允許使用負(fù)值邊際。如果四個值都給出了，它們分別被應(yīng)用于上、右、下和左邊界。如果只給出一個值

8、，它被應(yīng)用于所有邊界。如果兩個或三個值給出了，省略了的值與對邊相等。注意如果邊界在垂直方向鄰接(重疊)了，會改用其中最大的那個邊界值。而水平方向則不會。也可以選擇使用上邊界margin-top、下邊界margin-bottom、左邊界margin-left和右邊界margin-right屬性分別設(shè)置與上級元素的外邊距。padding用于設(shè)置區(qū)塊的內(nèi)邊距屬性，是邊框和元素內(nèi)容之間的間隔距離。與margin屬性相返，但使用的是相同屬性值。是上補白padding-top、右補白padding-right、下補白padding-bottom和左補白padding-left屬性的略寫float設(shè)置區(qū)塊漂

9、浮屬性，允許網(wǎng)頁制作者將文本環(huán)繞在一個元素的周圍，可以使用左漂浮left值，右漂浮right值clear清除屬性指定一個元素是否允許有元素漂浮在它的旁邊。值left移動元素到在其左邊的漂浮的元素的下面；同樣的值right移動到其右邊的漂浮的元素下面。其他的還有缺省的none值，和移動元素到其兩邊的漂浮的元素的下面的both值區(qū)塊框浮動 雖然使用絕對定位可以實現(xiàn)頁面布局，但由于調(diào)整某個區(qū)塊框時其它區(qū)塊的位置并不會跟隨著改變，所以并不是布局的首選方式。而使用浮動的區(qū)塊框可以向左或向右移動，直到它的外邊緣碰到包含它區(qū)塊的邊框或另一個浮動框的邊框為止。并且由于浮動框不在文檔的普通流中，所以文檔的普通流中的區(qū)塊框表現(xiàn)得就像浮動框不存在一樣。設(shè)置浮動行框和清理在進行頁面布局時，經(jīng)常需要設(shè)置多個區(qū)塊框并列在一行中排列。最常見的方式就是使用float屬性，再通過left或right值移動區(qū)塊框向左或向右浮動。但當(dāng)前面并列的多個區(qū)塊框總寬度不足包含框的100%時，就會在行框中留出一定的寬度，而下面的某個區(qū)塊框又恰好滿足這個寬度，則很可能會向上提，和上一行并列的區(qū)塊框在同一行排列。而這不并是我們想要的結(jié)果，所以可以使用clear屬性解決這一問題，該屬性的值可以是 left、right、both 或 none，它表示框的哪些邊不應(yīng)該挨著浮動框。 使