-

2） 行內(nèi)元素：不會(huì)換行，和其他行內(nèi)元素位于同一行 例如：,,, 15. 了解web頁(yè)面主要二種路徑形式 1） 絕對(duì)路徑 如： 2） 相對(duì)路徑 如：src=”images/logo.png” 16. 掌握?qǐng)D像元素 1) 作用：將圖

18、像添加到頁(yè)面 2) 單標(biāo)記 3) 必須屬性：src 4) 行內(nèi)元素 5) 常用屬性：width,height 例如： 17. 掌握鏈接元素 1） 作用：創(chuàng)建一個(gè)超鏈接 2） 文本 3） href屬性：鏈接的地址 空鏈接設(shè)為# 4） target屬性：目標(biāo)，可取值為 _blank、_self等 18. 掌握表格的創(chuàng)建方法 1） 定義表格：

2） 創(chuàng)建表行： 3） 創(chuàng)建表列：

19、td> 例如：創(chuàng)建一個(gè)兩行三列的表格

第一行，第一列	第一行，第二列	第一行，第三列
第二行，第一列	第二行，第二列	第二行，第三列

19. 掌握列表的創(chuàng)建方法（有序列表和無(wú)序列表） 1） 有序列表

1. 科比
2. 詹姆斯
3. 庫(kù)里

2） 無(wú)序列表

20、

• 科比
• 詹姆斯
• 庫(kù)里

3） 列表嵌套

• 勇士
  • 庫(kù)里
• 湖人
  • 科比
1. 項(xiàng)目1及步驟 項(xiàng)目1執(zhí)行步驟: 1) 在中輸入一對(duì)無(wú)序列表標(biāo)簽
2) 在
中插入9對(duì)列表項(xiàng)標(biāo)簽
3) 在每對(duì)
中輸入對(duì)應(yīng)的學(xué)院名稱 Html代碼如下：

21、DOCTYPE html>

• 軟工學(xué)院
• 建筑學(xué)院
• 傳媒學(xué)院
• 移動(dòng)通信學(xué)院
• 動(dòng)畫(huà)學(xué)院
• 網(wǎng)工學(xué)院
• 高翻學(xué)院
• 俄語(yǔ)學(xué)院
• 基礎(chǔ)學(xué)院

22、 2. 項(xiàng)目2執(zhí)行步驟:： 1) 在中輸入一對(duì)無(wú)序列表標(biāo)簽

2) 在
中插入5對(duì)列表項(xiàng)標(biāo)簽
3) 在每對(duì)
中輸入對(duì)應(yīng)的歌曲及歌手的名字 Html代碼如下：
1. bad girl--吳亦凡

23、

2. 逆戰(zhàn)--張杰
3. 李白--李榮浩
4. sugar--Maroon 5
5. 放縱--權(quán)志龍
3. 項(xiàng)目3執(zhí)行步驟: 1) 在中輸入兩對(duì)有序列表
2) 在每對(duì)
中輸入對(duì)應(yīng)的國(guó)家名稱 3) 在每對(duì)的下面各添加3對(duì)
4) 在每對(duì)
中輸入對(duì)應(yīng)的城市名稱 Html代碼如下：

24、 html>

1. 中國(guó)城市
   1. 北京
   2. 上海
   3. 廣州
2. 美國(guó)城市
   1. 華盛頓
   2. 芝加哥
   3. 紐約<

      25、/li>

4. 項(xiàng)目4執(zhí)行步驟: 1) 在中輸入無(wú)序列表標(biāo)簽
2) 在
中輸入7對(duì)
標(biāo)簽 3) 在
寫(xiě)入對(duì)應(yīng)的新聞信息 4) 為每一條新聞加上超鏈接，注意：超鏈接標(biāo)簽必須嵌套到li標(biāo)簽里，直接包含文字。 5) 設(shè)置超鏈接的href的屬性值為“#”實(shí)現(xiàn)空鏈接。 Html代碼如下：

26、itle>demo

• 呱呱首屆網(wǎng)絡(luò)詩(shī)歌朗誦
• 首屆網(wǎng)絡(luò)朗誦大賽再添輝煌
• 年輕選手《我的心》聲勢(shì)宏大
• 再起風(fēng)云10進(jìn)5誰(shuí)與爭(zhēng)鋒
• 新人誕生的搖籃
• 耿耿老師妙語(yǔ)連珠
• 殷瑜老師第四日點(diǎn)評(píng)
5. 項(xiàng)目5執(zhí)行步驟:創(chuàng)建一個(gè)寬200，高80的三行三列的表格 1) 查看該表格的結(jié)構(gòu)為三行三列的表格; 2) 向網(wǎng)頁(yè)中插入表格的標(biāo)簽 3) 在table中插入3對(duì)行標(biāo)記 4) 在每個(gè)tr中插入3對(duì)單元個(gè)格標(biāo)記 5) 在每個(gè)td中插入相應(yīng)的文字 6) 設(shè)置表格屬性：寬(width)、高(height)、邊框(border) 7)

28、設(shè)置每個(gè)tr屬性：水平居中（align） Html代碼如下：

29、>

文字	文字	單元格
文字	文字	單元格
文字	文字	單元格

第二單元：css基礎(chǔ) 2.1 CSS語(yǔ)法 2.1.1 css概述 2.1.1.1 css的作用 2.1.1.2 什么是css 2.1.1.3 css與html之間的關(guān)系 2.

30、1.2 使用css樣式表 2.1.2.1 使用css樣式表的方式 2.1.2.2 內(nèi)聯(lián)方式使用css 2.1.2.3 內(nèi)部樣式表 2.1.2.4 外部樣式表 2.1.3 css語(yǔ)法規(guī)范 2.1.3.1 css語(yǔ)法規(guī)范總結(jié) 2.1.3.2 css樣式表特征 2.1.3.3 樣式優(yōu)先級(jí) 2.1.3.4 ！Important規(guī)則 2.2 CSS基礎(chǔ)選擇器 2.2.1 通用選擇器 2.2.2 元素選擇器 2.2.3 類選擇器 2.2.4 id選擇器 2.2.5 群組選擇器 2.2.6 后代選擇器 2.2.7 子代選擇器

31、 2.2.8 偽類選擇器 2.2.9 選擇器優(yōu)先級(jí) 2.3 框模型和背景 2.3.1 框模型 2.3.2 外邊距 2.3.2.1 什么是外邊距 2.3.2.2 外邊距margin 2.3.2.3 外邊距的簡(jiǎn)潔寫(xiě)法 2.3.2.4 外邊距合并 2.3.3 內(nèi)邊距 2.3.3.1 什么是內(nèi)邊距 2.3.3.2 內(nèi)邊距padding 2.3.3.3 內(nèi)邊距的簡(jiǎn)潔寫(xiě)法 2.3.4 背景屬性 2.3.4.1 背景色background-color 2.3.4.2 背景圖片background-image 2.3.4.3 背景重

32、復(fù)background-repeat 2.3.4.4 背景圖片尺寸background-size 2.3.4.5 背景圖片的固定background-attachment 2.3.4.6 背景定位background-position 2.4 浮動(dòng)和定位 2.4.1 定位概述 2.4.1.1 什么是定位 2.3.1.2 定位屬性 2.4.2 浮動(dòng)定位 2.4.2.1 浮動(dòng)概述 2.4.2.2 浮動(dòng)定位 2.4.2.3 float屬性 2.4.2.4 clear屬性 2.4.3 定位方式 2.4.3.1 相對(duì)定位 2.4.3.2 絕對(duì)定位 2.4.3.3 堆疊順

33、序 2.4.3.4 固定定位 【考核要求】 1. 掌握什么是css 1） 層疊樣式表，又叫級(jí)聯(lián)樣式表，簡(jiǎn)稱樣式表 2） 定義html中的樣式 3） 實(shí)現(xiàn)了內(nèi)容與表現(xiàn)分離 4） 提高了代碼的可重用性和可維護(hù)性 2. 了解css與html之間的關(guān)系 1） html用于構(gòu)建網(wǎng)頁(yè)的結(jié)構(gòu) 2） Css用于構(gòu)建html元素的樣式 3） Html是頁(yè)面的內(nèi)容組成，css是頁(yè)面的表現(xiàn) 3. 掌握css樣式表的三種方式 1） 內(nèi)聯(lián)樣式----定義在單個(gè)html元素中 2） 內(nèi)部樣式表----樣式定義在html頁(yè)的頭元素中 3） 外部樣式表----將樣式表定義在一個(gè)外部的css文件中

34、(.css文件) ----由html頁(yè)面引用樣式表文件 4. 了解內(nèi)聯(lián)樣式表 1） 樣式定義在html元素的標(biāo)準(zhǔn)屬性style里 2） 屬性和屬性值之間用：連接 3） 多對(duì)屬性之間用；隔開(kāi) 4） 如：

我是一號(hào)標(biāo)題

5. 掌握內(nèi)部樣式表 1） 樣式表定義在文檔頭元素中的

35、

html

css

6. 掌握外部樣式表 1） 創(chuàng)建一個(gè)單獨(dú)的樣式表文件用來(lái)保存樣式規(guī)則 2） 文件后綴為.css 3） 使用元素鏈接需要的外部樣式表 4） 5） 該文件只能包含樣式規(guī)則 6） 樣式規(guī)則由選擇器和樣式聲明組成 7） 如： 7. 掌握css選擇器分類 1） 通用選擇器 ---- * 2） 元素選擇器 ---- html文檔

36、中的元素，如：

,

3） 類選擇器 --- .className 4） id選擇器 --- #idName 5） 群組選擇器 6） 后代選擇器 7） 子代選擇器 8） 偽類選擇器 8. 了解通用選擇器 ---- * 1） 可以與任何元素匹配 2） 常用于設(shè)置一些默認(rèn)樣式 3） 如：*{ font-size:10px; font-family:”Times New Roman”; } 9. 了解元素選擇器 1） html文檔中的元素 2） 如：html{color:black;} h1{color:blue;} h2{color:red;} 10.

37、 掌握類選擇器 1） 語(yǔ)法：.classname{} 2） 類名稱不能以數(shù)字開(kāi)頭 3） 所有有class屬性的元素都可以使用此樣式聲明 4） 如： 5） 可以將多個(gè)類選擇器應(yīng)用在同一個(gè)元素上，用空格分隔，如： 11. 掌握id選擇器 1） 僅作用于id屬性值 2） 選擇器前面有一個(gè)#號(hào) 3） 選擇器本身則為文檔中的某個(gè)元素的id屬性的值 12. 掌握群組選擇器 1） 以逗號(hào)隔開(kāi)的選擇器列表 2） 將一些相同的規(guī)則作用于多個(gè)元素 3） 如：html代碼

這是一個(gè)段落

38、

這是一個(gè)二號(hào)標(biāo)題

Css代碼： h2,.important{ color:green; font-size:30px; border:1px solid red; } 13. 掌握后代選擇器 1） 用空格分隔 2） 如：html代碼：

后代 選擇 器

后代選擇器 Css代碼： h1 span{ color:red; } 14. 掌握子代選擇器 1） 子代選

39、擇器要求選擇器之間只能存在父子關(guān)系 2） 使用大于號(hào)(>)連接 3） 15. 掌握偽類選擇器 1） 使用冒號(hào)(:)連接，冒號(hào)左邊是其他選擇器，右邊是偽類 2） 選擇器:偽類選擇器 3）分類： ①動(dòng)態(tài)偽類 :hover ---- 適用于鼠標(biāo)懸停時(shí) 14.掌握框模型 總尺寸=外邊距+邊框+內(nèi)邊距+內(nèi)容 17. 掌握外邊距 ---- margin 1） 圍繞在元素邊框周圍的空白區(qū)域是外邊距 2） 外邊距是透明的 3） 會(huì)在元素外創(chuàng)建額外的空白 4） 單邊設(shè)置 margin-top/margin-botto

40、m/margin-left/margin-right 如：margin-top:10px; margin-left:20px; 5) 外邊距簡(jiǎn)寫(xiě)方式 ①margin:value; ---- 四個(gè)方向相同 ②margin:value value; ---- 上下 左右 ③margin:value value value; ---- 上 左右 下 ④margin:value value value value; ---- 上 右 下 左 如：margin:10px 20px 30px 40px; 6) 使用外邊距實(shí)現(xiàn)元素左右居中 margin:0 auto; 18. 掌

41、握內(nèi)邊距 ---- padding 1） 內(nèi)容區(qū)域和邊框之間的空間就是內(nèi)邊距 2） 內(nèi)邊距會(huì)擴(kuò)大元素邊框所占用的區(qū)域 3） 單邊設(shè)置 padding-top/padding-bottom/padding-left/padding-right 如：padding-top:10px; padding-left:20px; 4）內(nèi)邊距簡(jiǎn)寫(xiě)方式 ①padding:value; ---- 四個(gè)方向相同 ②padding:value value; ---- 上下 左右 ③padding:value value value; ---- 上 左右 下 ④padding:value

42、value value value; ---- 上 右 下 左 如：padding:10px 20px 30px 40px; 19. 掌握背景屬性 1） 背景色 ---- background-color 2） 背景圖片 ---- background-image 3） 背景重復(fù) ---- background-repeat 4） 背景圖片尺寸 ---- background-size 20. 了解幾種定位方式 1） 普通流定位 2） 浮動(dòng)定位 3） 相對(duì)定位 4） 絕對(duì)定位 21. 掌握浮動(dòng)定位 ---- float 1） 將元素排除在普通流之外，元素將不在頁(yè)面占用

43、空間 2） 將浮動(dòng)元素放置在包含框左邊或者右邊 3） 浮動(dòng)元素依舊位于包含框之內(nèi) 4） 浮動(dòng)元素不會(huì)互相重疊 5） 浮動(dòng)元素不會(huì)上下浮動(dòng) 6） 左浮: float:left; 右浮： float:right; 22. 掌握相對(duì)定位 ---- relative 1） 元素原本所占的空間仍保留 2） 元素仍保持其未定位前的形狀 3） 語(yǔ)法：position:relative; 4） 使用left和right設(shè)置水平方向的偏移量；使用top和bottom設(shè)置垂直方向的偏移量 5） 如：position:relative; top:10px; left:20px; 2

44、3. 掌握絕對(duì)定位 ---- absolute 1） 將元素的內(nèi)容從普通流中完全移除，不占據(jù)空間 2） 相對(duì)于最近的已定位的祖先元素，如果元素沒(méi)有已定位的祖先元素，那么他的位置相對(duì)于body元素定位 3） 語(yǔ)法：position:absolute; 4） 使用left和right設(shè)置水平方向的偏移量；使用top和bottom設(shè)置垂直方向的偏移量 24.掌握堆疊順序 ---- z-index 1）值為數(shù)值 2）數(shù)值越大表示堆疊順序更高，即離用戶更近 3）可以設(shè)置為負(fù)值，表示離用戶更遠(yuǎn) 4）如： z-index:999; 25.掌握固定定位 1）元素從普通流中完全移除，不

45、占用頁(yè)面空間 2）當(dāng)用戶向下滾動(dòng)頁(yè)面時(shí)元素框并不隨著移動(dòng) 3）語(yǔ)法： position:fixed; 4）使用left和right設(shè)置水平方向的偏移量；使用top和bottom設(shè)置垂直方向的偏移量 1.項(xiàng)目1及步驟 1) 在網(wǎng)頁(yè)中輸入段落標(biāo)簽

，在其中輸入6對(duì)標(biāo)簽 2) 在span標(biāo)簽內(nèi)部分別輸入字母：G、o、o、l、e 3) 設(shè)置p標(biāo)簽樣式：字號(hào)130px、字體"Times New Roman"、文字顏色屬性 4) 給網(wǎng)頁(yè)相應(yīng)需要變色的字母添加相應(yīng)的類別選擇器.red .yellow .green 5) 給相應(yīng)的span標(biāo)簽應(yīng)用

46、相應(yīng)的類選擇器 6) 代碼為： Html代碼：

G o o g l e

css代碼： p{font-size:130px; font-family:"Times New Roman"; color:#1269eb;} .red{ colo

47、r:#da4530;} .yellow{ color:#ffb800;} .green{ color:#009756;} 2.項(xiàng)目2執(zhí)行步驟: 1) 向網(wǎng)頁(yè)中插入標(biāo)簽

2) 在頭部插入標(biāo)簽 3) 設(shè)置div的尺寸屬性：寬200像素，高100像素 4) 利用border復(fù)合屬性設(shè)置div的四周的5px、紅色的實(shí)線邊框 5) 將下邊框border-bottom改寫(xiě)為：3px、綠色的虛線(dashed)邊框 6) 代碼為： Html代碼：

48、 Css代碼： div{ width:200px; height:100px; border:5px #FF0000 solid; border-bottom:3px #00FF00 dashed;} 第三單元：CSS3基礎(chǔ) 3.1 復(fù)雜選擇器 3.1.1 兄弟選擇器 3.1.1.1 相鄰兄弟選擇器 3.1.1.2 通用兄弟 3.1.2 屬性選擇器 3.1.3 偽類選擇器 3.1.3.1 目標(biāo)偽類 3.1.3.2 結(jié)構(gòu)偽類 3.1.3.3 否定偽類 3.1.4 偽元素選擇器 3.1.4.1 偽元素：first-letter 3.1.4.2

49、 偽元素：firs-line 3.1.4.3 偽元素：：selection 3.2 多列屬性 3.3.1 分隔列 3.3.2 列間隔 3.3.3 列規(guī)則 3.3 CSS Hack 3.3.1 標(biāo)準(zhǔn)模式和混雜模式 3.3.2 什么是css hack 3.3.3 css hack的原理 3.3.4 css類內(nèi)部hack 【考核要求】 1.掌握復(fù)雜選擇器分類 1） 兄弟選擇器 2） 屬性選擇器 3） 偽類選擇器 4） 偽元素選擇器 2. 掌握兄弟選擇器 ---- 選擇當(dāng)前元素，平級(jí)元素的唯一方式 1） 相鄰兄弟選擇器 ---- + 選擇器1 +

50、 選擇器2 選擇緊接在另一個(gè)元素后的一個(gè)元素(平級(jí)、一個(gè)、相鄰之后) 2） 通用兄弟選擇器 ---- ~ 選擇器1 ~ 選擇器2 選擇之后所有符合條件的平級(jí)元素(平級(jí)、之后所有) 3. 掌握屬性選擇器 ---- 自定義選擇器條件 1） [屬性名] ---- 選擇包含指定屬性名的所有元素 如：[title] ---- 選擇網(wǎng)頁(yè)中所有包含title屬性的元素 缺點(diǎn)：范圍比較泛 2） 其他屬性值[屬性名] ---- 選擇網(wǎng)頁(yè)中所有包含指定屬性名的指定屬性值 如：img[title] ---- 選擇網(wǎng)頁(yè)中所有包含title的img元素 3） 自定義條件(4) 語(yǔ)法：其他選

51、擇器[條件] ①精確條件：[屬性名=”屬性值”] ---- 選擇包含指定屬性，且屬性值等于指定屬性值得元素 如：p[id=”logo”] ---- 選擇包含id屬性的

元素，其中id屬性的值為logo ②模糊條件：[屬性名^=”關(guān)鍵字”] ---- 選擇包含指定屬性，且屬性值必須以關(guān)鍵字開(kāi)頭 如：p[class^=”b”] ---- 選擇class屬性值以b開(kāi)頭的所有

元素 ③模糊條件：[屬性名$=”關(guān)鍵字”] ---- 選擇包含指定屬性，且屬性值必須以關(guān)鍵字結(jié)尾 如：p[class$=”b”] ---- 選擇class屬性值以b結(jié)尾的所有

元素 ④模糊條件：[屬性名

52、*=”關(guān)鍵字”] ---- 選擇包含關(guān)鍵字的指定屬性值 如：p[class*=”b”] ---- 選擇class屬性值中包含字串b的所有

元素 4.掌握偽類選擇器 1） 目標(biāo)偽類 ---- ：target ①選取當(dāng)前正在被跳轉(zhuǎn)到的錨點(diǎn)元素 ②一次只可能選中一個(gè)元素 ③唯一一個(gè)可以觸發(fā)其他元素樣式變化的偽類 2） 結(jié)構(gòu)偽類 --- 選擇處在特殊位置上的子元素 ①:first-child ---- 匹配其父元素的首個(gè)子元素 ---- 寫(xiě)在子元素上 ②:last-child ---- 匹配其父元素的最后一個(gè)子元素 ---- 寫(xiě)在子元素上 ③:only-child ---

53、- 匹配其父元素唯一子元素 ---- 寫(xiě)在子元素上 ④:empty ---- 匹配沒(méi)有子元素的每個(gè)元素，必須為空，空格也不行 ----寫(xiě)在父元素上 3）否定偽類 ：not( ) ---- 匹配非指定元素的每個(gè)元素 5.掌握偽元素選擇器 1） :first-letter ---- 用于選取指定選擇器的首字母 2） :first-line ---- 用于選取指定選擇器的首行 3） ::selection ---- 選擇器匹配被用戶選取的部分 ---- 了解 6.了解多列屬性 ---- 僅IE和opera支持 --不考核 1） 分隔列 ---- column-count:;

54、 如：column-count:3; 2） 列間隔 ---- column-gap:; 如：column-gap:45px; 3） 列規(guī)則 ---- column-rule:; 如：column-rule:2px solid red; 4） 例如： Html代碼：

大量文本...(大量文本略)
Css代碼： div{ width:400px; height:130px; border:1px solid black; column-count:3; column-gap:45px; column-rule:2px solid r

55、ed; } 7.了解css hack 1）為解決瀏覽器兼容性問(wèn)題，為特定瀏覽器專門(mén)定義的css代碼 2）重點(diǎn)解決舊版本瀏覽器兼容性問(wèn)題 3）css hack的原理 ①css類內(nèi)部hack ---- 在css樣式屬性名前加上一些只有特定瀏覽器才能識(shí)別的hack前綴 如：* + - _ # 等 ②選擇器hack ③html頭部引用hack 8.了解瀏覽器運(yùn)行模式 1）標(biāo)準(zhǔn)模式：嚴(yán)格按照XHTML或html4.0標(biāo)準(zhǔn)解析網(wǎng)頁(yè)，只要符合標(biāo)準(zhǔn)的網(wǎng)頁(yè)，在不同瀏覽器顯示效果應(yīng)該是一致的 2）混雜模式：按照瀏覽器自帶的規(guī)則解析網(wǎng)頁(yè)，沒(méi)有標(biāo)準(zhǔn)可循，同一網(wǎng)頁(yè)在不同瀏覽器顯示效

56、果可能不一致 解決辦法：聲明DOCTYPE 1.項(xiàng)目1及執(zhí)行步驟 運(yùn)用屬性選擇器，實(shí)現(xiàn)以上效果 1） 在頁(yè)面插入一個(gè)

元素和兩個(gè)

元素 2） 給

元素添加title屬性和id屬性 3） 給兩個(gè)

元素添加id屬性 4） 在樣式表中給h1添加黃色背景 5） 在樣式表中給兩個(gè)

元素添加邊框 6） 在樣式表中修改段落2的文字為紅色 7） 代碼如下： Html代碼：

h1 text

段落一

段落

57、2

Css代碼： [title]{ background-color:yellow; } p[id]{ border:1px solid red; } p[id="p2"]{ color:red; } 2.項(xiàng)目2及執(zhí)行步驟 運(yùn)用結(jié)構(gòu)偽類選擇器，實(shí)現(xiàn)以上效果 1） 向頁(yè)面插入
元素 2） 向
元素中插入四個(gè)
元素 3） 在樣式表中選擇第一個(gè)元素，字體顏色設(shè)置為藍(lán)色 4） 在樣式表中選擇最后一個(gè)元素，字體顏色設(shè)置為紅色 5） 在樣式表中選擇空元素，設(shè)置高為20px，并添加綠色邊框 6） 在樣式表
58、中選擇
唯一子元素，添加黑色邊框 7） 代碼如下： Html代碼：
段落1
段落2
段落3
Css代碼： P:first-child{ color:blue; } P:last-child{ color:red; } P:empty{ border:1px solid green; height:20px; } div:only-child{ border:1px solid blac
59、k; } 第四單元 CSS3高級(jí) 4.1 轉(zhuǎn)換 4.1.1 轉(zhuǎn)換簡(jiǎn)介 4.1.1.1 什么是轉(zhuǎn)換 4.1.1.2 轉(zhuǎn)換屬性 4.1.1.3 轉(zhuǎn)換的原點(diǎn) 4.1.2 2D轉(zhuǎn)換 4.1.2.1 2D位移 4.1.2.2 2D縮放 4.1.2.3 2D旋轉(zhuǎn) 4.1.2.4 2D傾斜 4.2 過(guò)渡 4.2.1 過(guò)渡概述 4.2.1.1 什么是過(guò)渡 4.2.1.2 過(guò)渡示例 4.2.1.3 觸發(fā)過(guò)渡 4.2.2 過(guò)渡子屬性 4.2.2.1 過(guò)渡屬性transition-property 4.2.2.2 過(guò)渡時(shí)間transition-duration 4.2
60、.2.3 過(guò)渡函數(shù)transition-timing-function 4.2.2.4 過(guò)渡延遲transition-delay 4.3 動(dòng)畫(huà) 4.3.1 動(dòng)畫(huà)概述 4.3.1.1 什么是動(dòng)畫(huà) 4.3.1.2 動(dòng)畫(huà)示例 4.3.2 關(guān)鍵幀 4.3.2.1 @keyframes的作用 4.3.2.2 @keyframes的語(yǔ)法 4.3.3 動(dòng)畫(huà)屬性 4.3.3.1 動(dòng)畫(huà)子屬性 4.3.3.2 animation屬性 4.3.3.3 動(dòng)畫(huà)與過(guò)渡 【考核要求】 1. 掌握轉(zhuǎn)換(變形) ---- transform 1） 轉(zhuǎn)換是使元素改變形狀、尺寸和位置的一種效果 2）
61、 2D轉(zhuǎn)換使元素在X軸和Y軸平面上發(fā)生變化 3） 參照原點(diǎn) ---- transform-origin:; 默認(rèn)情況下，轉(zhuǎn)換的參照原點(diǎn)在元素的中心點(diǎn),坐標(biāo)（width/2,height/2） 坐標(biāo)原點(diǎn)：在元素的左上角，坐標(biāo)（0,0） 修改參照原點(diǎn)：transform-origin：數(shù)值/百分比/關(guān)鍵字； 數(shù)值：一個(gè)值 ---- 表示所有軸的位置 兩個(gè)值 ---- 表示X軸和Y軸 三個(gè)值 ---- 表示X軸、Y軸和Z軸 關(guān)鍵字：right、left、top、bottom 2. 掌握變形的四個(gè)函數(shù) 1） 旋轉(zhuǎn) ---- rotate ①定義：圍繞一個(gè)參
62、照原點(diǎn)，旋轉(zhuǎn)指定角度 ②語(yǔ)法：transform:rotate(n deg); n：度數(shù) deg：?jiǎn)挝? 如：transform:rotate(90 deg); ③n為正，順時(shí)針旋轉(zhuǎn)；n為負(fù)，逆時(shí)針旋轉(zhuǎn) ④rotate不僅旋轉(zhuǎn)元素，同時(shí)旋轉(zhuǎn)繪圖坐標(biāo)系 2） 位移 ---- translate ①定義：延坐標(biāo)軸方向，移動(dòng)指定距離 ②語(yǔ)法：transform:translate(x軸移動(dòng)距離，y軸移動(dòng)距離); ③x軸右為正，左為負(fù)；y軸下為正，上為負(fù) ④位移不會(huì)影響其他元素的布局位置，可能會(huì)蓋住周圍元素 3） 縮放 ---- scale ①定義：指定坐標(biāo)軸上的坐標(biāo)縮放指定倍
63、數(shù) ②語(yǔ)法：transform:scale(倍數(shù)); ---- 等比例縮放 ③倍數(shù)：0-1之間，縮?。?1,放大 ④transform:scale(x坐標(biāo)縮放倍數(shù)，y軸縮放倍數(shù)); ---- 了解 4） 傾斜 ---- skew ①定義：延坐標(biāo)軸方向，傾斜指定角度 ②語(yǔ)法：transform:skew(n deg); ---- 僅延x軸傾斜 transform:skew(n deg,n deg); ---- 延x軸，y軸同時(shí)傾斜 ③x軸方向：正角度向左傾斜，負(fù)角度向右傾斜 Y軸方向：正角度左側(cè)向上傾斜，負(fù)角度左側(cè)向下傾斜 4. 掌握過(guò)渡屬性 1） 定義：從開(kāi)始樣式，
64、經(jīng)過(guò)指定時(shí)間，緩慢過(guò)渡到結(jié)束樣式 2） transition:要變化的屬性 持續(xù)時(shí)間 速度變化類型 延遲時(shí)間; 3） 如：#d1{transition:background 3s linear 1s;} #d1:hover{background:red;} 4） 寫(xiě)在開(kāi)始樣式中 5） 由元素的狀態(tài)變化觸發(fā) ---- :hover 、:active 、:focus 6） 實(shí)現(xiàn)多個(gè)屬性同時(shí)過(guò)渡(2種) ①過(guò)渡子屬性 ---- 了解 1>專門(mén)用于設(shè)置過(guò)渡的屬性名 transition-property:屬性一,屬性二,...; 2>專門(mén)用于設(shè)置過(guò)渡的持續(xù)時(shí)間 transitio
65、n-duration:n1s,n2s,...; 3>專門(mén)用于設(shè)置過(guò)渡的速度變化類型 transition-timing-function: ; 備選值：ease ---- 默認(rèn)值，先加速后減速 Linear ---- 勻速變化 ease-in ---- 加速 ease-out ---- 減速 ease-in-out ---- 先加速，后減速 4>專門(mén)用于設(shè)置過(guò)渡的延遲開(kāi)始時(shí)間 ---- 一般不設(shè)置 transition-delay:n1s,n2s,...; ②整合transition屬性 transition:屬性1 持續(xù)時(shí)間 速度類型 延遲時(shí)間, 屬性2 持
66、續(xù)時(shí)間 速度類型 延遲時(shí)間, ...; 5.掌握關(guān)鍵幀動(dòng)畫(huà) --- 瀏覽器兼容性 1） 解決兼容性問(wèn)題：chrome和Safari需要前綴 -webkit- Firefox需要前綴 -moz- Opera需要前綴 -o- IE需要前綴 -ms- 2） 定義關(guān)鍵幀 ---- @keyframes --- 兼容性 語(yǔ)法：@keyframes name{ from/0%{開(kāi)始樣式} n%{當(dāng)動(dòng)畫(huà)進(jìn)度播放到n%時(shí)的樣式} ... to/100%{結(jié)束樣式} } 3) 觸發(fā)動(dòng)畫(huà) animation:動(dòng)畫(huà)名 持續(xù)時(shí)間 速速類型 延遲時(shí)間; animation的動(dòng)畫(huà)名和@keyframes的動(dòng)畫(huà)名必須一致 4） 使動(dòng)畫(huà)維持最后一幀狀態(tài)，在animation屬性最后加forwards 5） 使動(dòng)畫(huà)循環(huán)播放，在animation屬性后面加infinite 6） 停止動(dòng)畫(huà)：animation-play-state:paused; 1. 項(xiàng)目1及執(zhí)行步驟 圖1 圖2 實(shí)現(xiàn)圖1到圖2的過(guò)渡 1
展開(kāi)閱讀全文
溫馨提示:
1: 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
2: 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
3.本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
5. 裝配圖網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔
• 6.煤礦安全生產(chǎn)科普知識(shí)競(jìng)賽題含答案
• 2.煤礦爆破工技能鑒定試題含答案
• 3.爆破工培訓(xùn)考試試題含答案
• 2.煤礦安全監(jiān)察人員模擬考試題庫(kù)試卷含答案
• 3.金屬非金屬礦山安全管理人員（地下礦山）安全生產(chǎn)模擬考試題庫(kù)試卷含答案
• 4.煤礦特種作業(yè)人員井下電鉗工模擬考試題庫(kù)試卷含答案
• 1 煤礦安全生產(chǎn)及管理知識(shí)測(cè)試題庫(kù)及答案
• 2 各種煤礦安全考試試題含答案
• 1 煤礦安全檢查考試題
• 1 井下放炮員練習(xí)題含答案
• 2煤礦安全監(jiān)測(cè)工種技術(shù)比武題庫(kù)含解析
• 1 礦山應(yīng)急救援安全知識(shí)競(jìng)賽試題
• 1 礦井泵工考試練習(xí)題含答案
• 2煤礦爆破工考試復(fù)習(xí)題含答案
• 1 各種煤礦安全考試試題含答案