本節正式進入圣誕主題實現階段的學習與代碼的編寫。首先回顧下視頻的內容：整個效果都表述了一個主題，小男孩與小女孩在圣誕節的見面場景并呈現在三個主題場景且在每個主題頁面中會有不同的效果。
從大的方向上看三個主題場景都是獨立的，因此在布局的實現上可以用單獨的一個元素抽象出來去做每個場景容器，這里就會有3個大的容器元素。所以結構就應該長這下面的樣子：
<section class="container"> <!-- 第一幅畫面 --> <section class="page-a bg-adaptive"> </section> <!-- 第二幅畫面 --> <section class="page-b bg-adaptive"> </section> <!-- 第三幅畫面 --> <section class="page-c bg-adaptive"> </section> </section>
在所有的場景最外層會包裝一層container的主元素，用來做尺寸與定位處理，讓所有的子元素都相對與.container元素定位
.container {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
通過類名page-a、page-b、page-c用來區分不同的場景頁面，通過設置層級z-index關系來切換可視頁面。bg-adaptive主要抽出背景圖自適應代碼
.bg-adaptive {
background-size: 100% 100%;
}
最后，可以通過js動態修改.container元素的大小，從而控制整個主題效果的大小與位置。具體布局效果，可以參考右邊代碼區域，通過層級控制頁面的切換
請驗證，完成請求
由于請求次數過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報