《泰牛程序員 韓順平 PHP 大牛班 Div Css課程》由會員分享，可在線閱讀，更多相關(guān)《泰牛程序員 韓順平 PHP 大牛班 Div Css課程（76頁珍藏版）》請?jiān)谘b配圖網(wǎng)上搜索。

1、泰牛程序員 PHP 學(xué)院 htpp:/ 第 I 頁 輕松搞定 Div+Css第第 1 章章DIV+CSS 的開山篇的開山篇.11.1什么是DIV+CSS11.2DIV+CSS的快速入門案例1第第 2 章章DIV+CSS 的必要性的必要性.32.1CSS可以統(tǒng)一我們的網(wǎng)站風(fēng)格32.2CSS可以通過濾鏡來控制圖片的顯示風(fēng)格3第第 3 章章CSS 的選擇器的選擇器.53.1選擇器的分類53.2類選擇器53.3ID選擇器63.4HTML標(biāo)簽選擇器73.5偽類選擇器113.6通配符選擇器153.7組合選擇器163.7.1多元素選擇器.163.7.2后代選擇器.183.7.3子元素選擇器.19第第 4 章

2、章CSS 選擇器的深入討論選擇器的深入討論.214.1后代選擇器再說明214.2ID選擇器的優(yōu)先級高于類選擇器224.3多個(gè)類選擇器修飾同一個(gè)HTML元素224.4所有選擇器的優(yōu)先級大比武23第第 5 章章CSS 的使用方式的使用方式.255.1內(nèi)聯(lián)樣式表255.2嵌入樣式表255.3外部樣式表265.4引入樣式表27第第 6 章章CSS 的屬性詳解的屬性詳解.296.1CSS字體的屬性296.2CSS文本屬性296.3CSS背景屬性296.4邊框?qū)傩?0泰牛程序員 PHP 學(xué)院 htpp:/ 第 II 頁 6.5列表屬性316.6TABLE屬性的講解326.7瀏覽器的兼容性處理建議34第第

3、7 章章行內(nèi)元素和塊元素行內(nèi)元素和塊元素.367.1介紹367.2行內(nèi)元素和塊元素的區(qū)別377.3行內(nèi)元素和塊元素相互轉(zhuǎn)換377.4標(biāo)準(zhǔn)流和非標(biāo)準(zhǔn)流38第第 8 章章盒子模型盒子模型.398.1盒子模型的基本概念398.2快速入門案例398.3盒子的模型的經(jīng)典案例418.4在看一個(gè)非常經(jīng)典實(shí)用案例 DIV - UL -LI42第第 9 章章浮動浮動.459.1快速入門459.2深入理解浮動469.3右浮動489.4浮動的理解補(bǔ)充509.5清除浮動52泰牛程序員 PHP 學(xué)院 htpp:/ 第 1 頁 第 1 章div+css 的開山篇1.1什么是 div+cssdiv 是區(qū)塊，在網(wǎng)頁開發(fā)中，用

4、來存放內(nèi)容(文字，圖片，表格等等)css 是層疊樣式表，它的作用是用來規(guī)定 div 和 div 中的內(nèi)容的位置和樣式（顏色，大小，背景，列表的樣式）div+css 結(jié)合就可以做到把內(nèi)容和樣式分離，好處是 1. 代碼簡潔，便于維護(hù) 2. 理由 seo搜索引擎優(yōu)化1.2div+css 的快速入門案例代碼:泰牛程序員 PHP 學(xué)院 htpp:/ 第 2 頁 泰牛程序員 PHP 學(xué)院 htpp:/ 第 3 頁 第 2 章div+css 的必要性2.1 css 可以統(tǒng)一我們的網(wǎng)站風(fēng)格代碼:2.2css 可以通過濾鏡來控制圖片的顯示風(fēng)格把網(wǎng)站的圖片全部變成黑白的，或者模糊的.代碼:泰牛程序員 PHP 學(xué)院

5、 htpp:/ 第 4 頁 泰牛程序員 PHP 學(xué)院 htpp:/ 第 5 頁 第 3 章css 的選擇器3.1選擇器的分類類選擇器(class 選擇器)id 選擇器html 元素選擇器(標(biāo)簽選擇器)通配符選擇器偽類選擇器組合選擇器(多元素選擇器，子元素選擇器，后代選擇器)3.2類選擇器基本語法:.類選擇器名稱css 屬性:屬性值；css 屬性:屬性值；案例:泰牛程序員 PHP 學(xué)院 htpp:/ 第 6 頁 補(bǔ)充：1. 選擇器的名稱命名規(guī)范 .小寫字母-小寫字母2. 一般說，類選擇器是提供給多個(gè) html 元素來使用3.3id 選擇器基本語法:#id 選擇器名稱css 屬性:屬性值；css

6、屬性:屬性值；泰牛程序員 PHP 學(xué)院 htpp:/ 第 7 頁 案例:細(xì)節(jié):1. 一般來說 id 選擇器是提供給某一個(gè) html 元素來使用2. 當(dāng)我們不確定，有多個(gè) html 元素來使用該樣式時(shí)，請使用類選擇器3.4html 標(biāo)簽選擇器基本用法:html 標(biāo)簽名稱屬性名:屬性值;屬性名:屬性值;案例:泰牛程序員 PHP 學(xué)院 htpp:/ 第 8 頁 代碼:泰牛程序員 PHP 學(xué)院 htpp:/ 第 9 頁 泰牛程序員 PHP 學(xué)院 htpp:/ 第 10 頁 細(xì)節(jié):1. 類選擇器的優(yōu)先級標(biāo)簽選擇器2. 父元素的樣式，會被子元素繼承 提出一個(gè)問題，如何分別指定同一個(gè)標(biāo)簽(p)的不同樣式 代

7、碼:泰牛程序員 PHP 學(xué)院 htpp:/ 第 11 頁 3.5偽類選擇器偽類選擇器，主要是用來控制超鏈接的相關(guān)樣式.案例:代碼:泰牛程序員 PHP 學(xué)院 htpp:/ 第 12 頁 案例 2:泰牛程序員 PHP 學(xué)院 htpp:/ 第 13 頁 代碼:相關(guān)的 css 指定:作業(yè)題 ：泰牛程序員 PHP 學(xué)院 htpp:/ 第 14 頁 代碼:泰牛程序員 PHP 學(xué)院 htpp:/ 第 15 頁 3.6通配符選擇器案例:代碼:泰牛程序員 PHP 學(xué)院 htpp:/ 第 16 頁 3.7組合選擇器3.7.1 多元素選擇器泰牛程序員 PHP 學(xué)院 htpp:/ 第 17 頁 案例:代碼:泰牛程序員

8、 PHP 學(xué)院 htpp:/ 第 18 頁 3.7.2 后代選擇器案例:代碼:泰牛程序員 PHP 學(xué)院 htpp:/ 第 19 頁 結(jié)論:1. 如果我們的后代選擇器的某個(gè)元素需要特別的樣式，則可以 以下面形式來完2. 標(biāo)簽選擇器優(yōu)先級 選擇器泰牛程序員 PHP 學(xué)院 htpp:/ 第 20 頁 案例:代碼:泰牛程序員 PHP 學(xué)院 htpp:/ 第 21 頁 第 4 章css 選擇器的深入討論4.1后代選擇器再說明代碼:小結(jié): 我們使用后代選擇器，盡量使用標(biāo)簽選擇器 ， 或者 類選擇器 和 標(biāo)簽選擇器組合.泰牛程序員 PHP 學(xué)院 htpp:/ 第 22 頁 4.2id 選擇器的優(yōu)先級高于類選

9、擇器4.3多個(gè)類選擇器修飾同一個(gè) html 元素代碼:泰牛程序員 PHP 學(xué)院 htpp:/ 第 23 頁 細(xì)節(jié):1. 當(dāng)優(yōu)先級相同的情況下，在發(fā)生沖突時(shí)，以寫在 style 內(nèi)容中的后面那個(gè)為準(zhǔn)2. 當(dāng)一個(gè)元素被多個(gè)類選擇器修飾時(shí)，它們用空格隔開.4.4所有選擇器的優(yōu)先級大比武案例:代碼:泰牛程序員 PHP 學(xué)院 htpp:/ 第 24 頁 小結(jié):1. !important 行內(nèi)樣式 id 選擇器 類選擇器 html 標(biāo)簽選擇器 通配符選擇器 html 屬性的指定 繼承的樣式屬性(層疊 css, 層疊的樣式時(shí)文本,字體屬性)2. 后代元素，會繼承他的上級元素的各文本和字體相關(guān)的屬性泰牛程序員

10、 PHP 學(xué)院 htpp:/ 第 25 頁 第 5 章css 的使用方式說明:css 的使用方式有四種: 內(nèi)聯(lián)樣式表，嵌入樣式表, 外部樣式表，引入樣式表5.1內(nèi)聯(lián)樣式表基本語法:內(nèi)容舉例:5.2嵌入樣式表基本語法:CSS 選擇器 屬性名:屬性值;屬性名:屬性值;泰牛程序員 PHP 學(xué)院 htpp:/ 第 26 頁 舉例:5.3外部樣式表基本語法是：在需要使用 css 的文件中引入1. 先單獨(dú)的編寫一個(gè) css 文件2. 在需要使用該 css 文件的地方引入舉例說明：泰牛程序員 PHP 學(xué)院 htpp:/ 第 27 頁 5.4引入樣式表基本原理示意圖:案例:泰牛程序員 PHP 學(xué)院 htpp:

11、/ 第 28 頁 泰牛程序員 PHP 學(xué)院 htpp:/ 第 29 頁 第 6 章css 的屬性詳解6.1css 字體的屬性概述：這里主要就是指定字體相關(guān)的樣式.案例 ：6.2css 文本屬性6.3css 背景屬性泰牛程序員 PHP 學(xué)院 htpp:/ 第 30 頁 小結(jié):1. 背景的屬性有 5 個(gè)，這 5 個(gè)可以直接放在 background 這個(gè)屬性中2. backgroud 的五個(gè)值順序不是固定，但是，我們要求安裝 顏色 ， 背景圖，是否延伸, 位置，是否固定3. 在默認(rèn)情況下，背景圖的參考的原點(diǎn)是包含它的父元素的左上角，但是如果我們設(shè)置 background-attachment: f

12、ixed 則我們的原點(diǎn)改成了瀏覽器視窗左上角6.4邊框?qū)傩耘e例說明:泰牛程序員 PHP 學(xué)院 htpp:/ 第 31 頁 6.5列表屬性案例:代碼:泰牛程序員 PHP 學(xué)院 htpp:/ 第 32 頁 總結(jié):1. 在默認(rèn)情況下 li 和 ul 有一個(gè)默認(rèn)的左邊距, 我們可以通過 在 li 元素中增加margin-left 來解決這個(gè)問題.2. 如果我們希望把圖標(biāo)放在 li 元素內(nèi)，則可以在 li 元素中增加一個(gè)樣式 list-style-postion:inside;3. 我們可以把三個(gè)屬性放到一起寫 list-style:none outside url(sanjiao-1.jpg);6.6

13、table 屬性的講解說明：table 的屬性有:泰牛程序員 PHP 學(xué)院 htpp:/ 第 33 頁 案例 ：代碼:泰牛程序員 PHP 學(xué)院 htpp:/ 第 34 頁 小結(jié):1. 如果你是對表格整體樣式的設(shè)置，在 table 元素設(shè)置，如果是針對每行每列的設(shè)置，則到 tr td th 去修改6.7瀏覽器的兼容性處理建議1. 主要搞定 ie 和 ff,其它都比較好解決2. 安裝 ietester 和 firebug ， ie 自帶一個(gè)開發(fā)人員工具有助于我們解決兼容性問題.泰牛程序員 PHP 學(xué)院 htpp:/ 第 35 頁 3. 盡量使用通用的 css 屬性4. 通常使用 div 或者 sp

14、an 這些沒有實(shí)際意義的標(biāo)簽來指定某段 html 的樣式.div用于大段 html,而 span 則一般為小段文本泰牛程序員 PHP 學(xué)院 htpp:/ 第 36 頁 第 7 章行內(nèi)元素和塊元素7.1介紹: 快速體驗(yàn)案例:行內(nèi)元素和塊元素:代碼:泰牛程序員 PHP 學(xué)院 htpp:/ 第 37 頁 7.2行內(nèi)元素和塊元素的區(qū)別7.3行內(nèi)元素和塊元素相互轉(zhuǎn)換泰牛程序員 PHP 學(xué)院 htpp:/ 第 38 頁 7.4標(biāo)準(zhǔn)流和非標(biāo)準(zhǔn)流泰牛程序員 PHP 學(xué)院 htpp:/ 第 39 頁 第 8 章盒子模型8.1盒子模型的基本概念8.2快速入門案例代碼:泰牛程序員 PHP 學(xué)院 htpp:/ 第 4

15、0 頁 對應(yīng)的盒子的大概樣子:泰牛程序員 PHP 學(xué)院 htpp:/ 第 41 頁 8.3盒子的模型的經(jīng)典案例代碼:泰牛程序員 PHP 學(xué)院 htpp:/ 第 42 頁 8.4在看一個(gè)非常經(jīng)典實(shí)用案例 div - ul -li 案例示意圖:泰牛程序員 PHP 學(xué)院 htpp:/ 第 43 頁 代碼:泰牛程序員 PHP 學(xué)院 htpp:/ 第 44 頁 泰牛程序員 PHP 學(xué)院 htpp:/ 第 45 頁 第 9 章浮動概念: 浮(漂浮)動分為左浮動，右浮動，清除浮動。9.1快速入門代碼:泰牛程序員 PHP 學(xué)院 htpp:/ 第 46 頁 浮動特點(diǎn):1. 向你指定的方向移動，并且讓出空間2.

16、如果后面的元素，也是浮動的，那么后面的元素就會在碰到前面的浮動的元素或者邊框時(shí)，就定位在那里.3. 如果后面的元素沒有浮動，則該元素就會在浮動的元素的下面，但是內(nèi)容會盡量的顯示出來，而且后面的元素是塊元素。4. 行元素也可以浮動，浮動后就具有塊元素的特點(diǎn).9.2深入理解浮動代碼:泰牛程序員 PHP 學(xué)院 htpp:/ 第 47 頁 再舉一個(gè)案例:泰牛程序員 PHP 學(xué)院 htpp:/ 第 48 頁 說明：當(dāng)一個(gè)大的 div 把其它的 div 包括了，大的 div 的高度，如果是他所有的div 都浮動，則大的 div 高度為 09.3右浮動如果我們要實(shí)現(xiàn)如下圖形，就可以使用右浮動,當(dāng)把 div1

17、 向右浮動時(shí),它脫離標(biāo)準(zhǔn)流并且向右移動，直到它的右邊緣碰到包含框的右邊緣.案例說明:泰牛程序員 PHP 學(xué)院 htpp:/ 第 49 頁 泰牛程序員 PHP 學(xué)院 htpp:/ 第 50 頁 9.4浮動的理解補(bǔ)充代碼 ：泰牛程序員 PHP 學(xué)院 htpp:/ 第 51 頁 小結(jié)：當(dāng)浮動的元素的高度不一致的時(shí)候，會出現(xiàn)卡的現(xiàn)象，直到調(diào)整的合適的泰牛程序員 PHP 學(xué)院 htpp:/ 第 52 頁 高度值，就恢復(fù)到正常的左浮動.9.5清除浮動基本語法是 clear:both;作用是兩點(diǎn):1. 讓包住他的父元素的邊框正常顯示2. 讓后面的元素，恢復(fù)到正常流,不再受到浮動的影響泰牛程序員 PHP 學(xué)院

18、 htpp:/ 第 53 頁 泰牛程序員 PHP 學(xué)院 htpp:/ 第 54 頁 第 10 章 定位定位：position, 對我們的元素進(jìn)行定位處理,即把元素放在我們希望放在位置，有static(靜態(tài)定位，默認(rèn)值)，relative（相對定位） ，絕對定位(absolute),fixed（固定）,定位需要和四個(gè)值配合使用(top left right , bottom)10.1 靜態(tài)定位前面我們講的都是靜態(tài)定位，默認(rèn)值。10.2 相對定位(relative)案例:代碼:泰牛程序員 PHP 學(xué)院 htpp:/ 第 55 頁 小的結(jié)論1. 相對定位的 left 和 top 是針對該元素原來的位

19、置2. 當(dāng)相對定位后，原來的空間是被保留.3. 當(dāng)相對定位后，如果相對定位后的盒子(元素)和原來的盒子有重疊，則會覆蓋。泰牛程序員 PHP 學(xué)院 htpp:/ 第 56 頁 10.3 絕對定位position : absolute;案例: 代碼:泰牛程序員 PHP 學(xué)院 htpp:/ 第 57 頁 細(xì)節(jié):1.絕對定位參考的點(diǎn)，是上一級最近的那個(gè)非靜態(tài)定位的盒子的左上角2.如果他的上級元素，沒有非靜態(tài)定位的盒子，則以瀏覽器的視窗（body）的左上角為原點(diǎn).(body 網(wǎng)頁)3.絕對定位后，他的空間會讓給其它元素來使用.泰牛程序員 PHP 學(xué)院 htpp:/ 第 58 頁 案例:代碼:泰牛程序員

20、PHP 學(xué)院 htpp:/ 第 59 頁 泰牛程序員 PHP 學(xué)院 htpp:/ 第 60 頁 10.4 靜態(tài)定位靜態(tài)定位，對 left 和 top, right,bottom 都不生效.10.5 fixed 定位特點(diǎn): 元素框的表現(xiàn)類似于將 position 設(shè)置為 absolute，不過其包含塊是窗口本身。舉例說明:代碼:泰牛程序員 PHP 學(xué)院 htpp:/ 第 61 頁 10.6 關(guān)于 left 和 top 的值的問題.問題,請思考,如何把一個(gè) div 放在 body 的中間(左右和上下居中)？案例:泰牛程序員 PHP 學(xué)院 htpp:/ 第 62 頁 10.7 z-index 可以理

21、解成事空間上下的定位代碼:泰牛程序員 PHP 學(xué)院 htpp:/ 第 63 頁 小結(jié):1.z-index 和 position:absolute 配合使用2.z-index 默認(rèn)是 03.z-index 的值越大，越在上層.泰牛程序員 PHP 學(xué)院 htpp:/ 第 64 頁 第 11 章 css 綜合布局案例11.1 sohu 首頁的布局思路分析:代碼: 泰牛程序員 PHP 學(xué)院 htpp:/ 第 65 頁 搜狐首頁布局 bodymargin:0px;padding:0px;font-size:12px;#boxwidth:950px;height:500px;/*background-co

22、lor:pink;*/margin:0 auto;.topwidth:950px;height:23px;background-color:#FFF0F5;line-height:23px;.loginwidth:416px;height:23px;float:left;background:#008000;泰牛程序員 PHP 學(xué)院 htpp:/ 第 66 頁 .set-indexwidth:105px;height:23px;float:left;background:#808080;margin-left:80px;.img-logowidth:250px;height:23px;floa

23、t:right;background:#B4B4B4;.user-name-styleheight:14px;.button-styleheight:23px;font-size:12px;.web-logowidth:136px;height:68px;margin-top:5px;float:left;泰牛程序員 PHP 學(xué)院 htpp:/ 第 67 頁 .navwidth:807px;height:68px;background:#7CF574;float:right;margin-top:5px;.ad-boxwidth:948px;height:213px;border:1px so

24、lid silver;margin-top:5px;float:left;.ad-zsheight:195px;width:125px;background-color:#FC7E8C;float:left;margin:8px 0 0 5px;.ad-2height:195px;width:454px;background-color:#FC7E8C;泰牛程序員 PHP 學(xué)院 htpp:/ 第 68 頁 float:left;margin:8px 0 0 13px;.ad-househeight:195px;width:150px;background-color:#7CF574;float

25、:left;margin:8px 0 0 13px;.ad-imgborder-left:1px solid silver;float:right;height:213px;width:180px;text-align:center;.ad-img imgmargin-top:10px;.heroborder:1px solid red;width:140px;border-collapse:collapse;margin:0 auto;泰牛程序員 PHP 學(xué)院 htpp:/ 第 69 頁 margin-top:50px;.hero td,.hero tr, .hero thborder:1p

26、x solid red; 登錄表單設(shè)置首頁圖片 log招生廣告泰牛程序員 PHP 學(xué)院 htpp:/ 第 70 頁 廣告 2房地產(chǎn)廣告招生廣告廣告 2房地產(chǎn)廣告招生廣告廣告 2編號姓名外號001宋江及時(shí)雨001宋江及時(shí)雨001宋江及時(shí)雨泰牛程序員 PHP 學(xué)院 htpp:/ 第 71 頁 泰牛程序員 PHP 學(xué)院 htpp:/ 第 72 頁 第 12 章 瀏覽器兼容性的處理12.1 ul 和 li 的處理得出的一個(gè)結(jié)論:我們只需在 ul 這個(gè)地方加入 margin:0px; 和 padding-left:0px;12.2 關(guān)于如果把小圖標(biāo)放在 li 的上下居中在hello 的 ul 這一級給一

27、個(gè) line-height: 的 css屬性即可搞定, 比如:.student-question-list background: #ffffff; float:left; list-style-type: none; margin:0px; padding-left:15px; line-height:20px;泰牛程序員 PHP 學(xué)院 htpp:/ 第 73 頁 12.3 如何把圖片放在一個(gè)元素的上下居中:12.4 關(guān)于 div 的高度自適應(yīng)的問題!12.5 關(guān)于邊框的一個(gè)兼容處理泰牛程序員 PHP 學(xué)院 htpp:/ 第 74 頁 width:48px !important; /*ff 以 important 為準(zhǔn), 為什么不是 19,是因?yàn)椋琤order: 1px 左右兩邊都要占.*/width:50px;