泰牛程序員 韓順平 PHP 大牛班 Div Css課程

1、輕松搞定 div+css 第第 1 章章div+css 的開山篇的開山篇.1 1.1什么是div+css1 1.2div+css的快速入門案例1 第第 2 章章div+css 的必要性的必要性.3 2.1css可以統(tǒng)一我們的網(wǎng)站風格3 2.2css可以通過濾鏡來控制圖片的顯示風格3 第第 3 章章css 的選擇器的選擇器.5 3.1選擇器的分類5 3.2類選擇器5 3.3id選擇器6 3.4html標簽選擇器7 3.5偽類選擇器11 3.6通配符選擇器15 3.7組合選擇器16 3.7.1多元素選擇器.16 3.7.2后代選擇器.18 3.7.3子元素選擇器.19 第第 4 章章css 選擇器

2、的深入討論選擇器的深入討論.21 4.1后代選擇器再說明21 4.2id選擇器的優(yōu)先級高于類選擇器22 4.3多個類選擇器修飾同一個html元素22 4.4所有選擇器的優(yōu)先級大比武23 第第 5 章章css 的使用方式的使用方式.25 5.1內聯(lián)樣式表25 5.2嵌入樣式表25 5.3外部樣式表26 5.4引入樣式表27 第第 6 章章css 的屬性詳解的屬性詳解.29 6.1css字體的屬性29 6.2css文本屬性29 6.3css背景屬性29 6.4邊框屬性30 6.5列表屬性31 6.6table屬性的講解32 6.7瀏覽器的兼容性處理建議34 第第 7 章章行內元素和塊元素行內元素和

3、塊元素.36 7.1介紹36 7.2行內元素和塊元素的區(qū)別37 7.3行內元素和塊元素相互轉換37 7.4標準流和非標準流38 第第 8 章章盒子模型盒子模型.39 8.1盒子模型的基本概念39 8.2快速入門案例39 8.3盒子的模型的經(jīng)典案例41 8.4在看一個非常經(jīng)典實用案例 div - ul -li42 第第 9 章章浮動浮動.45 9.1快速入門45 9.2深入理解浮動46 9.3右浮動48 9.4浮動的理解補充50 9.5清除浮動52 第 1 章div+css 的開山篇 1.1什么是 div+css div 是區(qū)塊，在網(wǎng)頁開發(fā)中，用來存放內容(文字，圖片，表格等等) css 是層疊

4、樣式表，它的作用是用來規(guī)定 div 和 div 中的內容的位置和樣式（顏色， 大小，背景，列表的樣式） div+css 結合就可以做到把內容和樣式分離，好處是 1. 代碼簡潔，便于維護 2. 理由 seo搜索引擎優(yōu)化 1.2div+css 的快速入門案例 代碼: 第 2 章div+css 的必要性 2.1 css 可以統(tǒng)一我們的網(wǎng)站風格 代碼: 2.2css 可以通過濾鏡來控制圖片的顯示風格 把網(wǎng)站的圖片全部變成黑白的，或者模糊的. 代碼: 第 3 章css 的選擇器 3.1選擇器的分類 類選擇器(class 選擇器) id 選擇器 html 元素選擇器(標簽選擇器) 通配符選擇器 偽類選擇器

5、 組合選擇器(多元素選擇器，子元素選擇器，后代選擇器) 3.2類選擇器 基本語法: .類選擇器名稱 css 屬性:屬性值； css 屬性:屬性值； 案例: 補充： 1. 選擇器的名稱命名規(guī)范 .小寫字母-小寫字母 2. 一般說，類選擇器是提供給多個 html 元素來使用 3.3id 選擇器 基本語法: #id 選擇器名稱 css 屬性:屬性值； css 屬性:屬性值； 案例: 細節(jié): 1. 一般來說 id 選擇器是提供給某一個 html 元素來使用 2. 當我們不確定，有多個 html 元素來使用該樣式時，請使用類選擇器 3.4html 標簽選擇器 基本用法: html 標簽名稱 屬性名:屬性

6、值; 屬性名:屬性值; 案例: 代碼: 細節(jié): 1. 類選擇器的優(yōu)先級標簽選擇器 2. 父元素的樣式，會被子元素繼承 提出一個問題，如何分別指定同一個標簽(p)的不同樣式 代碼: 3.5偽類選擇器 偽類選擇器，主要是用來控制超鏈接的相關樣式. 案例: 代碼: 案例 2: 代碼: 相關的 css 指定: 作業(yè)題 ： 代碼: 3.6通配符選擇器 案例: 代碼: 3.7組合選擇器 3.7.1 多元素選擇器 案例: 代碼: 3.7.2 后代選擇器 案例: 代碼: 結論: 1. 如果我們的后代選擇器的某個元素需要特別的樣式，則可以 以下面形式來完 2. 標簽選擇器優(yōu)先級 選擇器 案例: 代碼: 第 4

7、章css 選擇器的深入討論 4.1后代選擇器再說明 代碼: 小結: 我們使用后代選擇器，盡量使用標簽選擇器 ， 或者 類選擇器 和 標簽選 擇器組合. 4.2id 選擇器的優(yōu)先級高于類選擇器 4.3多個類選擇器修飾同一個 html 元素 代碼: 細節(jié): 1. 當優(yōu)先級相同的情況下，在發(fā)生沖突時，以寫在 style 內容中的后面那個為準 2. 當一個元素被多個類選擇器修飾時，它們用空格隔開. 4.4所有選擇器的優(yōu)先級大比武 案例: 代碼: 小結: 1. !important 行內樣式 id 選擇器 類選擇器 html 標簽選擇器 通配符選 擇器 html 屬性的指定 繼承的樣式屬性(層疊 css

8、, 層疊的樣式時文本,字體 屬性) 2. 后代元素，會繼承他的上級元素的各文本和字體相關的屬性 第 5 章css 的使用方式 說明:css 的使用方式有四種: 內聯(lián)樣式表，嵌入樣式表, 外部樣式表，引入樣式表 5.1內聯(lián)樣式表 基本語法: 內容 舉例: 5.2嵌入樣式表 基本語法: css 選擇器 屬性名:屬性值; 屬性名:屬性值; 舉例: 5.3外部樣式表 基本語法是： 在需要使用 css 的文件中引入 1. 先單獨的編寫一個 css 文件 2. 在需要使用該 css 文件的地方引入 舉例說明： 5.4引入樣式表 基本原理示意圖: 案例: 第 6 章css 的屬性詳解 6.1css 字體的屬

9、性 概述：這里主要就是指定字體相關的樣式. 案例 ： 6.2css 文本屬性 6.3css 背景屬性 小結: 1. 背景的屬性有 5 個，這 5 個可以直接放在 background 這個屬性中 2. backgroud 的五個值順序不是固定，但是，我們要求安裝 顏色 ， 背景圖，是 否延伸, 位置，是否固定 3. 在默認情況下，背景圖的參考的原點是包含它的父元素的左上角，但是如果我 們設置 background-attachment: fixed 則我們的原點改成了瀏覽器視窗左上角 6.4邊框屬性 舉例說明: 6.5列表屬性 案例: 代碼: 總結: 1. 在默認情況下 li 和 ul 有一個

10、默認的左邊距, 我們可以通過 在 li 元素中增加 margin-left 來解決這個問題. 2. 如果我們希望把圖標放在 li 元素內，則可以在 li 元素中增加一個樣式 list- style-postion:inside; 3. 我們可以把三個屬性放到一起寫 list-style:none outside url(sanjiao-1.jpg); 6.6table 屬性的講解 說明：table 的屬性有: 案例 ： 代碼: 小結: 1. 如果你是對表格整體樣式的設置，在 table 元素設置，如果是針對每行每列的 設置，則到 tr td th 去修改 6.7瀏覽器的兼容性處理建議 1. 主

11、要搞定 ie 和 ff,其它都比較好解決 2. 安裝 ietester 和 firebug ， ie 自帶一個開發(fā)人員工具有助于我們解決兼容性問 題. 3. 盡量使用通用的 css 屬性 4. 通常使用 div 或者 span 這些沒有實際意義的標簽來指定某段 html 的樣式.div 用于大段 html,而 span 則一般為小段文本 第 7 章行內元素和塊元素 7.1介紹 : 快速體驗案例: 行內元素和塊元素: 代碼: 7.2行內元素和塊元素的區(qū)別 7.3行內元素和塊元素相互轉換 7.4標準流和非標準流 第 8 章盒子模型 8.1盒子模型的基本概念 8.2快速入門案例 代碼: 對應的盒子的

12、大概樣子: 8.3盒子的模型的經(jīng)典案例 代碼: 8.4在看一個非常經(jīng)典實用案例 div - ul -li 案例示意圖: 代碼: 第 9 章浮動 概念: 浮(漂浮)動分為左浮動，右浮動，清除浮動。 9.1快速入門 代碼: 浮動特點: 1. 向你指定的方向移動，并且讓出空間 2. 如果后面的元素，也是浮動的，那么后面的元素就會在碰到前面的浮動的元素 或者邊框時，就定位在那里. 3. 如果后面的元素沒有浮動，則該元素就會在浮動的元素的下面，但是內容會盡 量的顯示出來，而且后面的元素是塊元素。 4. 行元素也可以浮動，浮動后就具有塊元素的特點. 9.2深入理解浮動 代碼: 再舉一個案例: 說明：當一個

13、大的 div 把其它的 div 包括了，大的 div 的高度，如果是他所有的 div 都浮動，則大的 div 高度為 0 9.3右浮動 如果我們要實現(xiàn)如下圖形，就可以使用右浮動,當把 div1 向右浮動時,它脫離標準流 并且向右移動，直到它的右邊緣碰到包含框的右邊緣. 案例說明: 9.4浮動的理解補充 代碼 ： 小結：當浮動的元素的高度不一致的時候，會出現(xiàn)卡的現(xiàn)象，直到調整的合適的 高度值，就恢復到正常的左浮動. 9.5清除浮動 基本語法是 clear:both; 作用是兩點: 1. 讓包住他的父元素的邊框正常顯示 2. 讓后面的元素，恢復到正常流,不再受到浮動的影響 第 10 章 定位 定位

14、：position, 對我們的元素進行定位處理,即把元素放在我們希望放在位置，有 static(靜態(tài)定位，默認值)，relative（相對定位） ，絕對定位(absolute),fixed（固定）,定 位需要和四個值配合使用(top left right , bottom) 10.1 靜態(tài)定位 前面我們講的都是靜態(tài)定位，默認值。 10.2 相對定位(relative) 案例: 代碼: 小的結論 1. 相對定位的 left 和 top 是針對該元素原來的位置 2. 當相對定位后，原來的空間是被保留. 3. 當相對定位后，如果相對定位后的盒子(元素)和原來的盒子有重疊，則會覆蓋。 10.3 絕對定

15、位 position : absolute; 案例: 代碼: 細節(jié): 1.絕對定位參考的點，是上一級最近的那個非靜態(tài)定位的盒子的左上角 2.如果他的上級元素，沒有非靜態(tài)定位的盒子，則以瀏覽器的視窗（body）的左上角 為原點.(body 網(wǎng)頁) 3.絕對定位后，他的空間會讓給其它元素來使用. 案例: 代碼: 10.4 靜態(tài)定位 靜態(tài)定位，對 left 和 top, right,bottom 都不生效. 10.5 fixed 定位 特點: 元素框的表現(xiàn)類似于將 position 設置為 absolute，不過其包含塊是窗口本 身。 舉例說明: 代碼: 10.6 關于 left 和 top 的值的

16、問題. 問題,請思考,如何把一個 div 放在 body 的中間(左右和上下居中)？ 案例: 10.7 z-index 可以理解成事空間上下的定位 代碼: 小結: 1.z-index 和 position:absolute 配合使用 2.z-index 默認是 0 3.z-index 的值越大，越在上層. 第 11 章 css 綜合布局案例 11.1 sohu 首頁的布局 思路分析: 代碼: 搜狐首頁布局 body margin:0px; padding:0px; font-size:12px; #box width:950px; height:500px; /*background-colo

17、r:pink;*/ margin:0 auto; .top width:950px; height:23px; background-color:#fff0f5; line-height:23px; .login width:416px; height:23px; float:left; background:#008000; .set-index width:105px; height:23px; float:left; background:#808080; margin-left:80px; .img-logo width:250px; height:23px; float:right;

18、 background:#b4b4b4; .user-name-style height:14px; .button-style height:23px; font-size:12px; .web-logo width:136px; height:68px; margin-top:5px; float:left; .nav width:807px; height:68px; background:#7cf574; float:right; margin-top:5px; .ad-box width:948px; height:213px; border:1px solid silver; ma

19、rgin-top:5px; float:left; .ad-zs height:195px; width:125px; background-color:#fc7e8c; float:left; margin:8px 0 0 5px; .ad-2 height:195px; width:454px; background-color:#fc7e8c; float:left; margin:8px 0 0 13px; .ad-house height:195px; width:150px; background-color:#7cf574; float:left; margin:8px 0 0 13px; .ad-img border-left:1px solid silver; float:right; height:213px; width:180px; text-align:center; .ad-img img margin-top:10px; .hero border:1px solid red; width:140p