HTML開(kāi)發(fā)網(wǎng)頁(yè)樣式

1、網(wǎng)頁(yè)樣式 第二單元 靜態(tài)網(wǎng)頁(yè)制作2 2 / 61/ 61u掌握網(wǎng)頁(yè)的基本結(jié)構(gòu)掌握網(wǎng)頁(yè)的基本結(jié)構(gòu)uHTMLHTML網(wǎng)頁(yè)基本結(jié)構(gòu)網(wǎng)頁(yè)基本結(jié)構(gòu)uHTMLHTML的常用標(biāo)簽的常用標(biāo)簽u表單、表格標(biāo)簽的應(yīng)用表單、表格標(biāo)簽的應(yīng)用回顧和作業(yè)點(diǎn)評(píng)回顧和作業(yè)點(diǎn)評(píng)3 3 / 61/ 61本課任務(wù)本課任務(wù)u制作制作望廬山瀑布望廬山瀑布u制作制作如夢(mèng)令如夢(mèng)令u制作開(kāi)心餐廳介紹頁(yè)面制作開(kāi)心餐廳介紹頁(yè)面u商品列表商品列表4 4 / 61/ 61本課目標(biāo)本課目標(biāo)u學(xué)完本門課程后，你能夠：學(xué)完本門課程后，你能夠：n了解什么是網(wǎng)頁(yè)樣式n掌握CSS的基本語(yǔ)法n熟練掌握CSS的基本屬性n會(huì)使用DIV+CSS進(jìn)行網(wǎng)頁(yè)布局n熟練使用C

2、SS來(lái)裝飾頁(yè)面5 5 / 61/ 61塊元素和內(nèi)聯(lián)元素塊元素和內(nèi)聯(lián)元素u塊元素塊元素n獨(dú)占一行n可以定義寬度和高度n常用塊元素ldiv，p，ul，liu內(nèi)聯(lián)元素內(nèi)聯(lián)元素n一行排列顯示n不能定義寬度和高度n常用內(nèi)聯(lián)元素lspan，a ，label 演示示例：演示示例：塊元素和內(nèi)聯(lián)元素塊元素和內(nèi)聯(lián)元素6 6 / 61/ 61和和標(biāo)簽標(biāo)簽u和和標(biāo)簽標(biāo)簽n最大優(yōu)點(diǎn)l沒(méi)有任何的默認(rèn)樣式渲染n最大區(qū)別l標(biāo)簽是塊元素l標(biāo)簽是內(nèi)聯(lián)元素n作用l結(jié)構(gòu)化HTML元素lDIV+CSS網(wǎng)頁(yè)布局l提高網(wǎng)頁(yè)加載速度 和和標(biāo)簽可以相互轉(zhuǎn)換（標(biāo)簽可以相互轉(zhuǎn)換（display屬性）屬性） 規(guī)范角度而言，規(guī)范角度而言，標(biāo)簽中不內(nèi)嵌

3、標(biāo)簽中不內(nèi)嵌標(biāo)簽標(biāo)簽經(jīng)驗(yàn)經(jīng)驗(yàn)7 7 / 61/ 61什么是什么是CSSCSSuCSSCSS的概念的概念nCascading Style Sheet 級(jí)聯(lián)樣式表n表現(xiàn)HTML或XHTML文件樣式的計(jì)算機(jī)語(yǔ)言l包括對(duì)字體、顏色、邊距、高度、寬度、背景圖片、網(wǎng)頁(yè)定位等設(shè)定8 8 / 61/ 61第一個(gè)第一個(gè)CSSCSSu使用使用CSSCSS美化李清照的詩(shī)詞網(wǎng)頁(yè)美化李清照的詩(shī)詞網(wǎng)頁(yè)css 演示示例：清平樂(lè)詩(shī)詞演示示例：清平樂(lè)詩(shī)詞9 9 / 61/ 61CSSCSS的作用的作用uCSSCSS的作用的作用 n能控制頁(yè)面的樣式和布局n網(wǎng)頁(yè)文件與樣式文件相分離，提高開(kāi)發(fā)效率vs1010 / / 6161CSS

4、CSS的發(fā)展史的發(fā)展史1111 / / 6161CSSCSS語(yǔ)法語(yǔ)法2-2-1 1h1 font-size:12px;color:#F00;.1、應(yīng)寫在、應(yīng)寫在標(biāo)簽之間；標(biāo)簽之間；2、加上、加上 type=text/css 屬性屬性注意注意u標(biāo)簽標(biāo)簽1212 / / 6161CSSCSS語(yǔ)法語(yǔ)法2-2-2 2uCSSCSS語(yǔ)法語(yǔ)法選擇器選擇器 聲明聲明1; 聲明聲明2; 語(yǔ)法語(yǔ)法例：例：h1 font-size : 12px;color : red;CSS的最后一條聲明后的的最后一條聲明后的“;”可寫可不寫，可寫可不寫， 建議都要寫上；建議都要寫上；CSS的多條聲明可寫在同一行，但開(kāi)發(fā)時(shí)便于閱

5、讀建議分行寫并縮進(jìn)；的多條聲明可寫在同一行，但開(kāi)發(fā)時(shí)便于閱讀建議分行寫并縮進(jìn)；經(jīng)驗(yàn)經(jīng)驗(yàn)1313 / / 6161 課堂練習(xí)課堂練習(xí)u需求說(shuō)明需求說(shuō)明n詩(shī)標(biāo)題使用標(biāo)題標(biāo)簽實(shí)現(xiàn)n詩(shī)正文使用段落標(biāo)簽實(shí)現(xiàn)n詩(shī)正文字體顏色為綠色(green)，字體大小為14px完成時(shí)間：完成時(shí)間：7分鐘分鐘共性問(wèn)題集中講解共性問(wèn)題集中講解1414 / / 6161CSSCSS選擇器選擇器3-13-1u標(biāo)簽選擇器標(biāo)簽選擇器u類選擇器類選擇器uIDID選擇器選擇器 HTML標(biāo)簽作為標(biāo)簽選擇器的名稱標(biāo)簽作為標(biāo)簽選擇器的名稱、p font-size:16px; 標(biāo)簽選擇器標(biāo)簽選擇器聲明聲明屬性屬性值值語(yǔ)法語(yǔ)法1515 / /

6、6161CSSCSS選擇器選擇器3-23-2u標(biāo)簽選擇器標(biāo)簽選擇器u類選擇器類選擇器uIDID選擇器選擇器.class font-size : 16px; 類選擇器類選擇器聲明聲明屬性屬性值值語(yǔ)法語(yǔ)法類名稱類名稱標(biāo)簽內(nèi)容標(biāo)簽內(nèi)容注意：網(wǎng)頁(yè)中可給不同標(biāo)簽相同的注意：網(wǎng)頁(yè)中可給不同標(biāo)簽相同的class1616 / / 6161CSSCSS選擇器選擇器3-33-3u標(biāo)簽選擇器標(biāo)簽選擇器u類選擇器類選擇器uIDID選擇器選擇器#id font-size:16px;id選擇器選擇器聲明聲明屬性屬性值值語(yǔ)法語(yǔ)法id名稱名稱標(biāo)簽內(nèi)容標(biāo)簽內(nèi)容注意：網(wǎng)頁(yè)中標(biāo)簽的注意：網(wǎng)頁(yè)中標(biāo)簽的 ID 不能重復(fù)不能重復(fù),唯一存

7、在唯一存在1717 / / 6161CSSCSS復(fù)合選擇器復(fù)合選擇器3-13-1u 并集選擇器并集選擇器u 交集選擇器交集選擇器u 后代選擇器后代選擇器p , #id , .class font-size : 14px; color : green;示例示例多個(gè)選擇器之間可以是多個(gè)不同或相同類型；多個(gè)選擇器之間可以是多個(gè)不同或相同類型；多個(gè)選擇器之間必須用英文半角輸入法逗號(hào)多個(gè)選擇器之間必須用英文半角輸入法逗號(hào)“,”隔開(kāi)；隔開(kāi)；經(jīng)驗(yàn)經(jīng)驗(yàn) 演示示例：并集選擇器演示示例：并集選擇器1818 / / 6161CSSCSS復(fù)合選擇器復(fù)合選擇器3-23-2u 并集選擇器并集選擇器u 交集選擇器交集選擇器

8、u 后代選擇器后代選擇器 h3.second font-size : 14px; color : green;示例示例 格式為：標(biāo)簽格式為：標(biāo)簽 + 類選擇器類選擇器 或或 標(biāo)簽標(biāo)簽 + ID選擇器選擇器 選擇器之間不能有空格；選擇器之間不能有空格；經(jīng)驗(yàn)經(jīng)驗(yàn) 演示示例：交集選擇器演示示例：交集選擇器1919 / / 6161CSSCSS復(fù)合選擇器復(fù)合選擇器3-33-3 p a font-size : 14px; color : green;示例示例選擇器之間可以是多個(gè)不同或相同類型并有層級(jí)關(guān)系的；選擇器之間可以是多個(gè)不同或相同類型并有層級(jí)關(guān)系的；選擇器之間用空格隔開(kāi)；選擇器之間用空格隔開(kāi)；經(jīng)驗(yàn)

9、經(jīng)驗(yàn) 演示示例：后代選擇器演示示例：后代選擇器u并集選擇器并集選擇器u交集選擇器交集選擇器u后代選擇器后代選擇器2020 / / 6161課堂練習(xí)課堂練習(xí)u需求說(shuō)明需求說(shuō)明n實(shí)現(xiàn)詩(shī)詞如夢(mèng)令的網(wǎng)頁(yè)nHTML代碼結(jié)構(gòu)如下l“如夢(mèng)令”為標(biāo)簽且class為titlel“譯文”為標(biāo)簽且id 為 translationl詩(shī)詞和翻譯段落都是標(biāo)簽，但翻譯段落標(biāo)簽的class為secondn要求l“如夢(mèng)令”和譯文”字體大小為20px； “譯文”字體顏色為藍(lán)色；翻譯段落的字體顏色為綠色完成時(shí)間：完成時(shí)間：7分鐘分鐘共性問(wèn)題集中講解共性問(wèn)題集中講解2121 / / 6161小結(jié)小結(jié)u標(biāo)簽選擇器直接應(yīng)用于標(biāo)簽選擇器直

10、接應(yīng)用于HTMLHTML標(biāo)簽標(biāo)簽u類選擇器可在頁(yè)面中多次使用類選擇器可在頁(yè)面中多次使用uIDID選擇器在同一個(gè)頁(yè)面中只能使用一次選擇器在同一個(gè)頁(yè)面中只能使用一次u靈活運(yùn)用并集、交集、后代選擇器靈活運(yùn)用并集、交集、后代選擇器2222 / / 6161CSSCSS的引入方式的引入方式u行內(nèi)樣式行內(nèi)樣式u內(nèi)部樣式表內(nèi)部樣式表u外部樣式表外部樣式表2323 / / 6161u行內(nèi)樣式行內(nèi)樣式u 使用使用style屬性引入屬性引入CSS樣式樣式CSSCSS的引入方式的引入方式 3-13-1style屬性的應(yīng)用屬性的應(yīng)用直接在直接在HTML標(biāo)簽中設(shè)置的樣式標(biāo)簽中設(shè)置的樣式示例示例 演示示例：行內(nèi)樣式演示示

11、例：行內(nèi)樣式2424 / / 6161u內(nèi)部樣式表內(nèi)部樣式表u style標(biāo)簽中書寫標(biāo)簽中書寫CSS代碼代碼CSSCSS的引入方式的引入方式 3-23-2 h3 color: red; 示例示例2525 / / 6161u外部樣式表外部樣式表nCSS代碼保存在擴(kuò)展名為.css的樣式表中nHTML文件引用擴(kuò)展名為.css的樣式表，有兩種方式l鏈接式 l導(dǎo)入式CSSCSS的引入方式的引入方式 3-33-3語(yǔ)法語(yǔ)法鏈接式鏈接式 導(dǎo)入式導(dǎo)入式 import url(css文件路徑文件路徑 ); 2626 / / 6161鏈接式與導(dǎo)入式的區(qū)別鏈接式與導(dǎo)入式的區(qū)別2727 / / 6161u行內(nèi)樣式行內(nèi)樣

12、式 內(nèi)部樣式表內(nèi)部樣式表 外部樣式表外部樣式表uIDID選擇器選擇器 類選擇器類選擇器 標(biāo)簽選擇器標(biāo)簽選擇器CSSCSS中的優(yōu)先級(jí)中的優(yōu)先級(jí)2828 / / 6161課堂練習(xí)課堂練習(xí)u需求說(shuō)明需求說(shuō)明n制作開(kāi)心餐廳的網(wǎng)頁(yè)n要求：l效果如右圖所示lCSS樣式體現(xiàn)出復(fù)合選擇器的應(yīng)用l引用外部樣式表的形式制作本頁(yè)面n提示：l用、標(biāo)簽布局l給綠色字體、藍(lán)色字體段落分別加上類名l給綠色標(biāo)題單獨(dú)加上類名完成時(shí)間：完成時(shí)間：10分鐘分鐘共性問(wèn)題集中講解共性問(wèn)題集中講解2929 / / 6161小結(jié)小結(jié)uCSSCSS選擇器分標(biāo)簽選擇器、類選擇器和選擇器分標(biāo)簽選擇器、類選擇器和IDID選擇器選擇器uCSSCSS

13、的復(fù)合選擇器：的復(fù)合選擇器：n交集選擇器、并集選擇器和后代選擇器u在在HTMLHTML中引入中引入CSSCSS樣式的三種方式樣式的三種方式n行內(nèi)樣式、內(nèi)部樣式表和外部樣式表u注意注意CSSCSS的優(yōu)先級(jí)的優(yōu)先級(jí)3030 / / 6161CSSCSS的屬性的屬性u(píng)文字、文本屬性文字、文本屬性u(píng)背景屬性背景屬性u(píng)列表屬性列表屬性u(píng)盒子模型盒子模型u浮動(dòng)屬性浮動(dòng)屬性u(píng)定位屬性定位屬性3131 / / 6161u字體屬性字體屬性字體屬性小結(jié)字體屬性小結(jié)屬性屬性描述描述font-style設(shè)置字體風(fēng)格 font-weight 設(shè)置字體粗細(xì) font-size設(shè)置字體的尺寸 font-family 設(shè)置字

14、體系列 font簡(jiǎn)寫屬性，作用是把所有針對(duì)字體的屬性設(shè)置在一個(gè)聲明中(注意順序)例如：font: italic bold 16px 楷體; 3232 / / 6161u文本屬性文本屬性文本屬性小結(jié)文本屬性小結(jié)屬性屬性描述描述color設(shè)置文本的顏色，如 red，#FF0000line-height設(shè)置文本的行高text-align設(shè)置文本的對(duì)齊方式, 如 left 、center、righttext-decoration設(shè)置文本裝修，如underline、none、line-through3333 / / 6161課堂演示課堂演示u需求說(shuō)明需求說(shuō)明n使一級(jí)標(biāo)題居中顯示，二級(jí)分類字體為藍(lán)色，字體

15、為斜體、加粗、16px、楷體，且加上下劃線，并讓分類之間的行高為30px； 演示示例：文本屬性演示示例：文本屬性3434 / / 6161課堂練習(xí)課堂練習(xí)u需求說(shuō)明需求說(shuō)明n制作北大青鳥(niǎo)網(wǎng)站新聞信息展示頁(yè)面n使用外部樣式表創(chuàng)建頁(yè)面樣式完成時(shí)間：完成時(shí)間：10分鐘分鐘共性問(wèn)題集中講解共性問(wèn)題集中講解小標(biāo)題小標(biāo)題行高行高28px，字體大小字體大小12px字體大小字體大小18px，行，行高高40px ，居中，居中顯示顯示居中顯示，文字大小居中顯示，文字大小12px，字體顏色，字體顏色#666666段落字體段落字體12px行高行高20px3535 / / 6161u設(shè)置頁(yè)面元素的背景樣式設(shè)置頁(yè)面元素的

16、背景樣式 背景屬性背景屬性屬性屬性描述描述background-color背景色，取值如，red，#FF0000 background-image背景圖片,如: background-image : url ( “./images/bg.png” );background-position 背景開(kāi)始位置,包括水平方向(X軸)和豎直方向(Y軸)的設(shè)置 X軸取值：left，center，right 或 像素值 或 百分比 Y軸取值：top，center，bottom 或 像素值 或 百分比background-repeat背景填充方式,取值： repeat-x | repeat-y | no-re

17、peatbackground合寫方式，如 background：#fff url(bg.png) left top no-repeat;3636 / / 6161課堂演示課堂演示u需求說(shuō)明需求說(shuō)明n使用外部樣式表創(chuàng)建頁(yè)面樣式n一級(jí)標(biāo)題為紅色背景色且?guī)蛳聢D標(biāo)n主體部分為灰色(#D7D7D7)背景色n二級(jí)分類均有向右箭頭圖標(biāo) 演示示例：商品分類側(cè)邊欄演示示例：商品分類側(cè)邊欄3737 / / 6161u列表屬性列表屬性u(píng)超鏈接偽類超鏈接偽類u鼠標(biāo)形狀控制鼠標(biāo)形狀控制知識(shí)點(diǎn)分類知識(shí)點(diǎn)分類3838 / / 6161u列表屬性列表屬性u(píng)超鏈接偽類超鏈接偽類u鼠標(biāo)形狀控制鼠標(biāo)形狀控制列表屬性列表屬性屬性屬

18、性描述描述舉例舉例list-style-image將列表設(shè)置為列表標(biāo)志list-style-image:url(./arrow.gif); list-style-type設(shè)置列表項(xiàng)標(biāo)志的類型:disc(實(shí)心圓) | circle (空心圓) | square(正方形)list-style-type : circle ;list-style以上屬性的合并簡(jiǎn)寫,或 none 去掉默認(rèn)屬性設(shè)置list-style:square url(/i/arrow.gif); 3939 / / 6161u列表屬性列表屬性u(píng)超鏈接偽類超鏈接偽類u鼠標(biāo)形狀控制鼠標(biāo)形狀控制超鏈接偽類超鏈接偽類a:link color

19、: red /* 未訪問(wèn)的鏈接 */a:visited color: blue /* 已訪問(wèn)的鏈接 */a:hover color: green /* 當(dāng)有鼠標(biāo)懸停在鏈接上 */a:active color: yellow /* 被選擇的鏈接 */示例示例1、在、在 CSS 定義中，定義中，a:hover 必須被置于必須被置于 a:link 和和 a:visited 之后，才是有效的之后，才是有效的2、在、在 CSS 定義中，定義中，a:active 必須被置于必須被置于 a:hover 之后，才是有效的之后，才是有效的3、記憶方法：、記憶方法： love hate !經(jīng)驗(yàn)經(jīng)驗(yàn)4040 / /

20、 6161u鼠標(biāo)形狀控制鼠標(biāo)形狀控制ncursor屬性，其值：鼠標(biāo)形狀控制鼠標(biāo)形狀控制4141 / / 6161課堂演示課堂演示u需求說(shuō)明需求說(shuō)明n完善商品分類側(cè)邊欄n去掉默認(rèn)小黑點(diǎn)n鼠標(biāo)移至分類文字超鏈接時(shí)l 字體為紅色l文字有下劃線n鼠標(biāo)移至紅色標(biāo)題上時(shí)，鼠標(biāo)形狀為可移動(dòng)形狀 演示示例：完善商品分類側(cè)邊欄演示示例：完善商品分類側(cè)邊欄4242 / / 6161課堂練習(xí)課堂練習(xí)u需求說(shuō)明需求說(shuō)明n電器分類鏈接無(wú)下劃線，鼠標(biāo)懸浮超鏈接時(shí)顯示下劃線n分類內(nèi)容超鏈無(wú)下劃線，鼠標(biāo)懸浮至超鏈接時(shí)字體顏色為棕紅色（#F60），顯示下劃線18px、加粗、行距、加粗、行距35px、背景色背景色#0f7cbf

21、字體大小字體大小12px、行距行距20px，字體，字體顏色顏色#666666，鼠標(biāo)移至顏色為鼠標(biāo)移至顏色為#F6014px、加粗、行距、加粗、行距30px、背景色、背景色#e4f1fa、字體顏色、字體顏色#0f7cbf完成時(shí)間：完成時(shí)間：15分鐘分鐘共性問(wèn)題集中講解共性問(wèn)題集中講解4343 / / 6161u兩個(gè)兩個(gè)標(biāo)簽中的圖片如何排成右邊的形式呢？標(biāo)簽中的圖片如何排成右邊的形式呢？問(wèn)題問(wèn)題4444 / / 6161什么是盒子模型什么是盒子模型 邊框邊框（border）高高（height）寬寬（width）外邊距外邊距（margin）內(nèi)邊距內(nèi)邊距（padding）網(wǎng)頁(yè)元素網(wǎng)頁(yè)元素4545 /

22、/ 6161u兩個(gè)兩個(gè)標(biāo)簽中的圖片如何排成右邊的形式呢？標(biāo)簽中的圖片如何排成右邊的形式呢？解答解答外邊距外邊距邊框邊框內(nèi)邊距內(nèi)邊距4646 / / 6161外邊距外邊距umarginmarginnmargin-topnmargin-rightnmargin-bottomnmargin-leftnmarginmargin-top: 3 pxmargin-right : 5 pxmargin-bottom : 7 pxmargin-left : 4 pxmargin :3px 5px 7px 4px;margin :3px 5px 7px (5px);margin :3px 5px (3px 5p

23、x);margin :8px (8px 8px 8px);示例示例 注意：注意： margin: 上上 右右 下下 左左; （順時(shí)針?lè)较颍槙r(shí)針?lè)较颍?747 / / 6161邊框邊框uborderborder類別類別屬性屬性含義含義 修飾屬性修飾屬性border-color設(shè)置邊框的顏色，如設(shè)置邊框的顏色，如 border-color: #FF0;border-width設(shè)置邊框的寬度，如設(shè)置邊框的寬度，如 border-width：2pxborder-style設(shè)置邊框的類型，如設(shè)置邊框的類型，如 solid（實(shí)線）、（實(shí)線）、dashed（虛（虛線）、線）、none（無(wú)邊框）等（無(wú)邊框

24、）等四個(gè)方向四個(gè)方向border-top上邊框上邊框border-right右邊框右邊框border-bottom下邊框下邊框border-left左邊框左邊框簡(jiǎn)寫方式簡(jiǎn)寫方式border統(tǒng)一設(shè)置統(tǒng)一設(shè)置4個(gè)方向邊框的屬性，如個(gè)方向邊框的屬性，如border：1px solid red;4848 / / 6161內(nèi)邊距內(nèi)邊距 upaddingpaddingnpadding-left npadding-rightnpadding-topnpadding-bottomnpaddingpadding-left:10px; padding-right: 5px; padding-top: 20px;

25、padding-bottom:8px; padding:20px 5px 8px 10px ; padding:30px 8px 10px (8px) ;padding:10px 5px; padding:10px;示例示例 注意：注意： padding: 上上 右右 下下 左左; （順時(shí)針?lè)较颍槙r(shí)針?lè)较颍?949 / / 6161課堂演示課堂演示u需求說(shuō)明需求說(shuō)明n利用盒子模型制作登錄頁(yè)面n要求：l盒子寬度width為300pxl設(shè)置盒子邊框（顏色值#3a6587）l設(shè)置標(biāo)題文字左邊距20pxl設(shè)置標(biāo)題文字豎直居中顯示l設(shè)置表單上下距離30像素，左右距離20像素l登錄框頁(yè)面居中顯示 演示

26、示例：盒子模型演示示例：盒子模型5050 / / 6161u盒子模型總尺度盒子模型總尺度u外邊距可用于網(wǎng)頁(yè)居中顯示外邊距可用于網(wǎng)頁(yè)居中顯示nmargin-left: auto;nmargin-right:auto;u塊元素才能完全適用于盒子模型塊元素才能完全適用于盒子模型n使用display屬性來(lái)相互轉(zhuǎn)化lnone（元素隱藏，不可見(jiàn)）lblock（轉(zhuǎn)為塊元素，獨(dú)占一行） l inline（轉(zhuǎn)為內(nèi)聯(lián)元素，不換行） 案例分析小結(jié)案例分析小結(jié)盒子模型總尺度盒子模型總尺度 = border + padding +margin + 內(nèi)容尺寸內(nèi)容尺寸（寬（寬/高）高）5151 / / 6161課堂練習(xí)課堂

27、練習(xí)u需求說(shuō)明需求說(shuō)明n導(dǎo)航整體居中顯示，寬200px邊框色#aacbee，背景色#f5f9fcn使用標(biāo)題標(biāo)簽實(shí)現(xiàn)課程導(dǎo)航標(biāo)題，使用無(wú)序列表實(shí)現(xiàn)課程導(dǎo)航列表，行高為28px,內(nèi)邊距為5pxn“課程導(dǎo)航”(#1f376d)前的圖標(biāo)和每個(gè)課程導(dǎo)航右側(cè)的三角圖標(biāo)使用背景圖像的方式實(shí)現(xiàn)n課程鏈接為黑色字體且無(wú)下劃線，鼠標(biāo)移至上面時(shí)字體為橙色(#FF6215)完成時(shí)間：完成時(shí)間：15分鐘分鐘共性問(wèn)題集中講解共性問(wèn)題集中講解5252 / / 6161ufloat float 屬性屬性n取值：lleft 左浮動(dòng)lright 右浮動(dòng)lnone 不浮動(dòng)u作用作用n塊元素同行排列顯示，一般用于排版、分欄顯示 n設(shè)

28、置浮動(dòng)屬性后，脫離文檔流向指定的左或右邊對(duì)齊直到父元素的邊界或浮動(dòng)的元素u注意注意n使用浮動(dòng)后要及時(shí)清除，以免影響其后的網(wǎng)頁(yè)元素浮動(dòng)屬性浮動(dòng)屬性 演示示例：浮動(dòng)演示示例：浮動(dòng)5353 / / 6161u清除浮動(dòng)必要性清除浮動(dòng)必要性n浮動(dòng)后，脫離了文檔流不占網(wǎng)頁(yè)空間n浮動(dòng)后的網(wǎng)頁(yè)元素會(huì)影響同級(jí)元素uclearclear屬性清除浮動(dòng)屬性清除浮動(dòng)n取值lleft lrightlbothlnonen表明容器框的哪邊不挨著浮動(dòng)框清除浮動(dòng)清除浮動(dòng) 演示示例：清除浮動(dòng)演示示例：清除浮動(dòng)5454 / / 6161uoverflowoverflow屬性屬性n作用l定義溢出元素內(nèi)容區(qū)的內(nèi)容會(huì)如何處理n取值l visible （默認(rèn)）l auto l hiddenl scrollov