移動web一 - HTML5

一、什么是HTML5

1. HTML5 的概念與定義

定義：HTML5 定義了 HTML 標(biāo)準(zhǔn)的最新版本唬涧，是對 HTML 的第五次重大修改末患，號稱下一代的 HTML
兩個概念：
- 是一個新版本的 HTML 語言放坏，定義了新的標(biāo)簽、特性和屬性
- 擁有一個強(qiáng)大的技術(shù)集玛瘸，這些技術(shù)集是指： HTML5 、CSS3 苟蹈、javascript, 這也是廣義上的 HTML5

2. `HTML5` 拓展了哪些內(nèi)容

語義化標(biāo)簽
本地存儲
兼容特性
2D糊渊、3D
動畫、過渡
CSS3 特性
性能與集成

3. `HTML5` 的現(xiàn)狀

絕對多數(shù)新的屬性慧脱，都已經(jīng)被瀏覽器所支持渺绒，最新版本的瀏覽器已經(jīng)開始陸續(xù)支持最新的特性，
總的來說：HTML5 已經(jīng)是大勢所趨

二菱鸥、`HTML5` 新增標(biāo)簽

1. 什么是語義化

以前布局宗兼，我們基本使用div來做，div對引擎來說是沒有語義的采缚。

2. 新增了那些語義化標(biāo)簽

- `header`   ---  頭部標(biāo)簽
- `nav`        ---  導(dǎo)航標(biāo)簽
- `article` ---   內(nèi)容標(biāo)簽
- `section` ---   塊級標(biāo)簽
- `aside`     ---   側(cè)邊欄標(biāo)簽
- `footer`   ---   尾部標(biāo)簽

yuyibq.png

3. 使用語義化標(biāo)簽的注意

- 語義化標(biāo)簽主要針對搜索引擎
- 新標(biāo)簽可以使用一次或者多次
- 在 `IE9` 瀏覽器中针炉，需要把語義化標(biāo)簽都轉(zhuǎn)換為塊級元素
- 語義化標(biāo)簽，在移動端支持比較友好扳抽，
- 另外篡帕，`HTML5` 新增的了很多的語義化標(biāo)簽殖侵，隨著課程深入，還會學(xué)習(xí)到其他的

三镰烧、多媒體音頻標(biāo)簽

1. 多媒體標(biāo)簽有兩個拢军，分別是

音頻 -- audio
視頻 -- video

2. `audio` 標(biāo)簽說明

可以在不使用標(biāo)簽的情況下，也能夠原生的支持音頻格式文件的播放怔鳖，
但是：播放格式是有限的

3. audio 支持的音頻格式

audio 目前支持三種格式

audio.png

4. audio 的參數(shù)

audiocanshu.png

5茉唉、audio 代碼演示

<body>
  <!-- 注意：在 chrome 瀏覽器中已經(jīng)禁用了 autoplay 屬性 -->
  <!-- <audio src="./media/snow.mp3" controls autoplay></audio> -->

  <!-- 
    因?yàn)椴煌瑸g覽器支持不同的格式，所以我們采取的方案是這個音頻準(zhǔn)備多個文件
   -->
  <audio controls>
    <source src="./media/snow.mp3" type="audio/mpeg" />
  </audio>
</body>

四结执、多媒體視頻標(biāo)簽

1. video 視頻標(biāo)簽

目前支持三種格式

vedio.png

2. 語法格式

<video src="./media/video.mp4" controls="controls"></video>

3. video 參數(shù)

videocanshu.png

4. video 代碼演示

<body>
  <!-- <video src="./media/video.mp4" controls="controls"></video> -->

  <!-- 谷歌瀏覽器禁用了自動播放功能度陆，如果想自動播放，需要添加 muted 屬性 -->
  <video controls="controls" autoplay muted loop poster="./media/pig.jpg">
    <source src="./media/video.mp4" type="video/mp4">
    <source src="./media/video.ogg" type="video/ogg">
  </video>
</body>

5. 多媒體標(biāo)簽總結(jié)

音頻標(biāo)簽與視頻標(biāo)簽使用基本一致
多媒體標(biāo)簽在不同瀏覽器下情況不同献幔，存在兼容性問題
谷歌瀏覽器把音頻和視頻標(biāo)簽的自動播放都禁止了
谷歌瀏覽器中視頻添加 muted 標(biāo)簽可以自己播放
注意：重點(diǎn)記住使用方法以及自動播放即可懂傀，其他屬性可以在使用時查找對應(yīng)的手冊

五、新增 input 標(biāo)簽

h5input.png

六蜡感、新增表單屬性

newinput.png

七蹬蚁、`CSS3` 屬性選擇器(上)

1. 什么是 `CSS3`

在 CSS2 的基礎(chǔ)上拓展、新增的樣式

2. `CSS3` 發(fā)展現(xiàn)狀

移動端支持優(yōu)于 PC 端
CSS3 目前還草案郑兴，在不斷改進(jìn)中
CSS3 相對 H5犀斋，應(yīng)用非常廣泛

3. 屬性選擇器列表

attrcanshu.png

4. 屬性選擇器代碼演示

button {
  cursor: pointer;
}
button[disabled] {
  cursor: default
}

八、`CSS3` 屬性選擇器(下)

1. 代碼演示

input[type=search] {
  color: skyblue;
}

span[class^=black] {
  color: lightgreen;
}

span[class$=black] {
  color: lightsalmon;
}

span[class*=black] {
  color: lightseagreen;
}

九情连、結(jié)構(gòu)偽類選擇器

1. 屬性列表

jiegouweilei.png

2. 代碼演示

ul li:first-child {
  background-color: lightseagreen;
}

ul li:last-child {
  background-color: lightcoral;
}

ul li:nth-child(3) {
  background-color: aqua;
}

十叽粹、`nth-child` 參數(shù)詳解

1. nth-child 詳解

注意：本質(zhì)上就是選中第幾個子元素
n 可以是數(shù)字、關(guān)鍵字却舀、公式
n 如果是數(shù)字球榆，就是選中第幾個
常見的關(guān)鍵字有 even 偶數(shù)、odd 奇數(shù)
常見的公式如下(如果 n 是公式禁筏，則從 0 開始計算)
但是第 0 個元素或者超出了元素的個數(shù)會被忽略

nthchildcanshu.png

2. 代碼演示

<style>
  /* 偶數(shù) */
  ul li:nth-child(even) {
    background-color: aquamarine;
  }

  /* 奇數(shù) */
  ul li:nth-child(odd) {
    background-color: blueviolet;
  }

  /*n 是公式持钉，從 0 開始計算 */
  ul li:nth-child(n) {
    background-color: lightcoral;
  }

  /* 偶數(shù) */
  ul li:nth-child(2n) {
    background-color: lightskyblue;
  }

  /* 奇數(shù) */
  ul li:nth-child(2n + 1) {
    background-color: lightsalmon;
  }

  /* 選擇第 0 5 10 15, 應(yīng)該怎么選 */
  ul li:nth-child(5n) {
    background-color: orangered;
  }

  /* n + 5 就是從第5個開始往后選擇 */
  ul li:nth-child(n + 5) {
    background-color: peru;
  }

  /* -n + 5 前五個 */
  ul li:nth-child(-n + 5) {
    background-color: tan;
  }
</style>

十一、`nth-child` 和 `nt-of-type` 的區(qū)別

1. 代碼演示

<style>
  div :nth-child(1) {
    background-color: lightblue;
  }

  div :nth-child(2) {
    background-color: lightpink;
  }

  div span:nth-of-type(2) {
    background-color: lightseagreen;
  }

  div span:nth-of-type(3) {
    background-color: #fff;
  }
</style>

2. 區(qū)別

nth-child 選擇父元素里面的第幾個子元素篱昔，不管是第幾個類型
nt-of-type 選擇指定類型的元素

十二每强、偽元素選擇器

1. 偽類選擇器

weiyuansu.png

2. 偽類選擇器注意事項(xiàng)

before 和 after 必須有 content 屬性
before 在內(nèi)容前面，after 在內(nèi)容后面
before 和 after 創(chuàng)建的是一個元素州刽，但是屬于行內(nèi)元素
創(chuàng)建出來的元素在 Dom 中查找不到空执，所以稱為偽元素
偽元素和標(biāo)簽選擇器一樣，權(quán)重為 1

3. 代碼演示

<style>
    div {
      width: 100px;
      height: 100px;
      border: 1px solid lightcoral;
    }

    div::after,
    div::before {
      width: 20px;
      height: 50px;
      text-align: center;
      display: inline-block;
    }
    div::after {
      content: '德';
      background-color: lightskyblue;
    }

    div::before {
      content: '道';
      background-color: mediumaquamarine;
    }
  </style>

十三穗椅、偽元素的案例

1. 添加字體圖標(biāo)

p {
   width: 220px;
   height: 22px;
   border: 1px solid lightseagreen;
   margin: 60px;
   position: relative;
}
p::after {
  content: '\ea50';
  font-family: 'icomoon';
  position: absolute;
  top: -1px;
  right: 10px;
}

十四辨绊、`2D` 轉(zhuǎn)換之 `translate`

1. `2D` 轉(zhuǎn)換

2D 轉(zhuǎn)換是改變標(biāo)簽在二維平面上的位置和形狀
移動： translate
旋轉(zhuǎn)： rotate
縮放： scale

2. `translate` 語法

x 就是 x 軸上水平移動
y 就是 y 軸上水平移動

transform: translate(x, y)
transform: translateX(n)
transfrom: translateY(n)

3. 重點(diǎn)知識點(diǎn)

2D 的移動主要是指水平、垂直方向上的移動
translate 最大的優(yōu)點(diǎn)就是不影響其他元素的位置
translate 中的100%單位匹表，是相對于本身的寬度和高度來進(jìn)行計算的
行內(nèi)標(biāo)簽沒有效果

4. 代碼演示

div {
  background-color: lightseagreen;
  width: 200px;
  height: 100px;
  /* 平移 */
  /* 水平垂直移動 100px */
  /* transform: translate(100px, 100px); */

  /* 水平移動 100px */
  /* transform: translate(100px, 0) */

  /* 垂直移動 100px */
  /* transform: translate(0, 100px) */

  /* 水平移動 100px */
  /* transform: translateX(100px); */

  /* 垂直移動 100px */
  transform: translateY(100px)
}

十五门坷、讓一個盒子水平垂直居中

看代碼

<head>
    <style>
        div {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: red;
            /* transform: translate(50%, 0px); */
        }
        
        div p {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            background-color: steelblue;
            /* margin-top: -100px;
            margin-left: -100px; */
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <div>
        <p></p>
    </div>
</body>

十六宣鄙、`2D 轉(zhuǎn)換 rotate`

rotate 旋轉(zhuǎn)
- 2D 旋轉(zhuǎn)指的是讓元素在二維平面內(nèi)順時針或者逆時針旋轉(zhuǎn)
rotate 語法

/* 單位是：deg */
transform: rotate(度數(shù))

重點(diǎn)知識點(diǎn)

rotate 里面跟度數(shù)，單位是 deg
角度為正時默蚌，順時針冻晤，角度為負(fù)時，逆時針
默認(rèn)旋轉(zhuǎn)的中心點(diǎn)是元素的中心點(diǎn)

代碼演示

img:hover {
  transform: rotate(360deg)
}

十六绸吸、三角

實(shí)現(xiàn)一個倒三角

代碼演示

<div class="sanjiao">
</div>

.sanjiao {
    position: relative;
    margin-top: 10px;
    width: 200px;
    height: 30px;
    border: 1px solid #000000;
}

.sanjiao::after {
    content: "";
    position: absolute;
    top: 7px;
    right: 12px;
    width: 10px;
    height: 10px;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    transform: rotate(45deg);
    transition: all .2s;
}

.sanjiao:hover::after {
    transform: rotate(225deg);
}

十七鼻弧、設(shè)置元素旋轉(zhuǎn)中心點(diǎn)(transform-origin)

transform-origin 基礎(chǔ)語法

transform-origin: x y;

重要知識點(diǎn)

注意后面的參數(shù) x 和 y 用空格隔開
x y 默認(rèn)旋轉(zhuǎn)的中心點(diǎn)是元素的中心 (50% 50%)，等價于 center center
還可以給 x y 設(shè)置像素或者方位名詞(top锦茁、bottom攘轩、left、right码俩、center)

旋轉(zhuǎn)中心案例

代碼演示

 <div class="rotatetest"></div>

.rotatetest {
    overflow: hidden;
    width: 200px;
    height: 200px;
    border: 3px solid pink;
    margin: 0 auto;
    transition: all 1s;
}

.rotatetest::before {
    content: "";
    width: 200px;
    display: block;
    height: 200px;
    background-color: hotpink;
    transform: rotate(90deg);
    transform-origin: left bottom;
}

.rotatetest:hover::before {
    transform: rotate(0deg);
    transition: all 1s;
}

十八撑刺、`2D` 轉(zhuǎn)換之 `scale`

scale 的作用
- 用來控制元素的放大與縮小
語法
```
transform: scale(x, y)
```
知識要點(diǎn)
- 注意，x 與 y 之間使用逗號進(jìn)行分隔
- transform: scale(1, 1): 寬高都放大一倍握玛，相當(dāng)于沒有放大
- transform: scale(2, 2): 寬和高都放大了二倍
- transform: scale(2): 如果只寫了一個參數(shù)，第二個參數(shù)就和第一個參數(shù)一致
- transform:scale(0.5, 0.5): 縮小
- scale 最大的優(yōu)勢：可以設(shè)置轉(zhuǎn)換中心點(diǎn)縮放甫菠，默認(rèn)以中心點(diǎn)縮放挠铲，而且不影響其他盒子

代碼演示

   div:hover {
       /* 注意，數(shù)字是倍數(shù)的含義寂诱，所以不需要加單位 */
       /* transform: scale(2, 2) */
   
       /* 實(shí)現(xiàn)等比縮放拂苹，同時修改寬與高 */
       /* transform: scale(2) */
   
       /* 小于 1 就等于縮放*/
       transform: scale(0.5, 0.5)
   }

圖片放大案例

代碼演示

<div class="scaleimg">
    <a href="#"><img src="res/image/大牌pk.png" alt=""></a>
</div>
<div class="scaleimg">
    <a href="#"><img src="res/image/大牌pk.png" alt=""></a>
</div>
<div class="scaleimg">
    <a href="#"><img src="res/image/大牌pk.png" alt=""></a>
</div>

.scaleimg {
    overflow: hidden;
    width: 300px;
    height: 200px;
    margin: 10px;
    float: left;
}

.scaleimg a img {
    transition: all .4s;
}

.scaleimg a img:hover {
    transform: scale(1.1);
}

分頁按鈕案例

代碼演示

<div class="button">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
</div>

li {
    margin-left: 10px;
    float: left;
    width: 40px;
    height: 40px;
    list-style: none;
    border: 1px solid orangered;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    transition: all .4s;
    cursor: pointer;
}

li:hover {
    transform: scale(1.2);
}

2D 轉(zhuǎn)換綜合寫法以及順序問題

①知識要點(diǎn)

同時使用多個轉(zhuǎn)換，其格式為 transform: translate() rotate() scale()
順序會影響到轉(zhuǎn)換的效果(先旋轉(zhuǎn)會改變坐標(biāo)軸方向)
但我們同時有位置或者其他屬性的時候痰洒，要將位移放到最前面

②代碼演示

div:hover {
  transform: translate(200px, 0) rotate(360deg) scale(1.2)
}

十九瓢棒、動畫(animation)

什么是動畫

動畫是 CSS3 中最具顛覆性的特征之一，可通過設(shè)置多個節(jié)點(diǎn)來精確的控制一個或者一組動畫丘喻，從而實(shí)現(xiàn)復(fù)雜的動畫效果

動畫的基本使用
- 先定義動畫
- 再調(diào)用定義好的動畫

語法格式(定義動畫)

@keyframes 動畫名稱 {
    0% {
        width: 100px;
    }
    100% {
        width: 200px
    }
}

語法格式(使用動畫)

 div {
 /* 調(diào)用動畫 */
    animation-name: 動畫名稱;
     /* 持續(xù)時間 */
     animation-duration: 持續(xù)時間脯宿；
 }

動畫序列
- 0% 是動畫的開始，100 % 是動畫的完成泉粉，這樣的規(guī)則就是動畫序列
- 在 @keyframs 中規(guī)定某項(xiàng) CSS 樣式连霉，就由創(chuàng)建當(dāng)前樣式逐漸改為新樣式的動畫效果
- 動畫是使元素從一個樣式逐漸變化為另一個樣式的效果，可以改變?nèi)我舛嗟臉邮饺我舛嗟拇螖?shù)
- 用百分比來規(guī)定變化發(fā)生的時間嗡靡，或用 from 和 to跺撼，等同于 0% 和 100%

代碼演示

<style>
    div {
      width: 100px;
      height: 100px;
      background-color: aquamarine;
      animation-name: move;
      animation-duration: 0.5s;
    }

    @keyframes move{
      0% {
        transform: translate(0px)
      }
      100% {
        transform: translate(500px, 0)
      }
    }
  </style>

動畫序列

代碼演示

<div></div>

<style>
@keyframes move {
    0% {
        transform: translate(0);
    }
    25% {
        transform: translate(1000px, 0);
    }
    50% {
        transform: translate(1000px, 400px);
    }
    75% {
        transform: translate(0px, 400px);
    }
    100% {
        transform: translate(0, 0);
    }
}

div {
    width: 200px;
    height: 200px;
    background-color: orange;
    animation-name: move;
    animation-duration: 10s;
}
</style>

動畫常見屬性

1.常見的屬性

animationcanshu.png

2.代碼演示

div {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  /* 動畫名稱 */
  animation-name: move;
  /* 動畫花費(fèi)時長 */
  animation-duration: 2s;
  /* 動畫速度曲線 */
  animation-timing-function: ease-in-out;
  /* 動畫等待多長時間執(zhí)行 */
  animation-delay: 2s;
  /* 規(guī)定動畫播放次數(shù) infinite: 無限循環(huán) */
  animation-iteration-count: infinite;
  /* 是否逆行播放 */
  animation-direction: alternate;
  /* 動畫結(jié)束之后的狀態(tài) */
  animation-fill-mode: forwards;
}

div:hover {
  /* 規(guī)定動畫是否暫停或者播放 */
  animation-play-state: paused;
}

動畫簡寫方式
1.動畫簡寫方式

/* animation: 動畫名稱 持續(xù)時間 運(yùn)動曲線 何時開始 播放次數(shù) 是否反方向 起始與結(jié)束狀態(tài) */
animation: name duration timing-function delay iteration-count direction fill-mode

2.知識要點(diǎn)

簡寫屬性里面不包含 animation-paly-state
暫停動畫 animation-paly-state: paused; 經(jīng)常和鼠標(biāo)經(jīng)過等其他配合使用
要想動畫走回來讨彼，而不是直接調(diào)回來：animation-direction: alternate
盒子動畫結(jié)束后歉井，停在結(jié)束位置：animation-fill-mode: forwards

3.代碼演示

animation: move 2s linear 1s infinite alternate forwards;

10.速度曲線細(xì)節(jié)

速度曲線細(xì)節(jié)
- animation-timing-function: 規(guī)定動畫的速度曲線，默認(rèn)是ease
  
  steps.png

代碼演示

div {
  width: 0px;
  height: 50px;
  line-height: 50px;
  white-space: nowrap;
  overflow: hidden;
  background-color: aquamarine;
  animation: move 4s steps(24) forwards;
}

@keyframes move {
  0% {
    width: 0px;
  }

  100% {
    width: 480px;
  }
}

12. 熱點(diǎn)圖

<head>
    <style>
        body {
            background-color: #333;
        }
        
        .map {
            position: relative;
            width: 747px;
            height: 617px;
            background: url(res/image/map.png) no-repeat;
            margin: 0 auto;
        }
        
        .city {
            position: absolute;
            top: 222px;
            right: 194px;
            color: powderblue;
        }
        
        .tb {
            top: 500px;
            right: 90px;
        }
        
        .gz {
            top: 542px;
            right: 197px
        }
        
        .dotted {
            width: 8px;
            height: 8px;
            background-color: blue;
            border-radius: 50%;
        }
        
        .city div[class^="pulse"] {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            box-shadow: 0 0 12px blue;
            border-radius: 50%;
            animation: pulse 1.2s linear infinite;
        }
        
        @keyframes pulse {
            0% {}
            70% {
                width: 40px;
                height: 40px;
                opacity: 1;
            }
            100% {
                width: 70px;
                height: 70px;
                opacity: 0;
            }
        }
        
        .pulse2 {
            animation-delay: .4s;
        }
        
        .map .city .pulse3 {
            animation-delay: .4s;
        }
    </style>
</head>

<body>
    <div class="map">
        <div class="city">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
        <div class="city tb">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
        <div class="city gz">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
    </div>
</body>

</html>

13. 鍵盤錄入效果

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
       .step {
            overflow: hidden;
            color: white;
            font-size: 30px;
            width: 0px;
            text-align: center;
            line-height: 40px;
            height: 40px;
            background-color: pink;
            /* 文字強(qiáng)制顯示一行 */
            white-space: nowrap;
            animation: step 4s steps(9) forwards;
        }
        
        @keyframes step {
            0% {
                width: 0;
            }
            100% {
                width: 270px;
            }
        }
    </style>
</head>

<body>
    <div class="step">
            世紀(jì)佳緣在這里等你
    </div>  
</body>
</html>

14.奔跑的熊大

代碼演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background-color: #ccc;
        }      
        div {
            position: absolute;
            width: 200px;
            height: 100px;
            background: url(media/bear.png) no-repeat;
            /* 我們元素可以添加多個動畫哈误， 用逗號分隔 */
            animation: bear .4s steps(8) infinite, move 3s forwards;
        }
        
        @keyframes bear {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -1600px 0;
            }
        }
        
        @keyframes move {
            0% {
                left: 0;
            }
            100% {
                left: 50%;
                /* margin-left: -100px; */
                transform: translateX(-50%);
            }
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

移動web一 - HTML5

一、什么是HTML5

1. HTML5 的概念與定義

2. HTML5 拓展了哪些內(nèi)容

3. HTML5 的現(xiàn)狀

二菱鸥、HTML5 新增標(biāo)簽

1. 什么是語義化

2. 新增了那些語義化標(biāo)簽

3. 使用語義化標(biāo)簽的注意

三镰烧、多媒體音頻標(biāo)簽

1. 多媒體標(biāo)簽有兩個拢军，分別是

2. audio 標(biāo)簽說明

3. audio 支持的音頻格式

4. audio 的參數(shù)

5茉唉、audio 代碼演示

四结执、多媒體視頻標(biāo)簽

1. video 視頻標(biāo)簽

2. 語法格式

3. video 參數(shù)

4. video 代碼演示

5. 多媒體標(biāo)簽總結(jié)

五、新增 input 標(biāo)簽

六蜡感、新增表單屬性

七蹬蚁、CSS3 屬性選擇器(上)

1. 什么是 CSS3

2. CSS3 發(fā)展現(xiàn)狀

3. 屬性選擇器列表

4. 屬性選擇器代碼演示

八、CSS3 屬性選擇器(下)

1. 代碼演示

九情连、結(jié)構(gòu)偽類選擇器

1. 屬性列表

2. 代碼演示

十叽粹、nth-child 參數(shù)詳解

1. nth-child 詳解

2. 代碼演示

十一、nth-child 和 nt-of-type 的區(qū)別

1. 代碼演示

2. 區(qū)別

十二每强、偽元素選擇器

1. 偽類選擇器

2. 偽類選擇器注意事項(xiàng)

3. 代碼演示

十三穗椅、偽元素的案例

1. 添加字體圖標(biāo)

十四辨绊、2D 轉(zhuǎn)換之 translate

1. 2D 轉(zhuǎn)換

2. translate 語法

3. 重點(diǎn)知識點(diǎn)

4. 代碼演示

十五门坷、讓一個盒子水平垂直居中

十六宣鄙、2D 轉(zhuǎn)換 rotate

十六绸吸、三角

十七鼻弧、設(shè)置元素旋轉(zhuǎn)中心點(diǎn)(transform-origin)

十八撑刺、2D 轉(zhuǎn)換之 scale

十九瓢棒、 動畫(animation)

10.速度曲線細(xì)節(jié)

12. 熱點(diǎn)圖

13. 鍵盤錄入效果

14.奔跑的熊大

2. `HTML5` 拓展了哪些內(nèi)容

3. `HTML5` 的現(xiàn)狀

二菱鸥、`HTML5` 新增標(biāo)簽

2. `audio` 標(biāo)簽說明

七蹬蚁、`CSS3` 屬性選擇器(上)

1. 什么是 `CSS3`

2. `CSS3` 發(fā)展現(xiàn)狀

八、`CSS3` 屬性選擇器(下)

十叽粹、`nth-child` 參數(shù)詳解

十一、`nth-child` 和 `nt-of-type` 的區(qū)別

十四辨绊、`2D` 轉(zhuǎn)換之 `translate`

1. `2D` 轉(zhuǎn)換

2. `translate` 語法

十六宣鄙、`2D 轉(zhuǎn)換 rotate`

十八撑刺、`2D` 轉(zhuǎn)換之 `scale`

十九瓢棒、動畫(animation)