DIV+CSS布局ppt課件

1、;.1DIV+CSS布局布局;.2div+css這是國內(nèi)流行的叫法,其實(shí)準(zhǔn)確點(diǎn)應(yīng)該叫xhtml+css.,也就是web標(biāo)準(zhǔn)化布局。Div : division 意為“區(qū)分” 。 Very excellent webmaster club CSS:Cascading style Sheets，采用CSS技術(shù)，可以有效地對頁面的布局、字體、顏色、背景和其它效果實(shí)現(xiàn)更加精確的控制。 ;.3Div+CSS標(biāo)準(zhǔn)的優(yōu)點(diǎn)1.大大縮減頁面代碼，提高頁面瀏覽速度,縮減帶寬成本; 2.結(jié)構(gòu)清晰，容易被搜索引擎搜索到，天生優(yōu)化了seo 3.縮短改版時間。只要簡單的修改幾個CSS文件就可以重新設(shè)計一個有成百上千頁面的

2、站點(diǎn)。 4.強(qiáng)大的字體控制和排版能力。CSS控制字體的能力優(yōu)于糟糕的FONT標(biāo)簽。 。;.4Div+CSS標(biāo)準(zhǔn)的優(yōu)點(diǎn)5.表現(xiàn)和內(nèi)容相分離。將設(shè)計部分剝離出來放在一個獨(dú)立樣式文件中，你可以減少未來網(wǎng)頁無效的可能。 6.更方便搜索引擎的搜索。用只包含結(jié)構(gòu)化內(nèi)容的HTML代替嵌套的標(biāo)簽，搜索引擎將更有效地搜索到你的內(nèi)容，并可能給你一個較高的評價(ranking)。 7.Table 布局靈活性不大，你只能遵循 table tr td 的格式。而div 你可以 div ul li 也可以 ol li 還可以 ul li 但標(biāo)準(zhǔn)語法最好有序的寫。;.5XHTML可擴(kuò)展超文本標(biāo)簽語言（EXtensible

3、HyperText Markup Language）,目標(biāo)是取代 HTML。;.6為什么要使用為什么要使用XHTML？XHTML 使我們有能力編寫出擁有良好結(jié)構(gòu)的文檔，這些文檔可以很好地工作于所有的瀏覽器，并且可以向后兼容。許多頁面都包含著糟糕的 HTML 代碼。下面的 HTML 代碼仍然可以工作得很好，即使它沒有遵守 HTML 規(guī)則.;.7XHTML 要求要求XHTML 元素必須被正確地嵌套。XHTML 元素必須被關(guān)閉。標(biāo)簽名必須用小寫字母。;.8;.9;.10;.11更多的 XHTML 語法規(guī)則屬性名稱必須小寫屬性值必須加引號屬性不能簡寫用 Id 屬性代替 name 屬性;.12XHTML

4、 文檔有三個主要的部分DOCTYPEHeadBody;.13DIV+CSS布局前思考;.14層布局定義原則從上到下從上到下 從外到內(nèi)從外到內(nèi);.15布局塊定義標(biāo)簽用class 和id定義并選擇CSS樣式屬性Class ：“類”，同一個html網(wǎng)頁頁面可以無數(shù)次的調(diào)用相同的class類。ID：標(biāo)簽的身份，同樣ID在頁面里也只能出現(xiàn)一次，并且是唯一性。ID和和class是對大小寫非常敏感的，最好以英文開頭，不要用中文命名是對大小寫非常敏感的，最好以英文開頭，不要用中文命名CSS類名。類名。;.16 DIV CSS中中CLASS與與ID實(shí)例實(shí)例 .css5 width:100px; height:1

5、00px; border:1px solid #000; float:left; .css5_class background:#FFF; /背景白色背景白色#css5_id background:#FF0000; /背景紅色背景紅色我在瀏覽器下瀏覽，內(nèi)容背景將是白色我在瀏覽器下瀏覽，內(nèi)容背景將是白色 我在瀏覽器下瀏覽，內(nèi)容背景將是紅色我在瀏覽器下瀏覽，內(nèi)容背景將是紅色 ;.17CSS盒子模型盒子模型;.18布局相關(guān)CSS-margin控制塊級元素之間的距離margin屬性的參數(shù)：屬性的參數(shù)： margin left ：距左左元素塊距離（設(shè)置距左內(nèi)邊距） ； margin top：距頭頂頭頂(

6、上上)元素塊距離（設(shè)置距頂部元素塊距離）； margin right ：距右元素塊距離（設(shè)置距右元素塊距） ； margin bottom ：底底元素塊距離（設(shè)置距低（下）低（下）元素塊距）。margin:5px 6px 7px 8px;各參數(shù)分別指代各參數(shù)分別指代Top、Right、Bottom和和Left;.19布局相關(guān)CSS-padding間隙屬性,用來設(shè)置元素內(nèi)容到元素邊界的距離。注意： padding用在容器內(nèi)部，margin指容器外部，就像墻上掛著的兩個相框，margin指的是相框與相框的距離，padding指的是每個相框里照片與相框邊框的距離。 ;.20布局相關(guān)CSS-float該屬性的值指出了對象是否及如何浮動。float屬性的參數(shù)：屬性的參數(shù)： none：對象不浮動left：對象浮在左邊ri