《網頁的基本標籤整理》

• 標題標籤:<h1></h1><h2></h2>~<h6></6>   PS:<h1>~<h6>標籤字型逐漸成從大變小
• 段落標籤:<p>  一個標籤佔一行     //<p>標籤可以巢狀<a>標籤
• 換行標籤:<br/>  換行
• 水平線標籤:<hr/>  一條直線
• 字型樣式標籤：<em></em>字型傾斜     <strong></strong>字型加粗
• 特殊符號:&nbsp空格   &gt小於號  &lt小於號  &quot 引號  &copy版權符號
• <span></span> 標籤:本身沒有什麼屬性,為了凸顯某個部分而制定的標籤

影象標籤:

1. 常見(JPG:畫質清晰，支援透明色，有動畫，,GIF,PNG：兼有JPG,GIF優勢，版本過低的IE不能使用，,BMP：一般不會使用)
2. 語法：<img src="檔案路徑"   alt="影象的代替文字"  title="滑鼠懸停的提示文字"  width="寬度" height="圖片高度"

超連結標籤

• 頁面連結

語法:  <a href="點選該標籤連結到的路徑" target="目標視窗位置">  連結的文字或影象 </a>    //target的屬性值可為:_bland（在另外一個視窗開啟）,_self(在本視窗開啟)

• 錨鏈接: 步驟(建立跳轉標記，建立跳轉連結)

從A頁面的加位置跳轉到本頁面的乙位置

<a name="標記名，可任意填寫">乙位置</a>   //需要跳轉的目的地，也是在建立跳轉標記

<a href="#標記名">甲位置</a>     //跳轉連結 (“#”千萬不要省略)

• 功能性連結

語法：  <a href="mailto:此處填寫電子郵件的地址"> 聯絡我們 </a>   //mailto:代表電子郵件

• 塊元素

無論內容多少，該元素獨佔一行(p,h1~h6..)

• 行內元素

內容撐開寬度，左右都是行內元素的可以排在一行(a,strong,em....)

 

列表(資訊資源的一種展示形式,結構化，條理化)

• 無序列表(前面自帶小圓點或者小方塊)

語法
<ul>
          <li> 此處放文字或者圖片... </li>
          <li> 此處放文字或者圖片... </li>
          <li> 此處放文字或者圖片... </li>
          <li> 此處放文字或者圖片... </li>

     PS:ul下一層一般不能放標籤，但可以在<li>標籤中放其他標籤
     PS:每個<li>獨佔一行
</ul>

2：有序列表(前面有數字)
語法
<ol>
          <li> 此處放文字或者圖片... </li>
          <li> 此處放文字或者圖片... </li>
          <li> 此處放文字或者圖片... </li>
          <li> 此處放文字或者圖片... </li>

     PS:ul下一層一般不能放標籤，但可以在<li>標籤中放其他標籤
     PS:每個<li>獨佔一行
</ol>

3：定義列表
語法
<dl>        //定義列表標籤
       
                    <dt> 水果</dt>
                     <dd>蘋果</dd>
                     <dd>香蕉</dd>
                     <dd>火龍果</dd>
                     <dd>黑布林</dd>
         

</dl>

----表格
語法

<table>                                   //定義表格的標籤
                <tr>
                           <th></th>     //th代表表格的每一列的標題(此處代表第一行的第一列的標題)
                           <th></th>
                           <th></th>

                 </tr>

               <tr>                          //tr代表行(此處代表第一行)
                         <td    colspan="所跨的列數"></td>               //td代表列(此處代表第一行的第一列)
                         <td></td>               //第一行的第二列
                         <td></td>
                </tr>
                <tr>                             //第二行
                           <td  rowspan="所跨的行數"></td>
                            <td></td>
                            <td></td>
                </tr>
 
</table>
PS:rowspan是跨行屬性  colspan是跨列屬性  跨完行或者列之後記得刪除不需要存在的行或列

----視訊，音訊元素
視訊:    <video src="視訊路徑"  controls>       

            </video>   //controls代表帶有播放暫停的控制元件

音訊     <audio src="音訊路徑"   controls> 

             </audio>

自動播放屬性:autoplay
如 :<audio src="音訊路徑"   autoplay> 

             </audio>

解決播放音訊和視訊不能相容的問題
<video  autoplay>

                 <source src="其中一種格式的視訊格式路徑"  type="video/視訊檔案格式字尾"/>
                 <source src="另外一種格式的視訊格式路徑"  type="video/視訊檔案格式字尾"/>
                 <source src="..........................................."  type="video/視訊檔案格式字尾"/>

</video>

----網頁佈局的結構元素
<header></header>    標題頭部區域的內容
<footer></footer>       網頁尾步區域的內容
<section></section>    web頁面中的一塊獨立區域
<article></article>       獨立的文章內容
<aside></aside>          常用於側邊欄
<nav></nav>               導航類輔助內容

----iframe框架(在該框架(區域內)顯示某個網頁的內容)

<iframe src="引用的頁面地址"  name="框架的名字"></iframe>

點選某個a標籤將a標籤連結的網頁顯示在iframe框架內
<a  href="網頁的地址"  target="iframe框架名">點選我</a>
<iframe    name="iframe框架名"   width="框架寬度" height="高度"  src="網頁的地址" ></iframe>

----表單元素
——————————————————————————————————————————————————————
表單元素（常見的表單元素有13中）

<Form  method=""   action="">     

//     Form:表單元素的標籤
//     method:提交方式    1,get(資訊會顯示在位址列，不安全)      2,post(資訊不會顯示在位址列中，比較安全) 
//     action:資料提交的地址

常見的Form表單型別有:text(文字框)  password(密碼框)  radio(單選按鈕)  checkbox(複選框) 
 
submit(提交按鈕)  reset(重置按鈕) email(郵箱框) url(地址框)  number(數字框)  select列表框

range(滑塊)  select(選擇框)  textare(文字域)

value:用於radio時value必須指定一個值
size: 用於text,password   表單元素的初始寬度
maxlength:用於text,password    輸入的最大字元數
checked:用於radio,checkbox   按鈕是否被選中  

<input name="表單的名字" type="text" placeholder="佔位符"   maxlength="輸入最大字元數" >    //文字框
<input name="表單的名字" type="text" placeholder="佔位符"  maxlength>    //密碼框

<input name="表單的名字" type="radio"  name="a" value="男" checked/>男   單選框
<input name="表單的名字" type="radio"  name="a" value="女" checked/>女   單選框

<input type="checkbox"  name="a" value="sport"  checked/>運動
<input type="checkbox"  name="a" value="interest"  checked/>聊天       //複選框
<input type="checkbox"  name="a" value="play"  checked/>玩遊戲

<select name="列表名稱" size="行數">
                                                              //列表框
       <option value="選項的值" selected:預設選中></option>    
       <option value="選項的值"></option>
       <option value="選項的值"></option>
  
</select>

<input type="reset" name="表單名字" value="表單上的預設值"/>     //重置按鈕
<input type="submit" name="表單名字" value="表單上的預設值"/>    //提交按鈕 
<input type="button" name="表單名字" value="表單上的預設值"/>    //普通按鈕    
<input type="image" src="圖片的路徑"/>                          //圖片按鈕

<input name="表單的名字" type="submit" value="按鈕上的預設值" >  //提交按鈕
<input name="表單的名字" type="reset" value="按鈕上的預設值" >    //重置按鈕

<input type="email"  name="表單的名字" />        //郵箱輸入框(自動驗證Email地址是否正確)
<input type="number" name="表單的名字" min="允許輸入的最小值" max="允許輸入的最大值" step="合法的數字間隔"/>            //數字輸入框(自動驗證是否輸入的是數字)
<input type="range" name="表單名字" min="允許的最小值"value="預設初始值"  max="允許的最大值" step="合法的數字間隔"/>  //滑塊表單
<input type="search" name="表單名字"> />                               //搜尋框

</Form>

——————————————————————————————————————————————————————————
----表單的高階應用
隱藏域 <input  type="hidden"  value="預設值" name="表單名稱">
只讀  <input  type="text" name="表單名" value="文字框預設值" readonly> 
禁用 <input type="submit" disabled value="儲存" >
滑鼠焦點的轉移  <lable for="male">標註的文字</lable>
                          <input type="radio" name="表單名" id="male"/>

----表單的初級驗證(placeholder,required,pattern)

placeholder適合用於text,search,url,email,password等型別
<input  type="search" name="表單名" placeholder="提示使用者要輸入的資訊型別">

required:規定文字框填寫內容不能為空,否則不允許使用者提交表單,適合用於,input標籤h
<input type="text" name="表單名" required>

pattern:驗證規則(正則表示式)
<input type="text" name="表單名" required pattern="^1[358]\d{9}]"/>

《CSS》(Cascading Style Sheet)（表現HTML或XHTML檔案樣式的計算機語言）(美化網頁)

CSS的優勢
1:內容與表現分離
2：網頁的表現統一，容易修改
3：減少網頁的程式碼量，增加網頁的瀏覽速度，節省網路寬頻
——————————————————————————————————————————————————————
----CSS基本語法結構

選擇器{                          h1{
               宣告1；                     font-size:12px;
               宣告2;                        color:#F00;
        }                                }

----style標籤

<style>

               h1{
                     font-size:12px;
                     color:#Foo;
                   }

</style>

----CSS引入樣式表(行內樣式，內部樣式表，外部樣式表)
 
行內樣式:使用style屬性引入CSS樣式
<h1 style="color:red">style屬性的應用</h1>
<p style="font-size:14px;color:green;">直接在HTML標籤中設定的樣式</p>
 

內部樣式:CSS程式碼寫在<head>的<style>標籤中

<style>
     
                  h1{color:green}
      
</style>

外部樣式表：CSS程式碼儲存在副檔名為.css的樣式表中   HTML檔案引用副檔名為.css的樣式表有兩種方式(連結式(主要 )，匯入式)

連結式:
<head>
          <link href="css檔案路徑"  rel=“stylesheet”  type="text/css" />
</head>

匯入式:
<head>
           <style>
                    @import  url("style.css");
             </style>
</head>

行內樣式，內部樣式表，外部樣式表的優先順序☆☆☆☆☆

行內樣式>內部樣式表>外部樣式表  （就近原則）

----CSS3基本選擇器(標籤選擇器，類選擇器，ID選擇器)

標籤選擇器(HTML標籤作為標籤選擇器的名稱) 
eg:   p{font-size:16px}

類選擇器
eg:    <p    class="類名稱" >標籤內容</p> 
          .類名稱{font-size:16px;}

                                                                    PS:id選擇器不能像類選擇器一樣重複使用，是唯一的
                                
ID選擇器
eg      <p    id="id名稱" > 標籤內容</p>
          #id名稱{font-size:16px;}

ID選擇器，類選擇器，標籤選擇器的優先順序☆☆☆☆☆

ID選擇器>類選擇器>標籤選擇器  （與就近原則沒有一點關係）

-----CSS3高階選擇器(層次選擇器，結構偽類選擇器，屬性選擇器)

層次選擇器

選擇器    型別                               功能描述       
 
E  F   後代選擇器          選擇匹配F元素，且匹配的F元素被包含在匹配的E元素內    eg:  body  p{background:red}

E>F   子選擇器             選擇匹配的F元素，且匹配的F元素是匹配的E元素後面

E+F   相鄰兄弟選擇器   選擇匹配的F元素，且匹配的F元素緊位於匹配的E元素後面

E~F    通用兄弟選擇器   選擇匹配的F元素，且位於匹配的E元素後的所有匹配的F元素 

結構偽類選擇器 

選擇器                                                            功能描述

E:first-child                                        作為父元素的第一個子元素的元素E

E:last-child                                         作為父元素的最後一個子元素的元素E

E F:nth-child(n)                                     選擇父集元素的第n個子元素F,(n可以是1,2,3), 關鍵字為even(偶數),odd(基數)

E:first-of-type                                      選擇父元素內具有指定型別的第一個E元素

E:last-of-type                                       選擇父元素內具有指定型別的最後一個E元素  

E F:nth-of-type(n)                                   選擇父元素內具有指定型別的第n個F元素

E F:nth-child(n) 和 E F:nth-of-type(n)的區別☆☆☆☆☆

 E F:nth-child(n)在父級裡從第一個元素開始查詢,不分型別
 E F:nth-of-type(n)在父級裡先看型別,再看位置

屬性選擇器
選擇器                                                            功能描述
E[attr]                                                     選擇匹配具有屬性attr的E元素

E[attr=val]                                                 選擇匹配具有屬性attr的E元素,並且屬性值為val(其中val區分大小寫)

E[attr^=val]                                                選擇匹配元素E,且元素定義了屬性attr,其屬性值是以val開頭的任意字串

E[attr$=val]                                                選擇匹配元素E,且E元素定義了屬性attr,其屬性值是以val結尾的任意字串

E[attr*=val]                                                選擇匹配元素E,且元素定義了屬性attr,其屬性值包含了"val",換句話說,字串val與屬性值中的任意位置相匹配

——————————————————————————————————————————————————————

<網頁的編輯基本屬性>
-----------------------------------------------------------------------------------------------------------------------------

☆字型樣式

屬性名                                 含義                                                       舉例

font-family                          設定字型型別                                              font-family:"隸書";

font-size                            設定字型大小                                              font-size:12px;

font-style                           設定字型風格                                              font-style:italic;

font-weight                          設定字型風格                                              font-weight:bold;

font                                 在一個宣告中設定所有字型的屬性                             font:italc bold 36px "宋體";

☆☆☆文字樣式

屬性名                                 含義                                                       舉例     

color                                設定文字顏色                                               color:#00c;   屬性值形式:rgb(紅色成分,綠色成分,藍色成分),rbga((紅色成分,綠色成分,藍色成分,透明度))

text-align                           設定元素水平對齊方式                                       text-align:right;

text-indent                          設定首行文字的縮排                                         text-indent:20px;

line-height                          設定文字的行高                                             line-height:25px;

text-decoration                      設定文字的裝飾                                             text-decotation:underline;

vertical-align                        垂直對齊方式                                             vertical-align:middle;

text-shadow                            文字陰影                                                   text-shadow:color x-offest   y-offset  blur-radius;

☆☆☆文字樣式屬性及屬性值詳解

水平對齊方式(text-align)

值                                                                                      說明
left                                                                   把文字排列到左邊：預設值由瀏覽器決定

right                                                                 把文字排列到右邊

center                                                               把文字排列到中間

justify                                                               實現兩端對齊文字效果

首行縮排(text-index)
值                                                                                      說明
2px                                                                     首行縮排2px畫素

2em                                                                    首行縮排2倍指定的字型大小個畫素

行高(line-height)
值                                                                                      說明
px                                                                         行與行之間的距離
 

文字裝飾(text-decoration) 
值                                                                              說明
none                                                                    預設值，定義的標準文字

underline                                                             設定文字的下劃線

overline                                                                設定文字的上劃線
 
line-through                                                         設定文字的刪除線

垂直對齊方式(vertical-align)
值                                                                              說明
middle                                                              讓兩個元素垂直居中對齊

top                                                                    讓兩個元素頂端對齊

bottom                                                             讓兩個元素低端對齊

文字陰影(text-shadow:color  x-offset  y-offset  blur-radius)
值                                                                              說明
color                                                                     陰影顏色

x-offset                                                              用來指定陰影水平位移量
 
y-offset                                                              用來指定陰影垂直位移量

blur-radius                                                         陰影模糊半徑(陰影向外模糊的模糊範圍)

 ☆☆☆背景樣式

背景顏色
background-color:背景顏色值   transparent(透明)

背景影象
background-image:url("圖片路徑");

background-repeat屬性
值                                        說明 
repeat                              沿水平和垂直兩個方向平鋪
no-repeat                        不平鋪，即只顯示一次
repeat-x                           只沿水平方向平鋪
repeat-y                           只沿垂直方向平鋪

背景定位
background-position
值                                        說明 
Xpos Ypos                       單位：px,Xpos表示水平位置，Ypos表示垂直位置

X%  Y%                           使用百分比表示背景的位置

X,Y方向關鍵詞                   水平方向的關鍵詞:left,center,right  垂直方向的關鍵詞:top,center,bottom
 
背景屬性
background屬性
 
background:顏色   url(圖片路徑)    圖片重複方式    圖片在X軸方向位置    圖片在Y軸方向位置 ;
background:#ccooo  url(圖片路徑)   no-repeat   280px   center;

背景尺寸
background-size
值                                        說明 
auto                                  預設值，使用背景圖片保持原樣

percentage                       當使用百分值時，不是相對於背景的尺寸大小來計算的。而是相對於元素的寬度來計算的

cover                                 整個背景圖片放大填充整個元素

contain                              讓背景圖片保持本身的寬高比例，將背景圖片縮放到寬度或者高度正好適合所定義背景的區域

contain                                 讓背景圖片保持本身寬高比例

 CSS3背景顏色背景漸變
線性漸變:顏色沿著一條直線過渡(從左到右，從上到下等)
linear-gradient(漸變方向,顏色1,顏色2);   
linear-gradient(position,color1,color2); 

eg:相容webkit核心的瀏覽器
-webkit-liner-gradient(position,color1,color2);  

徑向漸變:圓形或橢圓形漸變，顏色不再沿著一條直線變化，而是從一個起點朝所有方向混合

 ☆☆☆CSS3漸變相容
IE瀏覽器是Trident核心,加字首:-ms-
Chrome瀏覽器是Webkit核心,加字首:-webkit-
Safari瀏覽器是Webkit核心,加字首:-webkit-
Opera瀏覽器是Blink核心,加字首:-o-
Firefox瀏覽器是Mozilla核心,加字首:-moz-

<盒子模型>
邊框(border)

邊框顏色
border-color:上 右  下 左(邊框顏色)    

邊框寬度
border-width
屬性值分別有:thin    medium     thick     畫素值

邊框樣式
border-style
屬性值分別有:none  hidden   dotted  dashed  solid   double

boder簡寫
border1px  red  solid;   1px的紅色實線

外邊距(margin)
margin-top    上外邊距
margin-right   右外邊距
margin-bottom  底部外邊距
margin-left     左外邊距
margin        上 右 下 左 的外邊距

margin:0px auto; 讓元素居中顯示(需要兩個條件：1塊元素 2固定寬度)

內邊距(pading)
清除所有元素的預設內外邊距 
*{padding:0px; margin:0px;}

☆盒子模型的尺寸(box-sizing)
盒子模型總尺寸=border+padding+margin+內容寬度 

box-sizing：content-box(預設值) | border-box(盒子的寬度或高度等於元素內容的寬度或高度)  |inherit(元素繼承父類元素的盒子模型模式)

 ☆圓角邊框(boder-radius)
boder-radius:20px 10px 50px 30px; 四個屬性值按順時針排列（分別表示弧度，左上，右上，右下，左下）

利用border-radius屬性製作圓形的兩個要點
1，元素的寬度和高度必須相同
2,圓角的半徑為元素寬度的一半
例如 boder-radus:50%;  或者 border-radius:(width/2)px;

☆盒子陰影 (box-shadow)
box-shadow:inset(陰影型別:內陰影)  x-offset(x軸位移,指定陰影水平位移量)  y-offset(y軸位移,指定陰影水平位移量)  blur-radius(陰影模糊半徑陰影向外模糊範圍)  color(陰影顏色);
可以設定多個盒子陰影,在前一個陰影后面加逗號，繼續新增
-------------------------------------------------------------------------------------------------------------

《浮動》
☆標準文件流：指元素根據塊元素或行內元素的特性按從上到下，從左到右的方式自然排列，這也是元素預設的排列方式

標準文件流組成
塊級元素(block):<h1>~<h6>,<p>,<div>,列表

內聯元素(inline):<span>,<a>,<img/>,<strong>...
內聯標籤可以包含於塊級標籤中，成為它的子元素，而反過來則不成立

值                                                                                  說明
block                                                                  塊級元素的預設值，元素會被被顯示為塊級元素，該元素前後會帶有換行符

inline                                                                  內聯元素的預設值，元素會被顯示為內聯元素，該元素前後沒有換行符

inline-block                                                        行內塊元素，元素既有內聯元素的特性，也有塊元素的特性

none                                                                    設定元素不會被顯示 

☆浮動(float)

屬性值                                                                                 說明
left                                                                             元素向左浮動

right                                                                           元素向右浮動

none                                                                           預設值，元素不浮動，並會顯示在其文字中出現的位置

清除浮動(clear)
屬性值                                                                                 說明
left                                                                               在左側不允許浮動元素

right                                                                              在右側不允許浮動元素

both                                                                              在左右兩側不允許浮動元素

none                                                                              預設值，允許浮動元素出現在兩側

解決父集邊框塌陷的方法
1，浮動元素後加空div
2，設定父元素的高度
3,父集新增overflow屬性 數排
溢位處理(overflow屬性)
屬性值                                           說明
visible                                     預設值，內容不會被修剪，會呈現在盒子之外
hidden                                    內容會被修剪，並且其餘內容是不可見的
scroll                                       內容會被修剪，但是瀏覽器會顯示滾動條以便檢視其餘內容
auto                                        如果內容被修剪，則瀏 覽器會顯示滾動條以便檢視其餘的內容

父級新增偽類after
父集:after{

 content:"";  /*在clear類後面新增內容為空*/
 display:block; /*把新增的內容轉化為塊元素*/
 clear:both     /*清除這個元素兩邊的浮動*/
}

定位網頁元素
position屬性

值                                                                              說明                                      
static                                                                      預設值，沒有定位，按標準流排列

relative                                                                   相對定位,相對於自身原來的定位(偏移設定top,bottom,right,left)

absolute                                                                 絕對定位

fixed                                                                        固定定位

☆相對定位元素的規律(relative)  偏移設定:left,right,top,bottom
設定相對定位的盒子會相對它原來的位置，通過指定偏移，到達新的位置

設定相對定位的盒子仍在標準文件流中，它對父級盒子和相鄰的盒子都沒有任何影響

設定相對定位的盒子原來的位置會被保留下來

層級提高

☆絕對定位 (absolute) 偏移設定:left,right,top,bottom
使用了絕對定位的元素以它最近的一個"已經定位"的"祖先元素"為基準進行偏移

如果沒有已經定位的祖先元素，會以瀏覽器視窗為基準進行定位

絕對定位的元素從標準文件流中脫離，這意味著他們對其他元素的定位不會造成影響
(元素位置發生偏移後，它原來的位置不會被保留下來)(層級提高)

☆固定定位(fixed) 偏移設定:left,right,top,bottom
類似絕對定位，不過區別在於定位的基準不是祖先元素，而是瀏覽器視窗

☆☆定位的總結
相對定位的特性
相對於自己的廚師位置來定位
元素髮生偏移後，它原來的位置會被保留下來
層級提高。可以把標準文件流中的元素及浮動元素蓋在下邊

相對定位的使用場景
相對定位一般情況下很少自己單獨使用，都是配合絕對定位使用，為絕對定位創造定位父級而又不設定偏移量

絕對定位的特性
絕對定位是相對於它的定位父級的位置來定位,如果沒有設定定位父級，則相對瀏覽器視窗來定位
元素位置發生偏移後，原來的位置不會被保留
層級提高，可以把標準文件流中的元素及浮動元素蓋在下邊
設定絕對定位的元素脫離文件流

絕對定位的使用場景
一般情況下，絕對定位用在下拉選單，焦點圖輪播，彈出數字氣泡，特別花邊等場景

固定定位的特性
相對瀏覽器視窗來定位
偏移量不會隨滾動條的移動而移動

固定定位的使用場景
一般在網頁中被用在視窗左右兩邊的固定廣告，返回頂部圖示，吸頂導航欄等

調整元素定位是重疊層的上下位置(z-index)屬性
z-index屬性：整數，預設值為0
設定了positon屬性時，z-index屬性可以設定各元素之間的重疊高低關係
z-index值大的層位於其值小的層上方

網頁元素透明度
屬性                                            說明                                                   舉例
opacity:x                                  x值為0~1，值越小越透明                  opacity:0.4;
filter:alpha(apacity=x)            x值為0~100，值越小越透明              filter:alpha(apacity=40);

網頁中的元素都含有兩個堆疊層級
未設定絕對定位時所處的環境,z-index是0
設定絕對定位時所處的堆疊環境，此時層的位置由z-index的值確定

改變設定絕對定位和沒有設定絕對定位的層的上下堆疊順序，只需調整絕對定位層的z-index值即可

利用CSS製作網頁動畫
☆☆☆CSS3變形:(是一些效果的集合，如平移，旋轉，縮放，傾斜效果)
每個效果都可以稱為變形(thransform),它們可以分別操控元素髮生平移，旋轉，縮放，傾斜等變化

transform:[tr orm-function]*;( 設定變形函式，可以是一個，也可以是多個，中間以空格分開)
在網頁中實現動畫的效果方式:動態圖片,flash,javascrip

變形函式
translate():平移函式，基於X,Y座標重新定位元素的位置  eg:translate(tx,ty); tx:橫座標移動向量長度，ty:縱座標移動的向量
scale();縮放函式，可以使任意元素物件尺寸發生變化  eg:scale(sx,sy);  sx:橫向座標方向的縮放量 sy:縱座標的縮放量  如果只寫一個值則第二值預設等於第一個值
rotate();旋轉函式，取值是一個度數值   eg:totate(a) 引數a使用deg a為正數，旋轉為順時針
skew();傾斜函式，取值是一個度數值  eg:skew(ax,ay); ax:水平方向的傾斜角度 ay:垂直方向的傾斜角度

☆☆☆CSS3過渡
transition:[transitiion-property transition-duration transition-timing-function transition-delay]
transitiion-property:過渡或動態模擬的CSS屬性
transition-duration:完成過渡所需要的時間
transition-timing-function:指定過渡函式
transition-delay:過渡開始出現的延遲時間

過渡屬性(transition-property)
定義轉換動畫的CSS屬性名稱
IDENT:指定的CSS屬性(width,height,background-color屬性等)
ALL：指定所有元素支援transition-property屬性的樣式，一般為了方便都會使用all

過渡所需的時間(transition-duration)
定義轉換動畫的時間長度，即從設定舊屬性到換新屬性所花費的時間，單位為秒(s)

過渡動畫的函式(transition-timing-function)
指定瀏覽器的過渡速度，以及過渡期間的操作進展情況，通過給過渡加一個函式來指定
動畫的快慢方式
ease:速度由快到慢(預設值)
linear:速度恆速(勻速運動)
ease-in:速度越來越快(漸顯效果)
ease-out:速度越來越慢(漸隱效果)
ease-in-out:速度先加快再減速(漸顯漸隱效果)

過渡延遲時間(transition-delay)
指定一個動畫開始執行的時間，當改變元素屬性值後多長時間去執行過渡效果
正值:元素過渡效果不會立即觸發,當過了設定的時間後才會被觸發
負值:元素過渡效果會從該時間點開始顯示，之前的動作被截斷
0:預設值,元素過渡效果立即執行

過渡的觸發機制
偽類觸發
hover
active
focus
checked

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

javaScript觸發:用JavaScript指令碼觸發

☆使用transition實現過渡動畫的使用步驟
在預設樣式中宣告元素的初始狀態樣式
宣告過渡元素最終狀態樣式，如懸浮狀態
在預設樣式中通過新增過渡函式，新增一些不同的樣式

☆☆☆CSS3動畫
animation動畫簡介
animation實現動畫主要由兩個部分組成
1.通過Flash動畫的關鍵幀來宣告一個動畫
2.在animation屬性中呼叫關鍵幀宣告的動畫實現一個更為複雜的動畫效果

CSS3動畫使用過程(注意瀏覽器相容問題)_
1.設定關鍵幀
@keyframes INDENT{    //INDENT是關鍵幀的名字

from { /* CSS樣式寫在這裡*/}           //開始
percentage{/*CSS樣式寫在這裡*/}   //中間
to{/*CSS樣式寫在這裡*/ }                  //結束

}

eg:
@keyframes spread{    //INDENT是關鍵幀的名字
0% { width:0px;}           //開始
25%{width:23px;}   //中間
50%{width:50px;}   //中間
100%{width:69px;}                  //結束
}

@keyframes的瀏覽器相容性
寫相容的時候瀏覽器字首是放在@keyframes中間
eg: @-webkit-keyframes

2.呼叫關鍵幀
animation:animation-name  animation-duration  animation-timing-function
                  animation-delay   animation-iteration-count  animation-direction
                  animation-play-state  animation-fill-node;

animation-name:由@keyframes建立的動畫名稱
animation-duration:動畫時間
animation-timing-function:動畫方式
animation-delay:延遲時間

animation-iteration-count :動畫播放次數
預設常為整數,預設值為1
特殊值為infinite,表示動畫無限次播放

animation-direction:動畫的播放方向
normal,動畫每次都是迴圈向前播放
alternate,動畫播放為偶數次則向前播放

animation-play-state:動畫的播放狀態
running將暫停的動畫重新播放
paused將正在播放的元素動畫停下來

animation-fill-node:動畫開始之前和結束之後發生的操作
forwards,動畫在結束後繼續應用最後關鍵幀的位置
backwards,向元素應用動畫樣式時迅速應用動畫的初始幀
both,元素動畫同時具有forwards和backwords的效果

CSS3動畫製作步驟
1.設定關鍵幀
2.應用關鍵幀