第2篇div+css介紹

1、Web開發(fā)基礎(chǔ)：html+css+javascript第2篇 div+css介紹夢工場Java私塾夢工場Java私塾 div+css是什么div元素是用來為HTML文檔內(nèi)大塊（block-level）的內(nèi)容提供結(jié)構(gòu)和背景的元素。css是英語Cascading Style Sheets（層疊樣式表單）的縮寫，它是一種用來表現(xiàn)HTML或XML等文件樣式的計算機語言。div+css是網(wǎng)站標準（或稱“WEB標準”）中常用術(shù)語之一，通常為了說明與HTML網(wǎng)頁設(shè)計語言中，不再使用表格定位技術(shù)，而是采用div+css的方式實現(xiàn)各種定位。我們可以這樣簡單地理解div+css:div是用于存放內(nèi)容（文字、圖片、

2、元素）的容器。css是用于指定放在div中的內(nèi)容如何顯示，包括這些內(nèi)容的位置和外觀。夢工場Java私塾 使用div+css的好處1.html文件就會減少大量的table/tr/td，html變簡單。2.內(nèi)容和樣式分離3.符號搜索引擎的愛好（SEO搜索引擎優(yōu)化師）4.節(jié)省帶寬夢工場Java私塾 網(wǎng)頁設(shè)計的三個歷史時期要深刻理解div+css的優(yōu)越性，我們不得不提到網(wǎng)頁設(shè)計的三個歷史時期：table,table+css,div+css1.table網(wǎng)頁設(shè)計：內(nèi)容和樣式（外觀和布局）混合2.table+css網(wǎng)頁設(shè)計：table布局，css指定外觀3.div+css網(wǎng)頁設(shè)計：div放內(nèi)容，css指定

3、樣式（外觀和布局），內(nèi)容和樣式徹底分離夢工場Java私塾 div+css的優(yōu)勢1.符合W3C標準，微軟等公司均為W3C支持者。2.搜索引擎更加友好3.樣式的調(diào)整更加方便。內(nèi)容和樣式的分離，使頁面和樣式的調(diào)整變得更加方便?，F(xiàn)在YAHOO、MSN等國際門戶網(wǎng)站，網(wǎng)易、新浪等國內(nèi)門戶網(wǎng)站和主流的web2.0網(wǎng)站，均采用div+css的框架模式，更加印證了div+css是大勢所趨。4.css的極大優(yōu)勢表現(xiàn)在簡潔的代碼上，對于一個大型網(wǎng)站來說，可以節(jié)省大量帶寬，而且眾所周知，搜索引擎喜歡簡潔的代碼。5.表現(xiàn)和結(jié)構(gòu)分離，在團隊開發(fā)中更容易分工合作而減少相互關(guān)聯(lián)性。div+css并非讓我們拋棄table，t

4、able顯示數(shù)據(jù)方便，所以在div+css中，該使用table的地方還是應(yīng)該繼續(xù)使用。夢工場Java私塾 div+css主要內(nèi)容1.初識css2.塊級元素和行內(nèi)元素3.css核心內(nèi)容3.1 標準流3.2 盒子模型3.3 浮動3.4 定位4.css綜合案例4.1 盒子模型經(jīng)典案例4.2 仿sohu首頁面布局夢工場Java私塾 div+css的學(xué)習(xí)目標1.掌握css的基本用法2.掌握css的四種選擇器用法夢工場Java私塾 css的必要性請看一個問題請看一個問題案例HtmlPage1.htm這是一個欄目風(fēng)格不同的頁面,如果,我希望統(tǒng)一設(shè)置它們的樣式該怎么辦?夢工場Java私塾 css的必要性 解決

5、之道解決之道-css對案例HtmlPage1.htm，進行改造，使用css來統(tǒng)一設(shè)置所有欄目的樣式。夢工場Java私塾 css的必要性 請再思考一個問題請再思考一個問題 汶川大地震時汶川大地震時, ,所有的網(wǎng)站的圖片所有的網(wǎng)站的圖片, ,都變成黑白的了都變成黑白的了, ,這個是怎么實這個是怎么實現(xiàn)的呢現(xiàn)的呢? ? 案例案例HTMLPage2.htmHTMLPage2.htm這里用到了濾鏡技術(shù)這里用到了濾鏡技術(shù). .夢工場Java私塾 css的四種選擇器選擇器是css中非常重要的概念.css中有四種不同的選擇器1.類選擇器，又叫class選擇器2.id選擇器3.html元素選擇器4.通配符選擇器

6、簡單的說,選擇器就是在css中創(chuàng)建，而在網(wǎng)頁頁面(html,jsp,php,)中使用。夢工場Java私塾 css-類選擇器我們在HtmlPage1.html就使用到了類選擇器,這里再給大家舉一個例子: HTMLPage.htm. .類選擇器名類選擇器名 屬性名屬性名: :屬性值屬性值; ; 夢工場Java私塾 css-id選擇器我們在HTMLPage.htm中給大家演示id選擇器的用法:如圖:#id選擇器名選擇器名 屬性名屬性名:屬性值屬性值;夢工場Java私塾 css-html選擇器 我們在我們在HTMLPage.htm中給大家演示中給大家演示html選擇器的用法選擇器的用法:如圖如圖:如果

7、我們希望網(wǎng)頁中默認字體是如果我們希望網(wǎng)頁中默認字體是 橙色，我們應(yīng)當怎么處理。橙色，我們應(yīng)當怎么處理。 html元素名稱元素名稱 屬性名屬性名:屬性值屬性值;再比如，我們希望所有的超鏈接 (1)默認樣式是 黑色，24px,沒有下劃線 (2)當鼠標移動到超鏈接時，自動出現(xiàn)下劃線 (3)點擊后,超鏈接變成 紅色。這又該怎么實現(xiàn)呢? test.html夢工場Java私塾 css-通配符選擇器 如果希望所有的元素都符合某一種樣式，可以使用通配符選擇如果希望所有的元素都符合某一種樣式，可以使用通配符選擇器。器。* margin: 0; padding: 0 可以讓所有可以讓所有html元素的外邊距和內(nèi)邊

8、距都默認為元素的外邊距和內(nèi)邊距都默認為0，有時特別有用。，有時特別有用。夢工場Java私塾 css-選擇器深入探討 我前面講的都非常簡單我前面講的都非常簡單,實際上實際上css的選擇器使用還有很多您需要注意的的選擇器使用還有很多您需要注意的地方地方，如果不注意根本就不能駕馭，如果不注意根本就不能駕馭css 父子選擇器父子選擇器 請大家看一個圖請大家看一個圖: HTMLPage.htm如果希望特別強調(diào)如果希望特別強調(diào)非常非常兩個字兩個字,該該如何處理如何處理?方案方案: a.id選擇器選擇器 b.class選擇器選擇器c.父子選擇器父子選擇器夢工場Java私塾 css-選擇器深入探討 一個元素可

9、以同時有一個元素可以同時有id選擇器和類選擇器選擇器和類選擇器 請看一個案例請看一個案例: 要實現(xiàn)新聞要實現(xiàn)新聞1 和其它的新聞和其它的新聞 樣式不樣式不 一樣一樣,這怎么實現(xiàn)這怎么實現(xiàn)?夢工場Java私塾 css-選擇器深入探討 一個元素可以同時有一個元素可以同時有id選擇器和類選擇器選擇器和類選擇器 當當id選擇器和類選擇器發(fā)生沖突時選擇器和類選擇器發(fā)生沖突時,id選擇器優(yōu)先級選擇器優(yōu)先級 高于高于 類選擇類選擇器器. 優(yōu)先級優(yōu)先級: id選擇器選擇器 類選擇器類選擇器 比如比如: id選擇器指定字體為紅色選擇器指定字體為紅色,而類選擇器指定字體和藍色，則而類選擇器指定字體和藍色，則頁面顯

10、示紅色頁面顯示紅色.夢工場Java私塾 css-選擇器深入探討 一個元素最多有一個一個元素最多有一個id選擇器選擇器,但是可以有多個類選擇器但是可以有多個類選擇器 請看一個案例請看一個案例: 要實現(xiàn)新聞要實現(xiàn)新聞3 有下劃線并是斜體該有下劃線并是斜體該 怎么實現(xiàn)怎么實現(xiàn)? 方案方案: a.id選擇器選擇器 b.類選擇器類選擇器 當一個元素被多個類選擇器修飾時，它們用空格隔開當一個元素被多個類選擇器修飾時，它們用空格隔開.夢工場Java私塾 css-選擇器深入探討 一個元素最多有一個一個元素最多有一個id選擇器選擇器,但是可以有多個類選擇器，當類但是可以有多個類選擇器，當類選擇器發(fā)生沖突的時候，

11、又以哪個為準呢選擇器發(fā)生沖突的時候，又以哪個為準呢? 我們用一個案例來說明我們用一個案例來說明.夢工場Java私塾 css-選擇器深入探討 當一個元素被當一個元素被id選擇器選擇器,類選擇器類選擇器,html選擇器同時限定時，優(yōu)先選擇器同時限定時，優(yōu)先級是級是: id選擇器選擇器類選擇器類選擇器html選擇器選擇器通配符選擇器通配符選擇器.夢工場Java私塾 css-選擇器深入探討 在在css文件中，如果有多個類文件中，如果有多個類/id選擇器它們都有相同的部分，我選擇器它們都有相同的部分，我們們可以把相同的可以把相同的css樣式放在一起樣式放在一起,見案例。見案例。案例: my.css/*招

12、生廣告*/.ad_stu width: 136px;height: 196px;background-color: #FC7E8C;margin: 5px 0 0 5px;float: left;/*廣告2*/.ad_2 background: #7CF574;height: 196px;width: 457px;float: left;margin: 5px 0 0 6px;/*房地產(chǎn)廣告*/.ad_house background: #7CF574;height: 196px;width: 152px;float: left;margin: 5px 0 0 6px;案例: my.css/*

13、招生廣告*/.ad_stu width: 136px;background-color: #FC7E8C;margin: 5px 0 0 5px;/*廣告2*/.ad_2 background: #7CF574;width: 457px;margin: 5px 0 0 6px;/*房地產(chǎn)廣告*/.ad_house background: #7CF574;width: 152px;margin: 5px 0 0 6px;.ad_stu , .ad_2, .ad_househeight: 196px;float:left;夢工場Java私塾 選擇器-課堂小練習(xí)選擇器練習(xí)選擇器練習(xí),請使用適當?shù)恼埵?/p>

14、用適當?shù)腸ss選擇器，完成下面的頁面選擇器，完成下面的頁面.練習(xí)練習(xí)2.網(wǎng)頁所有的超鏈接網(wǎng)頁所有的超鏈接,要求這樣的格式要求這樣的格式:(1)默認樣式是默認樣式是 紅色，紅色，24px, 華文新魏字體沒有華文新魏字體沒有下劃線下劃線(2)當鼠標移動到超鏈接時，當鼠標移動到超鏈接時，自動出現(xiàn)下劃線自動出現(xiàn)下劃線,字體大小變成字體大小變成40px,字體變成字體變成宋體宋體.green色色.(3)點擊后點擊后,超鏈接變成超鏈接變成 灰色?；疑?夢工場Java私塾 css-塊元素和行內(nèi)元素概念 行內(nèi)元素行內(nèi)元素(inline element),又叫內(nèi)聯(lián)元素又叫內(nèi)聯(lián)元素: 內(nèi)聯(lián)元素只能容納文本或者其他

15、內(nèi)聯(lián)元素內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素,常見內(nèi)聯(lián)元素常見內(nèi)聯(lián)元素 塊元素塊元素(block element): 塊元素一般都從新行開塊元素一般都從新行開,可以容納文本可以容納文本,其它內(nèi)聯(lián)元素和其它塊元素，其它內(nèi)聯(lián)元素和其它塊元素，即使內(nèi)容不能占滿一行，塊元素也要把整行占滿。常見塊元素即使內(nèi)容不能占滿一行，塊元素也要把整行占滿。常見塊元素 舉例說明舉例說明:HTMLPage3.htm夢工場Java私塾 css-塊元素和行內(nèi)元素區(qū)別 行內(nèi)元素只占內(nèi)容的寬度行內(nèi)元素只占內(nèi)容的寬度,塊元素內(nèi)容不管內(nèi)容多少要占全行。塊元素內(nèi)容不管內(nèi)容多少要占全行。 行內(nèi)元素只能容納文本和其它行內(nèi)元素，塊元素可以

16、容納文本，行內(nèi)元素只能容納文本和其它行內(nèi)元素，塊元素可以容納文本，行內(nèi)元素和塊元素行內(nèi)元素和塊元素.(與瀏覽器類版本和類型有關(guān)與瀏覽器類版本和類型有關(guān)) 一些一些css屬性對行內(nèi)元素不生效，比如屬性對行內(nèi)元素不生效，比如margin,left,right,width,height.建議建議盡可能使用塊元素定位定位。(與瀏覽器類版本和類型有關(guān)與瀏覽器類版本和類型有關(guān))夢工場Java私塾 css-塊元素和行內(nèi)元素相互轉(zhuǎn)換 請注意請注意:行內(nèi)元素和塊元素可以相互轉(zhuǎn)換行內(nèi)元素和塊元素可以相互轉(zhuǎn)換 display:inline - 轉(zhuǎn)為行內(nèi)元素轉(zhuǎn)為行內(nèi)元素 (比如比如div) display:block

17、 - 轉(zhuǎn)為塊元素轉(zhuǎn)為塊元素 (比如比如a) 案例案例HTMLPage3.htm夢工場Java私塾 css核心-流 標準流標準流/非標準流非標準流 流流: 在現(xiàn)實生活中就是流水在現(xiàn)實生活中就是流水,在網(wǎng)頁設(shè)計中就是指元素在網(wǎng)頁設(shè)計中就是指元素(標簽標簽)的排列的排列方式。方式。 標準流標準流: 元素在網(wǎng)頁中就象流水，排在前面的元素元素在網(wǎng)頁中就象流水，排在前面的元素(標簽標簽)內(nèi)容前面內(nèi)容前面出現(xiàn)，排后面的元素出現(xiàn)，排后面的元素(標簽標簽)內(nèi)容后面出現(xiàn)。內(nèi)容后面出現(xiàn)。 案例案例Sfloat.htm 非標準流非標準流: 當某個元素當某個元素(標簽標簽)脫離了標準流脫離了標準流比如因為相對定位比如因

18、為相對定位排列排列，我們統(tǒng)稱為非標準流排列。關(guān)于非標準流，我們在定位小節(jié)，我們統(tǒng)稱為非標準流排列。關(guān)于非標準流，我們在定位小節(jié) 講解。講解。夢工場Java私塾 css核心-盒子模型概念 盒子模型盒子模型-概念概念 要搞清盒子模型，就必須先明白下面幾個概念要搞清盒子模型，就必須先明白下面幾個概念: 在網(wǎng)頁設(shè)計中常聽的屬性名：內(nèi)容在網(wǎng)頁設(shè)計中常聽的屬性名：內(nèi)容(content)、填充、填充(padding)、邊框、邊框(border)、邊界、邊界(margin)， CSS盒子模式都具備這些屬性。盒子模式都具備這些屬性。夢工場Java私塾 css核心-盒子模型原理 盒子模型盒子模型-原理圖原理圖 夢

19、工場Java私塾 css核心-盒子模型案例 我們看一個案例，幫助大家理解盒子模我們看一個案例，幫助大家理解盒子模型型:box1.htm考慮如何實現(xiàn)網(wǎng)頁布局考慮如何實現(xiàn)網(wǎng)頁布局夢工場Java私塾 css核心-盒子模型理解 盒子模型盒子模型- -理解理解 我們可以把盒子模型轉(zhuǎn)移到我們?nèi)粘Ｉ钪械暮凶游覀兛梢园押凶幽Ｐ娃D(zhuǎn)移到我們?nèi)粘Ｉ钪械暮凶?箱子箱子)上來理解，日常生活中所見的盒子也具有這些屬性，所以叫上來理解，日常生活中所見的盒子也具有這些屬性，所以叫它盒子模式。那么內(nèi)容就是盒子里裝的東西；而填充就是怕它盒子模式。那么內(nèi)容就是盒子里裝的東西；而填充就是怕盒子里裝的東西（貴重的）損壞而添加的泡沫

20、或者其它抗震盒子里裝的東西（貴重的）損壞而添加的泡沫或者其它抗震的輔料；邊框就是盒子本身了；至于邊界則說明盒子擺放的的輔料；邊框就是盒子本身了；至于邊界則說明盒子擺放的時候的不能全部堆在一起，要留一定空隙保持通風(fēng)，同時也時候的不能全部堆在一起，要留一定空隙保持通風(fēng)，同時也為了方便取出嘛。為了方便取出嘛。 與現(xiàn)實生活中盒子不同的是，現(xiàn)實生活中的東西一般不能大于盒子與現(xiàn)實生活中盒子不同的是，現(xiàn)實生活中的東西一般不能大于盒子,否否則盒子會被撐壞的，而則盒子會被撐壞的，而CSS盒子具有彈性，里面的東西大過盒子本身最多盒子具有彈性，里面的東西大過盒子本身最多把它撐大把它撐大,但它不會損壞的。但它不會損壞

21、的。夢工場Java私塾 css核心-盒子模型練習(xí) 請用請用css 的盒子模型，完成上面的網(wǎng)頁的盒子模型，完成上面的網(wǎng)頁.夢工場Java私塾 css核心-盒子模型進一步理解 盒子模型遠沒有我講的這么簡單，比如大家再看一個案例盒子模型遠沒有我講的這么簡單，比如大家再看一個案例: 這種布局在很多大型網(wǎng)站上都有使用，我們可以把它看做是一個模這種布局在很多大型網(wǎng)站上都有使用，我們可以把它看做是一個模式來套用式來套用,它的各個邊距都可調(diào)節(jié)它的各個邊距都可調(diào)節(jié),從而達到你想要的布局從而達到你想要的布局,非常實用。非常實用。但是要做成這種效果，需要用到但是要做成這種效果，需要用到css另外一個核心知識另外一個

22、核心知識-浮動，所以我浮動，所以我們回頭再做這個案例。們回頭再做這個案例。夢工場Java私塾 css核心-浮動 浮動浮動 浮動是浮動是css中很重要的概念，必須掌握。浮動涉及到左浮動、中很重要的概念，必須掌握。浮動涉及到左浮動、右浮動、右浮動、清除浮動清除浮動 例子例子:請在頁面中放置三個請在頁面中放置三個div ,背景是粉紅，背景是粉紅，寬度寬度150px,高高100px，邊框，邊框1px,藍色藍色,實線。實線。myFloat.htm夢工場Java私塾 css核心-浮動 如果我們要實現(xiàn)如下圖形，就可以如果我們要實現(xiàn)如下圖形，就可以使用右浮動使用右浮動,當把當把div1向右浮動向右浮動時時,它

23、脫離它脫離標準流并且向右移動，直到它的右邊緣碰到包含框的右邊緣并且向右移動，直到它的右邊緣碰到包含框的右邊緣.夢工場Java私塾 css核心-浮動 如果我們要實現(xiàn)如下圖形，就可以如果我們要實現(xiàn)如下圖形，就可以使用左浮動使用左浮動,如果把所有三個框如果把所有三個框都向左移動，那么框都向左移動，那么框 1 向左浮動直到碰到包含框，另外兩個框向左向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。浮動直到碰到前一個浮動框。夢工場Java私塾 css核心-浮動 如果我們的如果我們的div框很多框很多,外面的框無法容納水平排列的浮動外面的框無法容納水平排列的浮動div元素元素，那么其它浮動塊

24、向下移動，那么其它浮動塊向下移動，直到有直到有足夠的空間足夠的空間。夢工場Java私塾 css核心-浮動 如果浮動元素的高度不同，那么當它們向下移動時可能被其它浮如果浮動元素的高度不同，那么當它們向下移動時可能被其它浮動元素動元素“卡住卡住”：夢工場Java私塾 css核心-浮動你可以這么理解浮動你可以這么理解浮動:如果一個元素右如果一個元素右/左浮動則左浮動則:它本身會盡可能向右它本身會盡可能向右/左移動，直到碰到邊框或者左移動，直到碰到邊框或者別的浮動元素別的浮動元素,特別強調(diào)浮動對塊元素和行內(nèi)元素都特別強調(diào)浮動對塊元素和行內(nèi)元素都生效生效!元素向右元素向右/左浮動，就相當于讓出自己的左左

25、浮動，就相當于讓出自己的左/右邊右邊,別別的元素就會在它的左的元素就會在它的左/右邊排列右邊排列。 這里這里我們再看一個案例我們再看一個案例【myFloat2.htm】，來幫助大家理解上面，來幫助大家理解上面的兩句話。的兩句話。夢工場Java私塾 css核心-清除浮動 如果不希望別的元素在某個元素的左邊或者右邊，可以使用清除浮動的如果不希望別的元素在某個元素的左邊或者右邊，可以使用清除浮動的方法方法 clear:right ; clear: left; clear:both 這里我們在看一個案例這里我們在看一個案例 myFloat3.htm,來幫助大家理解上面的兩句話。來幫助大家理解上面的兩句

26、話。夢工場Java私塾 css核心-清除浮動 清除浮動是一個不太好理解的知識點，這個在后面的項目中我們再進一清除浮動是一個不太好理解的知識點，這個在后面的項目中我們再進一步討論。步討論。夢工場Java私塾 css核心-定位 CSS定位定位(Positioning)屬性允許你對元素進行定位屬性允許你對元素進行定位.position 屬性值：屬性值： static (默認值默認值)：元素框正常生成。塊級元素生成一個矩形框，作為：元素框正常生成。塊級元素生成一個矩形框，作為文檔流文檔流/標準流的一部分，行內(nèi)元素則會創(chuàng)建一個或多個行框，置于其父標準流的一部分，行內(nèi)元素則會創(chuàng)建一個或多個行框，置于其父元素中。元素中。 relative：元素框偏移某個距離。元素仍保持其未定位前的形狀，它元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留原本所占的空間仍保留,從這一角度看，好像該元素仍然在文檔流從這一角度看，好像該元素仍然在文檔流/標準流標準流中一樣。中一樣。 absolute：元素框從文檔流完全刪除，并相對于其包含塊定位。包含元素框從文檔流完全刪除，并相對于其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關(guān)閉，就好像元素原來不存在一樣。元素定位后生成一個中所占