一、HTML5基礎

1、HTML概述

HTML: Hyper Text Markup Language 超文字標記語言

超文字: 比普通文字功能更加強大,可以新增各種樣式

標記語言: 通過一組標籤.來對內容進行描述. <關鍵字> , 是由瀏覽器來解釋執行

2、HTML語法規範

標籤：不區分大小寫，但是建議用小寫

<!--
	1. 上面是一個文件宣告 
	<meta charset="UTF-8"/>設定字符集編碼
	2. 根標籤 html
	3. html檔案主要包含兩部分. 頭部分和體部分
		頭部分 : 主要是用來放置一些頁面資訊
		體部分 : 主要來放置我們的HTML頁面內容
	4. 通過標籤來對內容進行描述,標籤通常都是由開始標籤和結束標籤組成  
	5. 標籤不區分大小寫, 官方建議使用小寫
-->
 

3、基本標籤

<p></p>:標題標籤
<br/>換行
<hr/>水平線
<strong></strong>加粗
<en></en>傾斜

4、特殊符號轉義

空格	大於號	大於號	引號	版權符號（©）
 	>	<	"	&copy

5、影象標籤

<img src="" alt=""/>

​ 常用的屬性;

​ width : 寬度

​ height: 高度

​ src : 指定檔案路徑

​ alt: 圖片載入失敗時的提示內容

注意：img標籤是塊集標籤，但是可以設定行高和寬高

6、檔案路徑

​ ./ 代表的是當前路徑
​ …/ 代表的上一級路徑
​ …/…/ 上上一級路徑

7、超連結標籤

<a href="超連結路徑" target="_blank"></a>

• 其中target為在哪個視窗開啟：_self為預設在本頁面開啟

_blank在新視窗開啟

• 去除超連結下劃線：text-decoration：none

• href=#表示連結到當前頁面

• 超連結的應用場合

  1. 頁面間連結：A頁到B頁

  2. 錨鏈接

     同頁面內容的相互跳轉：

     • 在頁面乙位置放置標記，可以設定name或者id用a標籤包裹，然後在需要超連結的位置放上#加name的值即可

     <a name="login">登入</a>
     <a href="#register">[新使用者註冊幫助]</a>
     

     • 在不同頁面的錨鏈接

        <a href="help.html#register">[新使用者註冊幫助]</a>
        <a name="login">登入</a>
       

  3. 功能性連結

     加上mailto：郵箱地址

8、行內元素和塊級元素

• 行內元素除了img無法設定寬高：span、a、img、strong
• 款即元素前後有空行獨佔一行：h、p、div、列表

9、去除網頁中所有的預設樣式

*{padding:0;margin:0;}

a{text-decoration:none;color:#fff;}

10、HTML5的結構元素

header	footer	section	aside	nav	article
標題頭部的內容	腳部區域的內容	web頁面中間大區域	側邊欄	導航類輔助內容	獨立的文章內容

11、內部框架標籤iframe

src屬性，指定容器預設顯示內容

name指定框架的名稱

hight：高

在a標籤中的target可以選擇iframe的name，這樣會將內容放入iframe容器中顯示，不再跳轉到其他地方

12、框架標籤:frameset：

注意: 使用了frameset必須將body刪掉,否則頁面會有問題

二、列表

1、是塊級元素

2、分類

• 無序列表

  ul無序列表定義

  li列表內容

  type:

  1. 實心圓（預設）：disc
  2. ,空心圓circle
  3. 小方塊square
  4. 去掉專案符號：null

• 有序列表

  ol有序列表定義

  li列表內容

  type: 1,a ,A,I,

  ​ start : 指定是起始索引

• 自定義列表

dl——宣告定義列表

dt——宣告列表項

dd——定義列表項內容

3、列表樣式

list-style	list-style-type	list-style-image	list-style-position

三、表格

1、基本概念

• table：

  tr：行

  td列（th代表第一行是定義行會加粗）

  2、常用屬性

• table裡屬性：

  ​ cellspacing：單元格外邊距

  ​ cellpadding：單元格內邊距

  ​ align：水平對齊方式（left、right、center）

  ​ 不能加垂直對齊

  ​ bgcolor : 背景色

• 單元格對齊：

  垂直對齊：valign：（top、middle、bottom）

  水平對齊（left、right、center）

2、表格跨行和跨列

colspan：跨列

rowspan：跨行

三、表單

1、基本定義

<form action="#" method="post">
	<input type="text" name="name" value="請輸入姓名：" id=""
</form>

2、form標籤內屬性

• method：提交方式：post/get

  區別： 安全性、長度限制、URL中資訊量是否拼接

• action: 提交到哪裡，#代表當前頁面

3、input標籤

A、type型別

• text、password、radio（單選框）、CheckBox（複選框）、
• 按鈕（有提交功能）：button（普通按鈕）

​ reset（重置按鈕）

​ image（圖片按鈕）

​ submit（提交按鈕）

• file文字域

  單獨的一種提交方式，需要在form中新增 enctype=“multipart/form=data”

• hidden隱藏域

  通過指定的value屬性，可用作後臺處理資料，但是不需用顯示出來

  • 不常用的：email、url、rang（範圍，可設定max、min和步長step）、number （數量）、datetime-local（時間日期）

B、name

最好加name，否則值可能獲取不到

C、value

在框中提示的詞，需要刪除替換的

D、size

輸入框長度

E、maxlength

最大輸入長度

F、readenly

只讀

G、disable

禁用

H、checked

預設值，設定此項為預設選項，在、radio（單選框）、CheckBox（複選框）的時候常用

I、placeholder

提示資訊（表單驗證）

J、required

不能為空，必填（表單驗證）

K、patterrn

patterrn=“正則表示式”（表單驗證）

4、select下拉列表

<select name="a"  id="c" size=3>
    <option value="2001" selected></option>
</select>

selected是預設選擇的是哪一個

size為列表有幾行

5、textarea

條款，條約

可以設定cols和rows設定顯示列和行數

6、label標註

表單標註，語法為：

<label for=""></label>

for裡面加上id

常用於單選、複選為文字新增標註，目的是為了通過點選文字就可以到達對應的框裡面

四、CSS浮動

• 定義：

  浮動的元素會脫離正常的文件流,在正常的文件流中不佔空間

• float屬性:

  ​ left
  ​ right

• style的clear屬性: 清除浮動

  ​ both : 兩邊都不允許浮動
  ​ left: 左邊不允許浮動
  ​ right : 右邊不允許浮動

  ​ 當下面div受到上面浮動影響加一個空的div清除浮動

設定元素的高和行高一樣的就可以讓文字居中

清除浮動，防止父級邊框塌陷的四種方法

​ 1、浮動元素後面加空div

​ 需要將空div清除浮動both

​ 簡單，空div會造成HTML程式碼冗餘

​ 2、設定父元素的高度

​ 簡單，元素固定高會降低擴充套件性

​ 3、父級新增overflow屬性（hidden）

​ 簡單，下拉列表框的場景不能用

​ 4、父級新增偽類after

#father：after{
    content：“”；
    display：block；
    clear：both
}

​ 寫法比上面稍微複雜一點，但是沒有副作用，推薦使用

設定浮動一定記得擴充套件盒子高度

五、CSS選擇器

1、css選擇器

• 元素（標籤）選擇器: 標籤的名稱{}——n標籤選擇器直接應用於HTML標籤，不遵循就近原則

• 類選擇器: 以. 開頭 .類的名稱——n類選擇器可在頁面中多次使用

• ID選擇器: 以#開頭 , #ID的名稱 (ID必須是頁面上面唯一) ——nID選擇器在同一個頁面中只能使用一次

  ​ �{��

2、選擇器優先順序

• 按照選擇器搜尋精確度來編寫:
• 就近原則: 哪個離得近,就選用哪個的樣式
• 行內樣式 > ID選擇器 > 類選擇器 > 元素選擇器

3、css高階選擇器

• 並集選擇器（選擇器分組）

  • : 選擇器1,選擇器2{ 屬性的名稱:屬性的值}
  • 多個選擇器通過逗號連線而成

• 屬性選擇器:

  a[title]     ——title為屬性名
  a[titile='aaa']   ——aaa屬性值
  a[href][title]	——兩個屬性名
  a[href][title='aaa']	——兩個屬性名，一個屬性值
  a[title^=“val”] ——屬性值是以val開頭的
  a[title$=“val”] ———屬性值是以val結尾的
  a[title`=“val”]  _屬性值中包含以val欄位的
  

  層次選擇器包括：後代選擇器、子元素選擇器、相鄰兄弟選擇器、通用兄弟選擇器

• 後代選擇器: E F

  爺爺選擇器 孫子選擇器 找出所有的後代，中間以空格隔開

• 子元素選擇器: E>F

  父選擇器 > 兒子選擇器 ：只能找到父元素的直接後代

• 相鄰兄弟選擇器：E+F

  選擇匹配的F元素，且匹配的F元素緊位於匹配的E元素後面

  如：

  .active+p {  background: green;  }
  會找出在類名為active的類下的第一個p標籤的元素
  

• 通用兄弟選擇器:：E`F

  選擇匹配的F元素，且位於匹配的E元素後的所有匹配的F元素，如：

  .active~p{  background: yellow;  }
  會找出active類名下的所有含有p標籤的元素
  

• 結構偽類選擇器

  • E F:nth-child(n)

    代表查詢父元素E下面的弟n個叫做F的孩子，會按照順序進行排序（不管親兄弟還是堂兄弟，都是兄弟）

  • E F:nth-of-type(n)

    代表去除了型別之後的孩子，親兄弟，在父元素E下面的所有親的弟n個F（去除型別後再排序）

    <head lang="en">
    	<meta charset="UTF-8">
    	<title>使用CSS3結構偽類選擇器</title>
    	<style>
    		/*p:first-child{*/
    			/*background-color: #0000A8;*/
    		/*}*/
    		/*body>p:first-child{*/
    			/*background-color: #0000A8;*/
    		/*}*/
    		body p:nth-of-type(odd){
    			background-color: #0000A8;
    		} 
    		
    		
    		在body下的所有p，並且都是奇數，注意li裡面的p中的p計數是以li裡面各自計數，odd奇數，even代表偶數*/
    		
    	</style>
    </head>
    <body>
    	<p>p1</p>
    	<p>p2</p>
    	<p>p3</p>
    	<ul>
    		<li>
    			<p>li1</p>
    		</li>
    		<li>
    			<p>li2</p>
    		</li>
    		<li>
    			<p>li3</p>
    		</li>
    	</ul>
    </body>
    

• 偽類選擇器: 通常都是用在a標籤上

  a:link {color:black} 未單擊訪問的連結

  a:hover{color:black} 滑鼠懸浮其上的超連結樣式

  a:active {color:black} 滑鼠單擊未釋放的超連結樣式

  a:visited {color:black} 已訪問的連結

• 交集選擇器

  由兩個選擇器連線構成，，選中兩者的交集，兩個選擇器之間不能有交集，第一個必須是標籤選擇器，第二個必須是類選擇器或者id選擇器

六、CSS的常見樣式

1、字型樣式

font-family	font-size	font–style	font-weight	font
設定字型型別	設定字型大小	設定字型風格	設定字型粗細	在一個宣告中設定所有字型屬性

font簡寫，可以按順序設定如下屬性：

font–style：字型風格，italic表示斜體

font–variant

font-weight：粗細

font-size/：字型大小

ine-height：行高

font-family：字型型別，多種字型用逗號隔開，中文字型放在後面，字型名稱為多個字元的時候用引號引起來

一起寫font：分（風格）出（粗細）大（大小）類（型別）

2、文字樣式

color	text-align	text-indent	text-height	text-decoration	vertical-align	text-shadow
文字顏色	元素水平對齊方式	首行文字的縮排1em代表向右縮排1個字元	文字的行高	文字的裝飾（去除超連結預設下劃線用其none值）underline、line-	垂直對齊方式，設定文字和圖片的居中對齊，在使得他的值為	文字陰影，三個值，陰影顏色、X位移、Y位移

3、div標籤

• 網頁佈局
• 排版網頁內容
• 屬性：height、width
• 是塊級元素，預設獨佔一行，兩個div要想在一行顯示就需要浮動

4、css設定滑鼠形狀

5、背景屬性

• 背景顏色：background-color:#B70447

• 背景影象(背景圖會覆蓋背景顏色)

  • 影象路徑：background-image：url(影象路徑)
  • 重複方式：background-repeat:no-reqeat
  • 背景定位：background-position:10px 15px

• 關鍵詞：

  水平方向：left center right

  垂直方向：top ccenter bottom

• css3漸變

  linear-gradinent（tobottom，顏色1，顏色2）

• 背景屬性簡寫（沒有順序要求）：

  background:url(背景圖路徑) no-repeat #f91f1 10px 15px

6、去除網頁中所有的預設樣式

*{padding:0;margin:0;}

a{text-decoration:none;color:#fff;}

7、display屬性

• 控制元素的顯示和隱藏

• 塊級元素與行內元素的轉變

• none	inline	block	inline-block
  設定元素不會被顯示	元素會被顯示為內聯元素	元素被顯示為塊級元素	行內塊元素

注意：

1. block和none結合起來用，可以達到開始隱藏，當滑鼠移上去的時候會顯示圖片或者相關的資訊，如：

   ul li:hover div{

   ​ display:block;

   }

2. inline-block常用於將元素排列一排

七、網頁中引用css樣式

1、行內樣式

就是在標籤後直接寫style屬性如：

<p style="CSS樣式"></p>

2、內部樣式表

指在head上加style標籤，寫css樣式

<style>
    css樣式
</style>

3、外部樣式表

css檔案

在網頁中匯入或者引入外部樣式檔案即可

• 連結式 <link/>屬於XHTML，使用其連線的css檔案先載入到網頁當中，再進行編譯顯示

  <link rel="stylesheet" href="css/first.css"/>
  css檔案樣式
  h1{
      color: #0000FF;
  }
  不用寫style
  

• 匯入式式@import屬於CSS2.1使用其匯入的css檔案，客戶端顯示HTML架構，再把css檔案載入到網頁眾怒幹，是屬於CSS2.1特有的，對於不相容CSS2.1的瀏覽器來說是無效的

  <!--
  @import url("style.css");
  -->
  
  

八、盒子模型

1、邊框border

• 邊框樣式：border-style

  • border-top-style：上邊框樣式 none無邊框
  • border-right-style：右邊框樣式 solid實線邊框
  • border-bottom-style：下邊框樣式 dashed虛線邊框
  • border-left-style：左邊框樣式 dolted點邊框
  • border-style：設定四個邊框樣式 double雙線邊框

• 邊框顏色：border-color

• 邊框粗細：border-width

  • border-top-width（bottom、right、left）

  • border-width

    關鍵字：thin、medium、thick

    畫素值：px

• 邊框簡寫

  同時設定邊框的顏色、粗細和樣式

  border-bottom：9px #F00 dashed；

  border：8px #F00 solid（常用）

2、外邊框margin

兩個盒子之間的距離（都是內盒子）

margin-top（right、left、top）

margin：3px 3px 3px 3px（上、右、下、左）

大元素整體水平居中用margin：0px auto

3、內邊距padding

子盒子和父盒子之間的邊距（比如手機的內部填充物

padding：10px——四個方向都是10px

padding：10px 20px——上下10px，左右20px

padding：10px 20px 30px——上10，右20、下30，左20

padding：10px 20px 30px 40px——上10，右20、下30，左40（按照左右上下）

4、計算盒子模型的尺寸

盒子實際高度=上下外邊距+上下邊框+上下內邊距+內容高度

盒子實際寬度=上下外邊距+上下邊框+上下內邊距+內容寬度

5、box-sizing屬性

content-box：盒子的實際寬度和高度僅適用於元素內容 ，不包括內邊距和邊框

border-box盒子的實際寬度和高度包括元素內容、邊框和內邊距

5、使用overflow屬性擴充套件盒子高度

visible	hidden	scroll	auto
預設值，內容不會被修建，會呈現在盒子之外	內容會被修建，並且其餘內容是不可見的	內容會被修建，但是瀏覽器會顯示滾動條以檢視其餘內容	如果內容被修建，則瀏覽器會顯示滾動條以檢視其餘內容，自動加滾動條

兩種擴充套件盒子高度的區別

• 使用overflow 屬性擴充套件盒子高度減少程式碼量，也減少了空的HTML標籤，使程式碼更加簡潔、清晰，從而提高了程式碼的可讀性和網頁效能
• 如果頁面中有定位元素，並且元素超出了父級的範圍，就必須clear屬性來清楚浮動來擴充套件盒子高度

6、box-sizing

box-sizing：content-box  |  border-box  |  inherit
三個值分別為：預設值，盒子的總尺度
盒子的寬度或高度等於元素內容的寬度或高度
元素繼承父元素的盒子模型模式	

7、圓角邊框

border-radius: 20px  10px  50px  30px;

利用border-radius屬性製作圓形的兩個要點

• Ø元素的寬度和高度必須相同

• Ø圓角的半徑為元素寬度的一半，或者直接設定圓角半徑值為50%

   div{
              width: 100px;
              height: 100px;
              border: 4px solid red;
              border-radius: 50%;
          }
  
  

  u利用border-radius屬性製作半圓形的兩個要點

  • Ø製作上半圓或下半圓時，元素的寬度是高度的2倍，而且圓角半徑為元素的高度值
  • ​ Ø右半圓時，元素的高度是寬度的2倍，而且圓角半徑為元素的寬度值

u利用border-radius屬性製作扇形遵循“三同，一不同”原則

Ø“三同”是元素寬度、高度、圓角半徑相同

Ø“一不同”是圓角取值位置不同

滑鼠懸浮其上，讓其他變色：

a：hover span{}
li：hover a{}

對齊方式：

水平對齊：text-align或者設定外邊距上下為0，左右為auto

垂直對齊：設定行高和高度相等即可

8、盒子陰影

box-shadow:inset  x-offset  y-offset  blur-radius  color
各個引數意義：
陰影型別內陰影
X軸位移，指定陰影水平位移量
Y軸位移，用來指定陰影垂直位移量
陰影模糊半徑陰影向外模糊的模糊範圍
陰影顏色，定義繪製陰影時所使用的顏色
例子：
ul li:hover{box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1), 0 0 10px 0 rgba(0,0,0,0.2);

九、定位position

定位常用用法：

• 在需要定位元素加position：absolute

  ​ top：0px。。。

• 在直接父級加一個無改變位置的position：relative

1、position屬性

static	relative	absolute	fixed
預設值，沒有定位	相對定位	絕對定位	固定定位

2、relative屬性

• 相對自身原來位置進行偏移
• 偏移設定：top、left、right、bottom，單位px
• 設定相對定位的盒子會相對於它原來的位置，通過指定偏移，到達新的位置
• 設定了相對定位的網頁元素，無論是在標準流中還是在浮動流中，都不會對他的父級元素和相鄰元素有任何影響，他只是針對自身原來的位置進行偏移
• 設定相對定位的盒子仍在標準文件流中，它對父級盒子和相鄰的盒子都沒有任何影響
• n設定相對定位的盒子原來的位置會被保留下來
• 相對定位一般情況下很少自己單獨使用，都是配合絕對定位使用，為絕對定位創造定位父級而又不設定偏移量

3、absolute屬性

• 絕對定位
• 決對定位是針對瀏覽器的，如果想要針對父容器定位則要將父容器設定為非static
• n使用了絕對定位的元素以它最近的一個“已經定位”的“祖先元素為基準進行偏移
• 如果沒有已經定位的祖先元素，會以瀏覽器視窗為基準進行定位
• 絕對定位的元素從標準文件流中脫離，這意味著它們對其他元素的定位不會造成影響
• 元素位置發生偏移後，它原來的位置不會被保留下來
• 一般情況下，絕對定位用在下拉選單、焦點圖輪播、彈出數字氣泡、特別花邊等場景

4、fixed

• 固定定位
• 會像狗皮膏藥一樣，儘管網頁上下左右滑動，但是元素在網頁中位置不變
• 類似絕對定位，不過區別在於定位的基準不是祖先元素，而是瀏覽器視窗
• 一般在網頁中被用在視窗左右兩邊的固定廣告、返回頂部圖示、吸頂導航欄等

5、z-index屬性

• 用來調整元素定位時重疊層的上下位置
• z-index屬性值：整數，預設值是0
• 設定了position屬性時，z-index屬性可以設定各個元素之間的重疊高低關係
• zi-index值大的層位於值小的層的上方

6、網頁元素透明度

opacity:x	filter:alpha(opacity=x)
x值為0~1，值越小越透明	x值為0~100，值越小越透明
opacity:0.4;	filter:alpha(opacity=40);

十、css3動畫

1、transform變形

CSS3變形是一些效果的集合

如平移、旋轉、縮放、傾斜效果

transform:[transform-function] *;

設定變形函式，可以是一個，也可以是多個，中間以空格分開

變形函式

translate()：平移函式，基於X、Y座標重新定位元素的位置

scale()：縮放函式，可以使任意元素物件尺寸發生變化

rotate()：旋轉函式，取值是一個度數值

skew()：傾斜函式，取值是一個度數值

案例：製作多彩照片牆：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 800px;
            margin: 0 auto;
            position: relative;
        }
        img{
            padding: 10px;
            border: 1px solid lightgray;
            background-color: white;
            position: absolute;
            width: 45%;
        }
        img:nth-child(1){
            top:150px;
            left: 50px;
            transform: rotate(-15deg);
        }
        img:nth-child(2){
            top:130px;
            left: 200px;
            transform: rotate(30deg);
        }
        img:nth-child(3){
            top:200px;
            left: 500px;
            transform: rotate(-20deg);
        }
        img:hover{
            transform: rotate(0deg) scale(1.3);
            z-index: 1;
            box-shadow: 0 0 5px rgba(0,0,0,0.4);
        }
    </style>
</head>
<body>
<div>
    <img src="image/1.jpg" title="1"/>
    <img src="image/2.jpg" title="2"/>
    <img src="image/3.jpg" title="3"/>
</div>
</body>
</html>

2、transition

• 實現步驟：

  • 設定開始狀態，可不寫
  • 設定結束狀態
  • 新增transition屬性

• transition呈現的是一種過渡，是一種動畫轉換的過程，如漸現、漸弱、動畫快慢等

• CSS3 transition的過渡功能更像是一種“黃油”，通過一些CSS的簡單動作觸發樣式平滑過渡

• 語法：

  transition:[transition-property transition-duration transition-timing-function transition-delay ]

  分別代表含義：過渡或動態模擬的CSS屬性、完成過渡所需要的時間、指定過渡函式、過渡開始出現的延遲時間

• 過渡屬性（ transition-property ）

  定義轉換動畫的CSS屬性名稱

  IDENT：指定的CSS屬性（width、height、background-color屬性等）

  all：指定所有元素支援transition-property屬性的樣式，一般為了方便都會使用all

• n過渡所需的時間（ transition-duration ）

  u定義轉換動畫的時間長度，即從設定舊屬性到換新屬性所花費的時間，單位為秒（s）

• n過渡動畫函式（ transition-timing-function ）

  u指定瀏覽器的過渡速度，以及過渡期間的操作進展情況，通過給過渡新增一個函式來指定動畫的快慢方式

  Øease：速度由快到慢（預設值）

  Ølinear：速度恆速（勻速運動）

  Øease-in：速度越來越快（漸顯效果）

  Øease-out：速度越來越慢（漸隱效果）

  Øease-in-out：速度先加速再減速（漸顯漸隱效果）

• 過渡延遲時間（ transition-delay ）

  指定一個動畫開始執行的時間，當改變元素屬性值後多長時間去執行過渡效果

  Ø正值：元素過渡效果不會立即觸發，當過了設定的時間值後才會被觸發

  Ø負值：元素過渡效果會從該時間點開始顯示，之前的動作被截斷

  Ø0：預設值，元素過渡效果立即執行

• 過渡的觸發機制

  n偽類觸發

  u：hover

  u：active

  u：focus

  u：checked

  u

  n媒體查詢：通過@media屬性判斷裝置的尺寸，方向等

  nJavaScript觸發：用JavaScript指令碼觸發

演示案例：旋轉按鈕：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        ul{
            overflow: hidden;
            border: 1px solid red;
        }
        li{
            list-style: none;
            float: left;
            margin-left: 10px;
            height: 100px;
            line-height: 100px;
            /*1.設定開始的狀態*/
            /*3.新增transition*/
            transition: all 3s ease-in-out -1s ;
        }

        li:hover{
            /*2.設定結束的狀態*/
            transform: rotate(1080deg) scale(1.3);
        }
        li img{
            vertical-align: middle;
        }
    </style>
</head>
<body>
<ul>
    <li><img src="images/delicious.png"/></li>
    <li><img src="images/facebook.png"/></li>
    <li><img src="images/rss.png"/></li>
    <li><img src="images/twitter.png"/></li>
    <li><img src="images/yahoo.png"/></li>
</ul>
</body>
</html>

3、animation動畫

animation實現動畫主要由兩個部分組成

Ø通過類似Flash動畫的關鍵幀來宣告一個動畫

Ø在animation屬性中呼叫關鍵幀宣告的動畫實現一個更為複雜的動畫效果

• 語法：

  animation:animation-name animation–duration animation-timing-function

  animation-delay animation-iteration-count animation-direction

  animation-play-state animation-fill-mode;

  ​ ;mso-ascL

• n動畫的播放次數（animation-iteration-count）

  u值通常為整數，預設值為1

  u特殊值infinite，表示動畫無限次播放

  n動畫的播放方向（animation-direction）

  unormal，動畫每次都是迴圈向前播放

  ualternate，動畫播放為偶數次則向前播放

  n動畫的播放狀態（animation-play-state）

  urunning將暫停的動畫重新播放

  upaused將正在播放的元素動畫停下來

• n動畫發生的操作（animation-fill-mode）

  uforwards表示動畫在結束後繼續應用最後關鍵幀的位置

  ubackwards表示會在向元素應用動畫樣式時迅速應用動畫的初始幀

  uboth表示元素動畫同時具有forwards和backwards的效果