人機(jī)交互界面設(shè)計(jì)全書(shū)課件完整版ppt全套教學(xué)教程最全電子教案電子講義(最新)

1、人機(jī)交互界面設(shè)計(jì)第三章web基礎(chǔ)知識(shí)目錄01 了解萬(wàn)維網(wǎng)、IP和域名、HTTP、FTP02 Dreamweaver基本操作03 網(wǎng)頁(yè)文件的基本操作04 認(rèn)識(shí)HTML03-01 創(chuàng)建站點(diǎn)03-02 管理站點(diǎn)01 了解萬(wàn)維網(wǎng)、IP和域名、HTTP、FTP萬(wàn)維網(wǎng)WWW是環(huán)球信息網(wǎng)的縮寫(xiě)，（亦作“Web”、“WWW”、“W3”，英文全稱為“World Wide Web”），中文名字為“萬(wàn)維網(wǎng)”，環(huán)球網(wǎng)等，常簡(jiǎn)稱為Web。超文本超文本（Hypertext）是由一個(gè)叫做網(wǎng)頁(yè)瀏覽器（Web browser）的程序顯示。網(wǎng)頁(yè)瀏覽器從網(wǎng)頁(yè)服務(wù)器取回稱為“文檔”或“網(wǎng)頁(yè)”的信息并顯示。網(wǎng)頁(yè)、網(wǎng)頁(yè)文件及網(wǎng)站網(wǎng)頁(yè)是網(wǎng)

2、站的基本信息單位，是WWW的基本文檔。它由文字、圖片、動(dòng)畫(huà)、聲音等多種媒體信息以及鏈接組成，是用HTML編寫(xiě)的。網(wǎng)頁(yè)文件是用HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用）編寫(xiě)的，可在WWW上傳輸，能被瀏覽器識(shí)別顯示的文本文件。其擴(kuò)展名是.htm和.html。網(wǎng)站由眾多不同內(nèi)容的網(wǎng)頁(yè)構(gòu)成，網(wǎng)頁(yè)的內(nèi)容可體現(xiàn)網(wǎng)站的全部功能。HTTPHTTP是Hypertext Transfer Protocol的縮寫(xiě)，即超文本傳輸協(xié)議。HTTP提供了訪問(wèn)超文本信息的功能，是WWW瀏覽器和WWW服務(wù)器之間的應(yīng)用層通信協(xié)議。01 了解萬(wàn)維網(wǎng)、IP和域名、HTTP、FTP01 了解萬(wàn)維網(wǎng)、IP和域名、HTTP、FTPIP地址和

3、域名IP即網(wǎng)絡(luò)之間互連的協(xié)議，英文縮寫(xiě)為“Internet Protocol”，中文縮寫(xiě)為“網(wǎng)協(xié)”。IP地址：網(wǎng)絡(luò)地址、網(wǎng)絡(luò)協(xié)議。域名：網(wǎng)站的名稱。FTPFTP 是File Transfer Protocol（文件傳輸協(xié)議）的英文簡(jiǎn)稱，而中文簡(jiǎn)稱為“文傳協(xié)議”。用于Internet上的控制文件的雙向傳輸。同時(shí)，它也是一個(gè)應(yīng)用程序（Application）。02 Dreamweaver基本操作Dreamweaver是一款極為優(yōu)秀的可視化網(wǎng)頁(yè)設(shè)計(jì)制作工具和網(wǎng)站管理工具。它具有以下優(yōu)點(diǎn)：制作效率高網(wǎng)站管理便捷控制能力強(qiáng)02 Dreamweaver基本操作認(rèn)識(shí)Dreamweaver界面屬性面板編輯窗口

4、對(duì)象面板03 網(wǎng)頁(yè)文件的基本操作創(chuàng)建站點(diǎn)123在啟動(dòng)Dreamweaver時(shí)通過(guò)歡迎頁(yè)面創(chuàng)建在Dreamweaver工作環(huán)境下，單擊菜單欄中的“站點(diǎn)”-“新建站點(diǎn)”命令“文件”“管理站點(diǎn)”，在彈出窗口中點(diǎn)擊“新建站點(diǎn)”命令03 網(wǎng)頁(yè)文件的基本操作新建站點(diǎn)步驟二 站點(diǎn)標(biāo)題步驟三 選擇服務(wù)器03 網(wǎng)頁(yè)文件的基本操作管理站點(diǎn)在“文件”面板中的“food”文件夾上單擊鼠標(biāo)右鍵，則彈出一個(gè)快捷菜單。我們可以通過(guò)這個(gè)來(lái)管理站點(diǎn)。根據(jù)需求建立相應(yīng)的文件及文件夾。04 認(rèn)識(shí)HTMLHTML基本結(jié)構(gòu) 網(wǎng)站名稱 網(wǎng)站基本內(nèi)容 ENDTHANK YOU人機(jī)交互界面設(shè)計(jì)第四章HTML5基礎(chǔ)目錄01 html5基本結(jié)構(gòu)

5、標(biāo)簽02 文本制作03 網(wǎng)頁(yè)圖片的顯示04 超鏈接02-01 認(rèn)識(shí)標(biāo)題、段落、短語(yǔ)元素02-02 特殊字符05 列表標(biāo)簽05-01 無(wú)序列表05-02 有序列表05-03 定義列表06 html5媒體元素06-01 abject對(duì)象 06-04 audio對(duì)象06-02 embed對(duì)象 06-05 source 復(fù)數(shù)媒體元素06-03 video對(duì)象01 html5基本結(jié)構(gòu)標(biāo)簽Div標(biāo)簽該元素是用于分組 HTML 元素的塊級(jí)元素?？梢园阉醋魇且粋€(gè)容器，用來(lái)定義文檔中的分區(qū)。這是一個(gè)雙標(biāo)簽，在使用時(shí)，必須關(guān)閉它。這是一個(gè)模塊內(nèi)容 書(shū)中這部分代碼有錯(cuò)，以ppt為準(zhǔn)01 html5基本結(jié)構(gòu)標(biāo)簽he

6、ader標(biāo)簽標(biāo)簽定義文檔的頁(yè)眉，通常是一些引導(dǎo)和導(dǎo)航信息。它不局限于寫(xiě)在網(wǎng)頁(yè)頭部，也可以寫(xiě)在網(wǎng)頁(yè)內(nèi)容里面，表示網(wǎng)頁(yè)一個(gè)模塊內(nèi)容的頭部。它可以包括標(biāo)簽，還可以包括表格內(nèi)容、標(biāo)識(shí)、搜索表單、導(dǎo)航等。Header中至少要有一個(gè)標(biāo)題元素或hgroup元素或nav元素用法： 頭部?jī)?nèi)容 /標(biāo)題元素，后面會(huì)詳解 頭部信息01 html5基本結(jié)構(gòu)標(biāo)簽nav標(biāo)簽nav標(biāo)簽可以作為頁(yè)面導(dǎo)航的鏈接組。同樣可以包含標(biāo)簽，或者其他列表，表單等用法： 這里顯示的是導(dǎo)航部分。section標(biāo)簽該標(biāo)簽用來(lái)定義文檔中的節(jié)。比如章節(jié)、某個(gè)模塊或文檔中的其它部分。一般用于成塊的內(nèi)容，會(huì)在文檔流中開(kāi)始一個(gè)新的節(jié)。用法： 該模塊的標(biāo)題

7、 該模塊的內(nèi)容01 html5基本結(jié)構(gòu)標(biāo)簽article標(biāo)簽是一個(gè)特殊的section標(biāo)簽，具有更明確的語(yǔ)義，它代表一個(gè)獨(dú)立的、完整的相關(guān)內(nèi)容塊，可獨(dú)立于頁(yè)面其它內(nèi)容使用。例如一篇完整的論壇帖子，一篇博客文章，一個(gè)用戶評(píng)論等等。用法： 這是文章標(biāo)題 文章內(nèi)容詳情 /這里的是段落標(biāo)簽，后面做詳解 這里可以是文章內(nèi)容 01 html5基本結(jié)構(gòu)標(biāo)簽aside標(biāo)簽1、可以表示包含在article元素中的附屬信息，如名次解釋，相關(guān)引用資料等。用法： 文章標(biāo)題 文章內(nèi)容 本文出自2、也可以表示整個(gè)頁(yè)面或站點(diǎn)的附屬信息部分。如側(cè)邊欄、博客里面的其他文章列表，友情鏈接、單元廣告等。01 html5基本結(jié)構(gòu)標(biāo)簽

8、footer標(biāo)簽1、該標(biāo)簽用于定義section、article或網(wǎng)頁(yè)的頁(yè)腳，包含了與內(nèi)容或頁(yè)面有關(guān)的信息，比如說(shuō)文章信息（作者和日期）。作為頁(yè)面的頁(yè)腳時(shí)，一般包含了版權(quán)、相關(guān)文件和鏈接。它和標(biāo)簽使用基本一樣，可以在一個(gè)頁(yè)面中多次使用，如果在一個(gè)區(qū)段的后面加入footer，那么它就相當(dāng)于該模塊的頁(yè)腳了。用法： Copyright 2006-2015 重慶市巴南分局備案編號(hào):11010500000001 html5基本結(jié)構(gòu)標(biāo)簽hgroup標(biāo)簽若在一模塊中需要含有一系列的標(biāo)題元素，則可以用hgroup將他們包裹起來(lái)。用法： 標(biāo)題1 標(biāo)題2 01 html5基本結(jié)構(gòu)標(biāo)簽figure標(biāo)簽與figcap

9、tion標(biāo)簽一段獨(dú)立的流內(nèi)容，一般表示文檔的一個(gè)獨(dú)立單元。這2個(gè)屬性常常在一起使用，figcaption元素為figure元素組添加描述信息?？梢杂糜趯?duì)元素的組合，多用于圖片與圖片描述組合。用法： 這里可以插入一張圖片 這兒是圖片的描述信息02 文本制作段落：段落標(biāo)簽顧名思義就是一個(gè)段落，可以理解為一些句子或文本組織在一起的塊級(jí)元素。用法：這里是一個(gè)段落。-認(rèn)識(shí)標(biāo)題、段落、短語(yǔ)元素標(biāo)題：標(biāo)題元素從h1到h6共六級(jí)。標(biāo)題元素中包含的文本被瀏覽器渲染為“塊”元素，即會(huì)自動(dòng)產(chǎn)生換行。所顯示的字號(hào)是最大的， 所顯示的字號(hào)最小span：行內(nèi)元素，本身沒(méi)有任何含義和任何樣式，但可以定義組合文檔中的部分文字

10、。用法：下面這是一段文字換行：在html中的換行顯示需要專門(mén)的標(biāo)簽。該標(biāo)簽單獨(dú)使用，不成對(duì)出現(xiàn)，是一種獨(dú)立標(biāo)記。用法：這里將要換行。這里是第二行。02 文本制作制作效率高網(wǎng)站管理便捷控制能力強(qiáng)-認(rèn)識(shí)標(biāo)題、段落、短語(yǔ)元素短語(yǔ)元素：短語(yǔ)元素都是行內(nèi)元素。指的是要定義一個(gè)段落或者一句話里面的一部分文字。比如，要強(qiáng)調(diào)某個(gè)文字，傾斜某個(gè)文字，高亮某個(gè)文字等等。如要為：文字加粗這部分文字加粗強(qiáng)調(diào)文字強(qiáng)調(diào)這里的文字斜體文字這里的文字會(huì)有斜體效果。02 文本制作-認(rèn)識(shí)標(biāo)題、段落、短語(yǔ)元素短語(yǔ)元素（需要時(shí)可以查表） 標(biāo)簽 用途縮寫(xiě)：用于顯示文本的縮寫(xiě)，配置title屬性加粗：文本沒(méi)有額外的重要性，但樣式采用加粗

11、字體引文或參考：用于顯示文本是引文或參考，通常傾斜顯示代碼：用于顯示文本為程序代碼，通常使用等寬字體術(shù)語(yǔ)定義：用于顯示文本為詞匯或術(shù)語(yǔ)定義，通常傾斜顯示強(qiáng)調(diào)：用于強(qiáng)調(diào)文本，通常傾斜顯示傾斜：文本沒(méi)有額外的重要性，但樣式采用傾斜字體輸入文本：用于顯示要用戶輸入的文本，通常用等寬字體顯示記號(hào)文本：文本高亮顯示（僅用于HTML5）示例文本：用于顯示程序的示例輸出，通常顯示為等寬字體小文本：用小字號(hào)顯示的免責(zé)聲明。強(qiáng)調(diào)文本：顯示文本強(qiáng)調(diào)或突出與周邊的普通文本，通常加粗顯示下標(biāo)：用于顯示文本的下標(biāo)上標(biāo)：用于顯示文本的上標(biāo)變量文本：用于顯示變量或程序輸出，通常傾斜顯示02 文本制作-認(rèn)識(shí)標(biāo)題、段落、短語(yǔ)元

12、素案例：根據(jù)效果圖，在Dreamweaver中寫(xiě)出源代碼。02 文本制作-認(rèn)識(shí)標(biāo)題、段落、短語(yǔ)元素小貼士：什么是塊狀元素，什么是內(nèi)聯(lián)元素？塊級(jí)元素：這類元素的特征是添加該標(biāo)簽后，會(huì)獨(dú)立的成一行顯示。行內(nèi)元素：也叫內(nèi)聯(lián)元素。這類元素的特征是增加其標(biāo)簽后，不會(huì)換行。塊元素可以見(jiàn)下圖。02 文本制作控制能力強(qiáng)-特殊字符若我們需要在html頁(yè)面中顯示某些符號(hào)如：，&，”等等，在html代碼中直接輸入上述類似符號(hào)時(shí)，會(huì)與html中的關(guān)鍵字有沖突，因此不能直接在代碼中輸入，而是需要轉(zhuǎn)化為相對(duì)應(yīng)的html代碼。符號(hào)HTML代碼'&空格02 文本制作制作效率高-特殊字符案例：根據(jù)效果圖，在Dream

13、weaver中寫(xiě)出源代碼。03 網(wǎng)頁(yè)圖片的顯示插入圖片為插入圖片標(biāo)簽。僅僅使用 標(biāo)簽并不會(huì)在網(wǎng)頁(yè)中插入圖像。圖片必須要有圖片來(lái)源以及替代文本屬性，即src以及alt屬性。用法：src屬性代表的是圖片路徑，該路徑可以是絕對(duì)路徑也可以是相對(duì)路徑。alt 屬性指定了替代文本，用于在圖像無(wú)法顯示或者用戶禁用圖像顯示時(shí)，代替圖像顯示在瀏覽器中的內(nèi)容。03 網(wǎng)頁(yè)圖片的顯示案例操作題目要求在1.html內(nèi)插入01.jpg和02.jpg兩張圖片。文件結(jié)構(gòu)圖如下圖4.7所示。請(qǐng)寫(xiě)出相應(yīng)html代碼：03 網(wǎng)頁(yè)圖片的顯示小貼士：什么時(shí)候插入圖片，什么時(shí)候用背景圖片？當(dāng)圖片作為頁(yè)面主體內(nèi)容，如新聞圖片時(shí)，使用插入圖

14、片。作為頁(yè)面整體背景或者點(diǎn)綴美化功能的時(shí)候可以作為背景圖片引入。相對(duì)路徑與絕對(duì)路徑（1）絕對(duì)路徑絕對(duì)路徑表示一個(gè)完整的路徑?？梢詠?lái)源于本機(jī)中的物理地址，例如src=D:/mysite/image/pic.jpg；也可以來(lái)源于internet的網(wǎng)絡(luò)路徑，例如src=/img/pic.jpg。（2）相對(duì)路徑相對(duì)路徑是以當(dāng)前文檔所在的路徑和子目錄為起始目錄，進(jìn)行相對(duì)于文檔的查找。制作網(wǎng)頁(yè)時(shí)通常采用相對(duì)路徑，這樣可以避免站點(diǎn)中的文件整體移動(dòng)后，產(chǎn)生找不到圖片或其他文件等的現(xiàn)象。04 超鏈接文字超鏈接超鏈接指的是一個(gè)網(wǎng)頁(yè)指向一個(gè)目標(biāo)的連接關(guān)系。這個(gè)目標(biāo)可以是另一個(gè)網(wǎng)頁(yè)，也可以是相同網(wǎng)頁(yè)上的不同位置，還可

15、以是一個(gè)圖片，一個(gè)電子郵件地址，一個(gè)文件，甚至是一個(gè)應(yīng)用程序等。HTML 超鏈接主要由標(biāo)簽對(duì)和屬性href 構(gòu)成。要實(shí)現(xiàn)鏈接的跳轉(zhuǎn)，必須要使用屬性href用法：鏈接的文字或圖片通過(guò)點(diǎn)擊鏈接的文字，具體的語(yǔ)法為：鏈接文字圖片超鏈接通過(guò)點(diǎn)擊圖片進(jìn)行跳轉(zhuǎn)，具體的語(yǔ)法為：04 超鏈接錨點(diǎn)超鏈接1、確定鏈接跳轉(zhuǎn)的位置，設(shè)置錨點(diǎn)：目標(biāo)位置（錨點(diǎn)的名字可以是任意的英文名）2、創(chuàng)建鏈接源，鏈接文字或者圖片注意：錨點(diǎn)名稱需要必須要與鏈接的href內(nèi)的錨點(diǎn)名稱匹配（相同）。郵件超鏈接需要建立郵件超鏈接時(shí)，點(diǎn)擊內(nèi)容會(huì)啟動(dòng)電子郵件程序。具體用法為：發(fā)郵件04 超鏈接案例以下是關(guān)于超鏈接的一個(gè)知識(shí)鞏固案例。根據(jù)如圖所示

16、的網(wǎng)頁(yè)效果圖及文檔路徑，在Dreamweaver中寫(xiě)出源代碼。（文檔路徑在書(shū)上有缺失，下圖為準(zhǔn)）創(chuàng)建一個(gè)名為test.html頁(yè)面分別設(shè)置5個(gè)字段：link，百度圖標(biāo)圖片，錨點(diǎn)鏈接，發(fā)郵件，這里是一段話為link字段增加鏈接到與test.html同級(jí)文件下的1.html為百度圖片圖片增加鏈接到百度官網(wǎng)為錨點(diǎn)鏈接字段增加錨點(diǎn)鏈接到“這里是一段話”為發(fā)郵件字段增加郵件超鏈接到05 列表標(biāo)簽列表標(biāo)簽是HTML中常用的一種標(biāo)簽。具體分為無(wú)序有序列表定義列表。列表標(biāo)簽的主要用途為：網(wǎng)頁(yè)導(dǎo)航、網(wǎng)頁(yè)列表頁(yè)、網(wǎng)頁(yè)圖文排列部分等05 列表標(biāo)簽-無(wú)序列表無(wú)序列表（Unordered lists）是一個(gè)項(xiàng)目的列表，

17、在列表中每個(gè)項(xiàng)目前面加上列表符號(hào)。這種列表也可稱為項(xiàng)目列表。此項(xiàng)目列表使用粗體圓點(diǎn)（典型的小黑圓圈，屬于默認(rèn)設(shè)置）、方塊、圓圈進(jìn)行標(biāo)記。 第一項(xiàng) 第二項(xiàng) 第三項(xiàng) 值 示例 disc（默認(rèn)）圓點(diǎn) square小方塊 circle圓環(huán) 創(chuàng)建一個(gè)無(wú)序列表要用方塊來(lái)標(biāo)記他的項(xiàng)目符合，可以使用列表的type屬性值“square”，即05 列表標(biāo)簽-無(wú)序列表案例在Dreamweaver中寫(xiě)出標(biāo)題與無(wú)序列表的源代碼05 列表標(biāo)簽-有序列表有序列表（Unordered lists）有序就是有順序。有序列表可以使用數(shù)字（默認(rèn)）、大寫(xiě)字母、小寫(xiě)字母、大寫(xiě)羅馬數(shù)字、和小寫(xiě)羅馬數(shù)字進(jìn)行編號(hào)。 第一項(xiàng) 第二項(xiàng) 第三項(xiàng)創(chuàng)

18、建一個(gè)大寫(xiě)字母 值 示例 1數(shù)字（默認(rèn)） A大寫(xiě)字母 a小寫(xiě)字母 I大寫(xiě)羅馬數(shù)字 i小寫(xiě)羅馬數(shù)字05 列表標(biāo)簽-有序列表案例在Dreamweaver中寫(xiě)出標(biāo)題與有序列表的源代碼05 列表標(biāo)簽-定義列表定義列表（Unordered lists）用于常見(jiàn)問(wèn)題及答案；或者一個(gè)列表包含多個(gè)術(shù)語(yǔ)及不同的解釋，就可以使用定義列表進(jìn)行布局。如：名詞解釋的內(nèi)容05 列表標(biāo)簽-定義列表案例在Dreamweaver中寫(xiě)出標(biāo)題與定義列表的源代碼06 html5媒體元素在網(wǎng)頁(yè)上插入音頻、視頻可以使其顯得更生動(dòng)。如object對(duì)象標(biāo)簽、embed嵌入對(duì)象。Html5增加了一些多媒體和交互元素，幫助我們更好的顯示音頻或視

19、頻，如video視頻播放audio聲音播放source媒體元素等06 html5媒體元素Object對(duì)象該元素用來(lái)將各式各樣的資料配置到網(wǎng)頁(yè)中，例如影像、圖片、動(dòng)畫(huà)、甚至word文件等。Html5刪除了html4中object元素的很多屬性，支持html5的屬性如下表屬性 屬性說(shuō)明data必要屬性，指定對(duì)象數(shù)據(jù)源的URL，在html4標(biāo)準(zhǔn)中，若屬性值為相對(duì)URL，將以codebase屬性的屬性值為基準(zhǔn)URLtypedata屬性所指定的數(shù)據(jù)的mime形態(tài)uesmap將對(duì)象設(shè)定為客戶端的影像地圖，URL格式為”#mapname”，其中mapname對(duì)應(yīng)于map元素的id屬性值width指定對(duì)象的寬

20、度，屬性至可為正整數(shù)的像素值或這百分比值height指定對(duì)象的高度，屬性至可為正整數(shù)的像素值或這百分比值06 html5媒體元素embed對(duì)象該元素用來(lái)嵌入對(duì)象，如多媒體對(duì)象flash。該元素為一個(gè)空元素，是一個(gè)單標(biāo)簽。語(yǔ)法規(guī)則如下：。屬性 屬性說(shuō)明Src必要屬性，指定嵌入對(duì)象的來(lái)源路徑type嵌入對(duì)象的mime類型width指定對(duì)象的寬度，屬性至可為正整數(shù)的像素值或這百分比值height指定對(duì)象的高度，屬性至可為正整數(shù)的像素值或這百分比值06 html5媒體元素video對(duì)象該元素是用來(lái)播放視頻的元素。但因各個(gè)瀏覽器在 video元素的可播放影片格式方面支持不一致，若要讓我們的網(wǎng)頁(yè)文件能夠兼

21、容各種主流瀏覽器，并通過(guò)video元素來(lái)播放影片，則至少需準(zhǔn)備*ogg、*ogv、*mp4、*m4v這些類型的影片語(yǔ)法規(guī)則如下：。src設(shè)置影片播放來(lái)源路徑。屬性值僅能為單一來(lái)源的URL，不可復(fù)數(shù)指定poster指定影片開(kāi)始播放前顯示的預(yù)覽圖片來(lái)源URLautoplay設(shè)置或返回是否在就緒（加載完成）后隨即播放視頻。若不加此屬性，當(dāng)影片文件成功加載時(shí)在是并不會(huì)自動(dòng)開(kāi)始播放loop設(shè)置或返回視頻是否應(yīng)在結(jié)束時(shí)再次播放。未加屬性時(shí)，結(jié)束后會(huì)停止播放，反之，則重復(fù)播放。preload設(shè)定影片是否要預(yù)先加載。取值可為none，auto，metadatacontrols設(shè)置或返回視頻是否應(yīng)該顯示控件（比

22、如播放/暫停等）。06 html5媒體元素audio對(duì)象同理，該元素是用來(lái)播放聲音的元素。語(yǔ)法規(guī)則如下：。屬性 屬性說(shuō)明src設(shè)置聲音播放來(lái)源路徑。屬性值僅能為單一來(lái)源的URL，不可復(fù)數(shù)指定autoplay設(shè)置或返回是否在就緒（加載完成）后隨即播放聲音文件。若不加此屬性，當(dāng)聲音文件成功加載時(shí)在是并不會(huì)自動(dòng)開(kāi)始播放loop設(shè)置聲音文件是否應(yīng)在結(jié)束時(shí)再次播放。未加屬性時(shí)，結(jié)束后會(huì)停止播放，反之，則重復(fù)播放。preload設(shè)定聲音文件是否要預(yù)先加載。取值可為none，auto，metadatacontrols設(shè)置是否應(yīng)該顯示控件（比如播放/暫停等）。06 html5媒體元素source對(duì)象Sourc

23、e是video與audio元素的子元素?？梢岳胹ource元素來(lái)定義多個(gè)影片、聲音文件來(lái)源。注意：在audio和video元素中，可以同時(shí)使用多個(gè)source元素，由于使用了source屬性，不可再為video和audio設(shè)定src屬性，否則video與audio元素標(biāo)簽的source元素等同無(wú)效。語(yǔ)法規(guī)則如下：屬性 屬性說(shuō)明src設(shè)置影片、聲音播放來(lái)源路徑。屬性值僅能為單一來(lái)源的URL，不可復(fù)數(shù)指定Type指定播放來(lái)源用的mime類型Media指定播放來(lái)源是哪一種媒體或設(shè)備。取值可以是all/aural/ braille/ handheld/ projection /print/tty/t

24、v ENDTHANK YOU人機(jī)交互界面設(shè)計(jì)第五章CSS3詳解目錄01 css3概述02 css的配置方法03 css的聲明及選擇器04 css中的注釋05 css3基本屬性06 css3中的偽類和偽對(duì)象07 css3中的動(dòng)畫(huà)05-01 背景屬性 05-03 列表屬性05-02 文本屬性 05-04 其他常用顯示屬性06-01 常用的css偽類06-02 結(jié)構(gòu)性偽類06-03 偽對(duì)象07-01 2d變形 07-03 3d變形07-02 css3過(guò)渡 07-04 animation動(dòng)畫(huà)01 css3概述Css樣式表優(yōu)點(diǎn)CSS(Cascading Style Sheets)，即層疊樣式表。他用來(lái)設(shè)

25、置網(wǎng)頁(yè)中各種標(biāo)簽的樣式，如設(shè)置文字大小，顏色，行高，背景等等。“層疊”是指當(dāng)在 HTML文件中引用多個(gè)樣式文件時(shí)，瀏覽器將依據(jù)層疊順序及就近原則進(jìn)行處理，以避免發(fā)生沖突。更多的排版和頁(yè)面布局控制?？梢钥刂谱痔?hào)、行距、字間距、邊距、縮進(jìn)等。樣式和結(jié)構(gòu)分離。文本格式和顏色可以獨(dú)立于網(wǎng)頁(yè)結(jié)構(gòu)內(nèi)容部分進(jìn)行配置和存儲(chǔ)。方便修改。若需要更換某個(gè)模塊的字體顏色，只需要修改css樣式里面的文字顏色屬性即可，有利于網(wǎng)頁(yè)維護(hù)。文檔變得更小，提高加載速度。Css從文檔分離出來(lái)后，html的體積會(huì)變得更小。CSS3是CSS技術(shù)的升級(jí)版本CSS3語(yǔ)言開(kāi)發(fā)是朝著模塊化發(fā)展的。在css3語(yǔ)言中，增加了更多的新模塊。這些模塊

26、包括： 盒子模型、列表模塊、超鏈接方式 、語(yǔ)言模塊 、背景和邊框 、文字特效 、多欄布局、動(dòng)效等02 css的配置方法嵌入樣式：內(nèi)聯(lián)樣式：不提倡，因?yàn)樗荒芨玫膶?shí)現(xiàn)結(jié)構(gòu)樣式分離，特殊情況下可以使用，只適合該特定元素的特定屬性外部樣式將外部的獨(dú)立的樣式表文件引入到 HTML 文件中。用法：導(dǎo)入樣式：在 HTML 文件初始化時(shí)，會(huì)被全部導(dǎo)入到 HTML 文件內(nèi)，作為文件的一部分import url(外部樣式表文件地址);03 css的聲明及選擇器Css的聲明ss的聲明指的是需要設(shè)置的css屬性（例如顏色）及其值。Css的聲明指的是需要設(shè)置的css屬性（例如顏色）及其值。它有一定的語(yǔ)法規(guī)則。不管是

27、外部鏈接還是嵌入樣式，導(dǎo)入式樣式，聲明css的方法都是一樣的。語(yǔ)法結(jié)構(gòu)如下：選擇符屬性1:屬性值;屬性2:屬性值;03 css的聲明及選擇器Css選擇器標(biāo)簽選擇器id 選擇器類選擇器分組選擇器包含選擇器通配符選擇器03 css的聲明及選擇器標(biāo)簽選擇器我們直接給標(biāo)簽設(shè)置樣式的類型就是標(biāo)簽選擇器例如：acolor:#ff0000;font-size:16px;03 css的聲明及選擇器類選擇器類選擇器也叫class選擇器，語(yǔ)法為:.類名屬性1:屬性值;例如：Css部分：.classcolor:#ff0000;font-size:16px;Html部分：點(diǎn)此鏈接203 css的聲明及選擇器id選擇器

28、但與class不同的是，id名不能重復(fù). #類名屬性1:屬性值;例如：Css部分：#menucolor:#ff0000; font-size:16px;Html部分： 導(dǎo)航03 css的聲明及選擇器分組選擇器當(dāng)多個(gè)選擇器聲明的樣式完全相同時(shí)，可以將他們統(tǒng)一進(jìn)行聲明，各選擇器之間使用英文”,”分開(kāi)語(yǔ)法為：標(biāo)簽1,標(biāo)簽2,標(biāo)簽3屬性1:屬性值;屬性2:屬性值;例如：Css部分：#menu,.red,footercolor:#ff0000;font-size:16px;Html部分：標(biāo)題導(dǎo)航這里是段落1這里是段落2這里是版權(quán)信息03 css的聲明及選擇器包含選擇器需要為一個(gè)容器里面的元素設(shè)置樣式時(shí)，

29、需要使用包含選擇器語(yǔ)法為：父選擇器 子選擇器屬性1:屬性值;屬性2:屬性值;父選擇器和子選擇器之間用空格隔開(kāi)例如：Css部分：p acolor:#ff0000;font-size:14px;Html部分：鏈接1 點(diǎn)擊這里 跳轉(zhuǎn)到首頁(yè) 03 css的聲明及選擇器通配符選擇器它由星號(hào)*來(lái)表示選擇器的名稱，可以定義所有的網(wǎng)頁(yè)元素顯示格式。通配符一般用于統(tǒng)一瀏覽器設(shè)置例如：意思是，將該頁(yè)面的所有標(biāo)簽樣式中的外邊距、內(nèi)邊距重置為0，來(lái)統(tǒng)一瀏覽器樣式*margin:0;padding:0;03 css的聲明及選擇器案例請(qǐng)完成如上圖的html及css樣式03 css的聲明及選擇器優(yōu)先級(jí)當(dāng)有多個(gè)選擇器作用于同

30、一個(gè)元素時(shí)，最終會(huì)使用哪一個(gè)選擇器所設(shè)置的樣式？?jī)?yōu)先級(jí)由高到低為：行內(nèi)樣式 id 選擇器 類選擇器 標(biāo)簽選擇器。若一個(gè)頁(yè)面內(nèi)有不同類型的css文件，css文件的優(yōu)先級(jí)別為：行內(nèi)樣式表 內(nèi)嵌樣式表 鏈接樣式表 導(dǎo)入樣式表。04 css中的注釋注釋為了幫助理解和后期維護(hù)，在css中應(yīng)該有一定的注釋即解釋，這些注釋是不會(huì)對(duì)css代碼產(chǎn)生影響的。如：/*-注釋內(nèi)容-*/html注釋和css注釋可以混用嗎？不行。05 css3基本屬性-背景屬性Css2的背景可以設(shè)置為純色，圖片，重復(fù)；css3的背景有很大程度的突破，如透明度，漸變色，背景剪裁，背景圖片大小，多背景背景顏色可以為顏色名稱的英文。對(duì)應(yīng)的語(yǔ)法

31、為：background-color:blue;可以為顏色對(duì)應(yīng)的16進(jìn)制值。語(yǔ)法為：background-color:#0000ff;可以為顏色對(duì)應(yīng)的rgb值。語(yǔ)法為：background-color:rgb(0,0,255)Css3提供了半透明的顯示。語(yǔ)法顯示為：background-color:rgba(0,0,0,0.6)。05 css3基本屬性-背景屬性背景圖片圖片路徑的設(shè)置與之前插入圖片一樣，分為相對(duì)路徑和絕對(duì)路徑。語(yǔ)法為background-image:url(圖片路徑)背景位置在網(wǎng)頁(yè)中需要將背景圖片放在我們希望的位置，所以可以通過(guò)background-position屬性來(lái)改變默

32、認(rèn)的位置。background-position：top centerbackground-position:10px 10pxbackground-position:50% 50%background-position:left 20px top 10px05 css3基本屬性-背景屬性背景漸變繪制Css3中，支持背景的漸變。線性漸變linear-gradient徑向漸變r(jià)adial-gradient重復(fù)的線性漸變r(jià)epeating-linear-gradient重復(fù)的徑向漸變r(jià)epeating-radial-gradient每一種漸變里面一定會(huì)有漸變方向，角度，起始顏色，終止顏色等用法如下

33、：background:linear-gradient(-90deg,#fff,#333);background: radial-gradient(center,circle,#f00,#ff0,#080);background: radial-gradient (50%,circle,#f00,#ff0,#080);05 css3基本屬性-背景屬性背景滾動(dòng)屬性背景可以被固定在某一處，也可以跟隨網(wǎng)頁(yè)內(nèi)容的滾動(dòng)更滾動(dòng)。用法為：background-attachment：scrool/fixed;背景定位的盒子背景的左上角可以定位在邊框、內(nèi)邊距和內(nèi)容上用法為：background-origin:p

34、adding-box/border-box/content-box背景剪裁屬性背景由邊框開(kāi)始剪裁的意思是，邊框以內(nèi)部分可見(jiàn)，背景由內(nèi)邊距開(kāi)始剪裁的意思是，內(nèi)邊距以內(nèi)部分可見(jiàn)；背景由內(nèi)容開(kāi)始剪裁的意思是，內(nèi)容以內(nèi)部分可見(jiàn)。用法為：background-clip:padding-box/border-box/content-box。05 css3基本屬性-背景屬性背景大小背景大小是css3的新屬性，background-size屬性可以用來(lái)定義背景圖片的尺寸。用法為：background-size:100px 200px/ 40%/cover/content。簡(jiǎn)寫(xiě)背景屬性部分屬性可以簡(jiǎn)寫(xiě)到back

35、ground屬性里面，用法為：background：#00ff00 url(images/01.jpg ) repeat-x top 30px left 30px scroll;05 css3基本屬性案例請(qǐng)完善html及css。將素材提供的bg.jpg放到頁(yè)面中間，并且可以根據(jù)頁(yè)面大小自動(dòng)縮放，不重復(fù)，背景圖片以外填充#dff2f4天藍(lán)色。文字大小為20像素。-背景屬性05 css3基本屬性文字字體網(wǎng)頁(yè)中，文本的顏色，間距行距，字體大小，字體效果多種多樣，我們必須為之排版，才能使網(wǎng)頁(yè)看起來(lái)重點(diǎn)分明，簡(jiǎn)明整潔-文本屬性設(shè)置文字字體屬性為 font-family，基本語(yǔ)法：font-family:

36、字體 1,字體 2,字體 3;文字大小通過(guò)font-size來(lái)控制文字大小，基本語(yǔ)法：font-size:尺寸/百分比/關(guān)鍵字。文字傾斜文字樣式為斜體時(shí)，使用font-style屬性?；菊Z(yǔ)法：font-style:normal/italic/oblique;05 css3基本屬性文字粗體-文本屬性文字需要為粗體顯示時(shí)，使用font-weight屬性?；菊Z(yǔ)法：font-weight:normal/bold/bolder/lighter/number; pfont-weight:bold;文字顏色設(shè)置顏色用color來(lái)定義。用法color:顏色名稱；color:#000000；color:rg

37、b(0,0,255)。英文字異體屬性為font-variant，作用是將所有小寫(xiě)字母轉(zhuǎn)換為小型大寫(xiě)字母，基本語(yǔ)法：font-variant:normal/small-caps; 05 css3基本屬性簡(jiǎn)寫(xiě)屬性-文本屬性與背景屬性一樣，font也有簡(jiǎn)寫(xiě)屬性，用法：font:italic bold 30px 微軟雅黑，文字修飾修飾文字是指為文字添加下劃線、刪除線和上劃線。基本語(yǔ)法：text-decoration: underline|oveline|line-through|blink|none; 英文字母大小寫(xiě)轉(zhuǎn)換該屬性為text-transform，基本語(yǔ)法：text-transform:no

38、ne/capitalize/uppercase/lowercase05 css3基本屬性中文字符間距-文本屬性通過(guò)letter-spacing屬性可以用來(lái)調(diào)整中文字符或英文字符之間的間距，用法：letter-spacing:normal/長(zhǎng)度，英文單詞間距屬性為 word-spacing，用來(lái)調(diào)整英文單詞之間的間距基本語(yǔ)法：word-spacing:normal/長(zhǎng)度; 文本水平對(duì)齊方式text-align可以改變文本行之間的對(duì)齊方式基本語(yǔ)法：text-align:left/right/center/justify05 css3基本屬性段落首行縮進(jìn)-文本屬性通常在段落的首行會(huì)有退格縮進(jìn)，css

39、的表達(dá)方式為text-indent，用法：text-indent:長(zhǎng)度/百分比，行高為了試段落文本看起來(lái)舒服，我們通常會(huì)調(diào)節(jié)行間距，該屬性為line-height基本語(yǔ)法：line-height:normal|數(shù)字|長(zhǎng)度|百分比文本陰影屬性Css3中，使用text-shadow可以為文本增加陰影基本語(yǔ)法：text-shadow:5px 5px 5px #ff000005 css3基本屬性Css3自動(dòng)換行-文本屬性Css3還增加了一個(gè)文本屬性為word-warp，表示可以允許文本在某個(gè)區(qū)域內(nèi)強(qiáng)制換行?？梢詮?qiáng)制將長(zhǎng)單詞拆分，并換行到下一行用法：pword-wrap:break-word;05 cs

40、s3基本屬性案例-文本屬性我們將完成以上視圖，請(qǐng)完善html及css。題目要求，將標(biāo)題設(shè)置字體大小36，文字間距24px，頁(yè)面水平居中。設(shè)置正文字體14px，文字字體為微軟雅黑，英文字體首字母為大寫(xiě)，行高為1.5em，首行縮進(jìn)2em。圣誕節(jié)3個(gè)字設(shè)置下劃線并加粗顯示。05 css3基本屬性設(shè)置列表符號(hào)-列表屬性屬性為 list-style-type，用來(lái)設(shè)置列表項(xiàng)的符號(hào)類型，基本語(yǔ)法：list-style-type:屬性值; 屬性值屬性值說(shuō)明disc黑色圓點(diǎn)，默認(rèn)值circle空心圓圈square黑色正方形decimal 或 1數(shù)字，如：1，2，3，4，lower-roman 或 i小寫(xiě)羅馬文

41、字，如：I，ii，iii，iv，upper-roman 或 I大寫(xiě)羅馬文字，如：I，II，III，IV，V，lower-latin 或 a小寫(xiě)拉丁文，如：a，b，c，zupper-latin 或 A大寫(xiě)拉丁文，如：A，B，C，. Znone不顯示任何符號(hào)05 css3基本屬性設(shè)置列表項(xiàng)圖片-列表屬性可以用圖片美化列表項(xiàng)，其屬性為 list-style-image，語(yǔ)法為：list-style-image:url(圖片地址);設(shè)置列表位置列表項(xiàng)符號(hào)位于文本的左側(cè)，默認(rèn)放置在文本以外，可以通過(guò)調(diào)整位置將其放置到文本以內(nèi)。屬性為 list-style-position，語(yǔ)法為：list-style-

42、position:outside/inside; 。簡(jiǎn)寫(xiě)屬性list-style也有簡(jiǎn)寫(xiě)屬性，語(yǔ)法為：list-style:none url(圖片地址) inside05 css3基本屬性案例-列表屬性完成如圖所示案例，完成html及css部分。在這個(gè)案例中為了美化效果，加入了前面背景、文字部分的css樣式05 css3基本屬性Css其他常用顯示屬性-列表屬性Display屬性display 屬性可以定義元素的顯示類型，屬性值block是以塊狀元素的方式顯示，inline是以內(nèi)聯(lián)元素的方式顯示，none是不顯示。Display：none/block/inline/inlin-blockover

43、flow屬性overflow 屬性規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)發(fā)生的事情overflow：visible/hidden/scroll/autoopacity屬性當(dāng)我們需要對(duì)某些元素表現(xiàn)為半透明效果時(shí)，需要使用到opacity屬性。語(yǔ)法如下：opacity:0.5。取值范圍為0-1，1表示不透明，0表示完全透明。05 css3基本屬性小貼士-列表屬性如何在低版本的瀏覽器中顯示半透明？由于老版本的各個(gè)瀏覽器對(duì)opacity的支持不一致，我們可以通過(guò)瀏覽器前綴使兼容性更好。如Ie8以下filter:alpha (opacity=50)，firefox需要加瀏覽器前綴如-moz-opactiy:0.5。為了

44、滿足所有瀏覽器，需要寫(xiě)5條-webkit-opacity:0.5;/*老safari和老Chrome瀏覽器*/-moz-opacity:0.5;/*低于Firefox0.9版本的*/-khtml-opacity:0.5;/*老式khtml內(nèi)核的Safari瀏覽器*/opacity:0.5;/*IE9以上和所有新版本瀏覽器*/filter:alpha(opacity=50);/*IE4-8*/06 css3中的偽類和偽對(duì)象常用的css偽類所謂“偽“，就是指不是真正的標(biāo)簽，而是依附于結(jié)構(gòu)標(biāo)簽的一種狀態(tài)。我們分為偽類和結(jié)構(gòu)性偽類，以及偽對(duì)象在網(wǎng)頁(yè)中，我們點(diǎn)擊超鏈接，會(huì)改變顏色或者變換樣式，這通常是c

45、ss中稱為偽類的技術(shù)實(shí)現(xiàn)的。屬性值屬性值說(shuō)明:link默認(rèn)鏈接時(shí)的樣式:visited訪問(wèn)過(guò)后的樣式:focus元素獲得焦點(diǎn)時(shí)的樣式:hover鼠標(biāo)經(jīng)過(guò)時(shí)候的樣式:active激活元素是的樣式06 css3中的偽類和偽對(duì)象結(jié)構(gòu)性偽類所謂偽元素選擇器，是指并不是針對(duì)真正的元素使用的選擇器，而是針對(duì)css中已經(jīng)定義好的偽元素使用的選擇器，語(yǔ)法如下，選擇器:偽元素屬性:值偽元素選擇器也可以與類配合使用，語(yǔ)法如下，選擇器 類名:偽元素屬性:值屬性值屬性值說(shuō)明:first-of-type應(yīng)用于指定類型的第一個(gè)元素:first-child應(yīng)用于元素的第一個(gè)子元素:last-of-type應(yīng)用于指定類型的最

46、后一個(gè)元素:last-child應(yīng)用于元素的最后一個(gè):nth-of-type(n)應(yīng)用于置頂類型的第n個(gè)元素，n可以是數(shù)字，或者偶數(shù)（even）奇數(shù)（odd）06 css3中的偽類和偽對(duì)象偽對(duì)象偽元素是對(duì)元素中的特定內(nèi)容進(jìn)行操作。設(shè)計(jì)偽元素的目的就是去選取諸如元素內(nèi)容第一個(gè)字或字母、文本第一行，選取某些內(nèi)容前面或后面這種普通的選擇器無(wú)法完成的工作。它控制的內(nèi)容實(shí)際上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文檔中，所以叫偽元素。屬性值屬性值說(shuō)明:first-letter將樣式應(yīng)用于元素文本的第一個(gè)字或字母:first-line將樣式應(yīng)用于元素文本的第一行:before在元素內(nèi)容的

47、最前面添加新內(nèi)容，與content結(jié)合，見(jiàn)后面案例:after在元素內(nèi)容的最后面添加新內(nèi)容，用法同上p:first-child:first-letter /*第一個(gè)段落里的第一個(gè)字母*/font-size:30px;font-weight:bold;07 css3中的動(dòng)畫(huà)Css3已經(jīng)變得非常強(qiáng)大，以前網(wǎng)頁(yè)里必須靠flash或者js才能實(shí)現(xiàn)的動(dòng)畫(huà)效果，現(xiàn)在可以靠純css代碼就可以完成。結(jié)合js，html5的canvas，還可以做出更炫的動(dòng)畫(huà)。Css3中的動(dòng)畫(huà)效果分為2d變形，3d變形，幀動(dòng)畫(huà)使用該屬性時(shí)，Chrome 和 Safari 需要前綴 -webkit-；Internet Explore

48、r 9 需要前綴 -ms-。2d變形在2維空間中，元素可以被移位，傾斜，縮放，旋轉(zhuǎn)，2d變形工作在X軸和Y軸，也就是我們常說(shuō)的水平軸和垂直軸。07 css3中的動(dòng)畫(huà)-2d變形位移translateTranslate是指的一個(gè)方法，可以簡(jiǎn)單的理解為：使用translate()函數(shù)，你可以把元素從原來(lái)的位置移動(dòng)向x軸y軸移動(dòng)，而不影響在X、Y軸上任何組件。translate()函數(shù)可以取一個(gè)值tx，也可以同時(shí)取兩個(gè)值tx和ty，語(yǔ)法為transform:translate(x,y)縮放scale縮放scale()函數(shù)可以讓元素根據(jù)中心原點(diǎn)進(jìn)行縮放。默認(rèn)值為1。語(yǔ)法為transform:scale(

49、x,y)，其中，x代表水平方向的縮放，y代表垂直方向的縮放。07 css3中的動(dòng)畫(huà)-2d變形旋轉(zhuǎn)rotate旋轉(zhuǎn)rotate()函數(shù)通過(guò)設(shè)定的角度使元素根據(jù)原點(diǎn)進(jìn)行旋轉(zhuǎn)。括號(hào)里面的值表示旋轉(zhuǎn)的幅度。如果這個(gè)值為正值，元素相對(duì)原點(diǎn)中心順時(shí)針旋轉(zhuǎn)；如果這個(gè)值為負(fù)值，元素相對(duì)原點(diǎn)中心逆時(shí)針旋轉(zhuǎn)。rotate()函數(shù)只接受一個(gè)值，其語(yǔ)法如下transform:rotate(deg)。若需要改變?cè)c(diǎn)位置，可以通過(guò)transform-origin屬性重置元素的旋轉(zhuǎn)原點(diǎn)。例：Imgtransform-origin: top left; /*改變?cè)c(diǎn)中心至左上角*/transform: rotate(45de

50、g); /*根據(jù)上訴原點(diǎn)位置順時(shí)針旋轉(zhuǎn)45度*/07 css3中的動(dòng)畫(huà)-2d變形傾斜skew傾斜skew()函數(shù)能夠讓元素傾斜顯示。它可以將一個(gè)對(duì)象以其中心位置圍繞著X軸和Y軸按照一定的角度傾斜。這與rotate()函數(shù)的旋轉(zhuǎn)不同，rotate()函數(shù)只是旋轉(zhuǎn)，而不會(huì)改變?cè)氐男螤?。skew()函數(shù)不會(huì)旋轉(zhuǎn)，而只會(huì)改變?cè)氐男螤睢ＵZ(yǔ)法格式如下：transform: skew(xdeg,ydeg);矩陣函數(shù)matrix不常用，有需要查看參考資料07 css3中的動(dòng)畫(huà)-2d變形案例頁(yè)面最終效果見(jiàn)上，完成html和css07 css3中的動(dòng)畫(huà)-2d變形小貼士為什么在上述案例中transform屬性前

51、面都加上了瀏覽器前綴？根據(jù)不同的內(nèi)核，一些私有屬性的css前綴不一樣。Gecko內(nèi)核即火狐瀏覽器，css前綴為-moz-WebKit內(nèi)核即chrome瀏覽器，safari瀏覽器，搜狗瀏覽器，qq瀏覽器等等，css前綴為-webkit- Presto內(nèi)核即Opera(歐朋)瀏覽器等，css前綴為-o-Trident內(nèi)核即IE，360極速瀏覽器等，css前綴為-ms-IE內(nèi)核即ie瀏覽器，css前綴為“-ms”07 css3中的動(dòng)畫(huà)-3d變形3d位移CSS3中的3D位移主要包括translateZ()和translate3d()兩個(gè)功能函數(shù)。使用三維向量的坐標(biāo)定義元素在每個(gè)方向移動(dòng)多少。其基本語(yǔ)法

52、如下：translate3d(x,y,z)。三維變換使用基于二維變換的相同屬性，如果已經(jīng)掌握了2D變形，就會(huì)覺(jué)得3D變形的功能和2D變換的功能相當(dāng)類似。差別在于X軸和Y 軸之外，還有一個(gè)Z軸07 css3中的動(dòng)畫(huà)-3d變形3d縮放CSS3中的3D縮放主要包括scaleZ()和scale3d()兩個(gè)功能函數(shù)。當(dāng)scale3d()中X軸和Y軸同時(shí)為1，即scale3d(1,1,sz)，其效果等同于scaleZ(sz)。其基本語(yǔ)法如下：scale3d(x,y,z)。scaleZ()和scale3d()函數(shù)單獨(dú)使用時(shí)沒(méi)有任何效果，需要配合其他的變形函數(shù)一起使用才會(huì)有效果，如同時(shí)添加rotateX(45

53、deg)07 css3中的動(dòng)畫(huà)-3d變形3d旋轉(zhuǎn)CSS3中的3D旋轉(zhuǎn)主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四個(gè)功能函數(shù)scaleZ()和scale3d()函數(shù)單獨(dú)使用時(shí)沒(méi)有任何效果，需要配合其他的變形函數(shù)一起使用才會(huì)有效果，如同時(shí)添加rotateX(45deg)除了rotateX()、rotateY()和rotateZ()函數(shù)可以讓一個(gè)元素在三維空間中旋轉(zhuǎn)之外，還有一個(gè)屬性rotate3d()函數(shù)。在3D空間，旋轉(zhuǎn)有三個(gè)程度的自由來(lái)描述一個(gè)轉(zhuǎn)動(dòng)軸。軸的旋轉(zhuǎn)是由一個(gè)x,y,z向量并經(jīng)過(guò)元素原點(diǎn)。其基本語(yǔ)法如下：rotate3d(x,y,z,a)0

54、7 css3中的動(dòng)畫(huà)-3d變形透視perspective屬性3D變形中，有一個(gè)很重要的屬性就是透視屬性，有了透視，立體感就有了，更能說(shuō)明3D。用法如下transform:perspective(500px)注意：傾斜是二維變形，不能在三維空間變形。元素可能會(huì)在X軸和Y軸傾斜，然后轉(zhuǎn)化為三維，但它們不能在Z軸傾斜07 css3中的動(dòng)畫(huà)-css3過(guò)渡變換的屬性名稱transition-propertyCSS 過(guò)渡（transition）是通過(guò)定義元素從 起點(diǎn)的狀態(tài) 和 結(jié)束點(diǎn)的狀態(tài) ，在一定的時(shí)間區(qū)間內(nèi)實(shí)現(xiàn)元素平滑地過(guò)渡或變化的一種補(bǔ)間動(dòng)畫(huà)機(jī)制。通過(guò)transition你可以決定哪個(gè)屬性發(fā)生動(dòng)畫(huà)效

55、果 (可以通過(guò)明確地列出這些屬性)，何時(shí)開(kāi)始動(dòng)畫(huà) (通過(guò)設(shè)置delay), 動(dòng)畫(huà)持續(xù)多久 (通過(guò)設(shè)置duration), 以及如何動(dòng)畫(huà) (通過(guò)定義timing函數(shù)，比如線性地或開(kāi)始快結(jié)尾慢)。下面我們?cè)敿?xì)的進(jìn)行講解可以單獨(dú)指定元素的哪些屬性，如height，width等或者all全部屬性，指定為none時(shí)，動(dòng)畫(huà)立即停止；語(yǔ)法規(guī)則為:選擇器transition-property:none/all/任意元素屬性07 css3中的動(dòng)畫(huà)-css3過(guò)渡過(guò)渡持續(xù)時(shí)間transition-duration用來(lái)指定元素過(guò)渡過(guò)程的持續(xù)時(shí)間，時(shí)間值，1s(秒)，4000ms(毫秒)，其中1000ms=1s。其默認(rèn)

56、值是0s，也可以理解為無(wú)過(guò)渡（transition）效果。語(yǔ)法規(guī)則為:選擇器transition-duration:2s/1000ms;過(guò)渡速率變化transition-timing-function指定CSS屬性的變換速率，簡(jiǎn)單的來(lái)說(shuō)就是先快后慢、先慢后快、勻速還是逐漸變慢。語(yǔ)法規(guī)則為:選擇器transition-timing-function:ease/ease-in-out/linear/ease-in/ease-out;07 css3中的動(dòng)畫(huà)-css3過(guò)渡過(guò)渡延遲時(shí)間transition-delay該屬性指定一個(gè)動(dòng)畫(huà)開(kāi)始執(zhí)行的時(shí)間，即當(dāng)改變?cè)貙傩灾岛蠖嚅L(zhǎng)時(shí)間開(kāi)始執(zhí)行“動(dòng)畫(huà)效果”。語(yǔ)法

57、規(guī)則為:選擇器(transtition-delay:1s/500ms;)transition的簡(jiǎn)寫(xiě)屬性過(guò)渡屬性可以簡(jiǎn)寫(xiě)，即將多個(gè)屬性值寫(xiě)到一個(gè)語(yǔ)句里語(yǔ)法規(guī)則為:Transition:width 2s ease 500ms,boreder 2s linear,background-color 1s ease-in 0.5s07 css3中的動(dòng)畫(huà)-animation動(dòng)畫(huà)Keyframes幀動(dòng)畫(huà)animation確實(shí)非常強(qiáng)大，是css3的一大特色?？梢赃\(yùn)用他完成網(wǎng)頁(yè)里面一些簡(jiǎn)單的動(dòng)畫(huà)。Keyframes的語(yǔ)法：keyframes 動(dòng)畫(huà)名字 0% 屬性1:屬性值1; 屬性2:屬性值2; 20% 屬性1

58、:屬性值1; 屬性2:屬性值2; . 100% 屬性1:屬性值1; 屬性2:屬性值2; 07 css3中的動(dòng)畫(huà)-animation動(dòng)畫(huà)動(dòng)畫(huà)名稱animation-name可以用來(lái)定義一個(gè)動(dòng)畫(huà)的名稱。其語(yǔ)法為animation-name:動(dòng)畫(huà)名;注意：這里的動(dòng)畫(huà)名一定要與keyframes創(chuàng)建的動(dòng)畫(huà)名一致，如果不一致，動(dòng)畫(huà)將不能產(chǎn)生動(dòng)畫(huà)時(shí)長(zhǎng)animation-duration該屬性指元素的動(dòng)畫(huà)持續(xù)時(shí)間，該元素與transition-duration使用方法一樣，取值范圍不再作詳解，如：選擇符:animation-duration:500ms;07 css3中的動(dòng)畫(huà)-animation動(dòng)畫(huà)動(dòng)畫(huà)變換

59、速率animation-timing-function該屬性指元素動(dòng)畫(huà)運(yùn)動(dòng)時(shí)的變換速率，使用方法也與transtion-timing-function相似動(dòng)畫(huà)開(kāi)始時(shí)間animation-delay該屬性用來(lái)指定元素動(dòng)畫(huà)開(kāi)始時(shí)間。與transition-delay使用方法一樣，如：選擇器animation-delay:1s;，表示1s之后執(zhí)行該動(dòng)畫(huà)，其默認(rèn)值也是0。循環(huán)播放次數(shù)animation-iteration-count該屬性用來(lái)指定元素播放動(dòng)畫(huà)的循環(huán)次數(shù)。語(yǔ)法為：選擇器animation-iteration-count:number;，number的取值可以是1，2，.等數(shù)字，默認(rèn)值為”

60、1”,如果需要無(wú)限循環(huán)，擇取值為“infinite”。07 css3中的動(dòng)畫(huà)-animation動(dòng)畫(huà)動(dòng)畫(huà)播放方向animation-direction該屬性用來(lái)指定元素動(dòng)畫(huà)播放的方向，有2個(gè)取值，分別為normal、alternate簡(jiǎn)寫(xiě)屬性animation語(yǔ)法為：animation:animation-name,animation-duration/animation-timing-function/;具體的用法如：animation:pic 2s ease-in 1s infinite alternate; ENDTHANK YOU人機(jī)交互界面設(shè)計(jì)第六章網(wǎng)頁(yè)布局基礎(chǔ)目錄01 盒子模型02