本節(jié)正式進入圣誕主題實現(xiàn)階段的學(xué)習(xí)與代碼的編寫。首先回顧下視頻的內(nèi)容：整個效果都表述了一個主題，小男孩與小女孩在圣誕節(jié)的見面場景并呈現(xiàn)在三個主題場景且在每個主題頁面中會有不同的效果。
從大的方向上看三個主題場景都是獨立的，因此在布局的實現(xiàn)上可以用單獨的一個元素抽象出來去做每個場景容器，這里就會有3個大的容器元素。所以結(jié)構(gòu)就應(yīng)該長這下面的樣子：
<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用來區(qū)分不同的場景頁面，通過設(shè)置層級z-index關(guān)系來切換可視頁面。bg-adaptive主要抽出背景圖自適應(yīng)代碼
.bg-adaptive {
background-size: 100% 100%;
}
最后，可以通過js動態(tài)修改.container元素的大小，從而控制整個主題效果的大小與位置。具體布局效果，可以參考右邊代碼區(qū)域，通過層級控制頁面的切換
請驗證，完成請求
由于請求次數(shù)過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報