-

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

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

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

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

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

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

1. 科比
2. 詹姆斯
3. 庫里

2） 無序列表

20、

• 科比
• 詹姆斯
• 庫里

3） 列表嵌套

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

21、DOCTYPE html>

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

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

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

23、

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

24、 html>

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

      25、/li>

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

26、itle>demo

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

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

29、>

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

第二單元：css基礎(chǔ) 2.1 CSS語法 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語法規(guī)范 2.1.3.1 css語法規(guī)范總結(jié) 2.1.3.2 css樣式表特征 2.1.3.3 樣式優(yōu)先級 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)先級 2.3 框模型和背景 2.3.1 框模型 2.3.2 外邊距 2.3.2.1 什么是外邊距 2.3.2.2 外邊距margin 2.3.2.3 外邊距的簡潔寫法 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)邊距的簡潔寫法 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 浮動和定位 2.4.1 定位概述 2.4.1.1 什么是定位 2.3.1.2 定位屬性 2.4.2 浮動定位 2.4.2.1 浮動概述 2.4.2.2 浮動定位 2.4.2.3 float屬性 2.4.2.4 clear屬性 2.4.3 定位方式 2.4.3.1 相對定位 2.4.3.2 絕對定位 2.4.3.3 堆疊順

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

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

我是一號標(biāo)題

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

35、

html

css

6. 掌握外部樣式表 1） 創(chuàng)建一個單獨的樣式表文件用來保存樣式規(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è)置一些默認樣式 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） 語法：.classname{} 2） 類名稱不能以數(shù)字開頭 3） 所有有class屬性的元素都可以使用此樣式聲明 4） 如： 5） 可以將多個類選擇器應(yīng)用在同一個元素上，用空格分隔，如： 11. 掌握id選擇器 1） 僅作用于id屬性值 2） 選擇器前面有一個#號 3） 選擇器本身則為文檔中的某個元素的id屬性的值 12. 掌握群組選擇器 1） 以逗號隔開的選擇器列表 2） 將一些相同的規(guī)則作用于多個元素 3） 如：html代碼

這是一個段落

38、

這是一個二號標(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） 使用大于號(>)連接 3） 15. 掌握偽類選擇器 1） 使用冒號(:)連接，冒號左邊是其他選擇器，右邊是偽類 2） 選擇器:偽類選擇器 3）分類： ①動態(tài)偽類 :hover ---- 適用于鼠標(biāo)懸停時 14.掌握框模型 總尺寸=外邊距+邊框+內(nèi)邊距+內(nèi)容 17. 掌握外邊距 ---- margin 1） 圍繞在元素邊框周圍的空白區(qū)域是外邊距 2） 外邊距是透明的 3） 會在元素外創(chuàng)建額外的空白 4） 單邊設(shè)置 margin-top/margin-botto

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

41、握內(nèi)邊距 ---- padding 1） 內(nèi)容區(qū)域和邊框之間的空間就是內(nèi)邊距 2） 內(nèi)邊距會擴大元素邊框所占用的區(qū)域 3） 單邊設(shè)置 padding-top/padding-bottom/padding-left/padding-right 如：padding-top:10px; padding-left:20px; 4）內(nèi)邊距簡寫方式 ①padding:value; ---- 四個方向相同 ②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） 浮動定位 3） 相對定位 4） 絕對定位 21. 掌握浮動定位 ---- float 1） 將元素排除在普通流之外，元素將不在頁面占用

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

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

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

，在其中輸入6對標(biāo)簽 2) 在span標(biāo)簽內(nèi)部分別輸入字母：G、o、o、l、e 3) 設(shè)置p標(biāo)簽樣式：字號130px、字體"Times New Roman"、文字顏色屬性 4) 給網(wǎng)頁相應(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.項目2執(zhí)行步驟: 1) 向網(wǎng)頁中插入標(biāo)簽

2) 在頭部插入標(biāo)簽 3) 設(shè)置div的尺寸屬性：寬200像素，高100像素 4) 利用border復(fù)合屬性設(shè)置div的四周的5px、紅色的實線邊框 5) 將下邊框border-bottom改寫為：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)前元素，平級元素的唯一方式 1） 相鄰兄弟選擇器 ---- + 選擇器1 +

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

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

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

元素 ③模糊條件：[屬性名$=”關(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)到的錨點元素 ②一次只可能選中一個元素 ③唯一一個可以觸發(fā)其他元素樣式變化的偽類 2） 結(jié)構(gòu)偽類 --- 選擇處在特殊位置上的子元素 ①:first-child ---- 匹配其父元素的首個子元素 ---- 寫在子元素上 ②:last-child ---- 匹配其父元素的最后一個子元素 ---- 寫在子元素上 ③:only-child ---

53、- 匹配其父元素唯一子元素 ---- 寫在子元素上 ④:empty ---- 匹配沒有子元素的每個元素，必須為空，空格也不行 ----寫在父元素上 3）否定偽類 ：not( ) ---- 匹配非指定元素的每個元素 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）為解決瀏覽器兼容性問題，為特定瀏覽器專門定義的css代碼 2）重點解決舊版本瀏覽器兼容性問題 3）css hack的原理 ①css類內(nèi)部hack ---- 在css樣式屬性名前加上一些只有特定瀏覽器才能識別的hack前綴 如：* + - _ # 等 ②選擇器hack ③html頭部引用hack 8.了解瀏覽器運行模式 1）標(biāo)準(zhǔn)模式：嚴(yán)格按照XHTML或html4.0標(biāo)準(zhǔn)解析網(wǎng)頁，只要符合標(biāo)準(zhǔn)的網(wǎng)頁，在不同瀏覽器顯示效果應(yīng)該是一致的 2）混雜模式：按照瀏覽器自帶的規(guī)則解析網(wǎng)頁，沒有標(biāo)準(zhǔn)可循，同一網(wǎng)頁在不同瀏覽器顯示效

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

元素和兩個

元素 2） 給

元素添加title屬性和id屬性 3） 給兩個

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

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

最新文檔
• 中考語文語言知識積累及運用課件
• 6.康復(fù)醫(yī)學(xué)的工作方法和流程
• 部編本人教版小學(xué)一年級語文下冊11-彩虹課件
• 活動四單股銅芯導(dǎo)線的T型連接絕緣層的恢復(fù)單股銅芯導(dǎo)線的T型連接課件
• 機場運營與管理 課程講義
• 不得作為商標(biāo)的標(biāo)志的審查解讀
• MRSA共識解讀2012-1-17(1)
• 高中語文必修一《優(yōu)美的漢字》課件
• 安全生產(chǎn)管理培訓(xùn)課件
• 衛(wèi)生系統(tǒng)法律知識講座-法律責(zé)任與法律救濟
• 骨關(guān)節(jié)脫位課件
• 護士行為與護理安全 課件
• 公路工程技術(shù)標(biāo)準(zhǔn)宣貫-隧道部分課件
• 預(yù)防冬季傳染病主題班會
• 疾病預(yù)防與食品安全教育.ppt