亚洲综合在线视频自拍,国产精品久久久久久久久久,亚洲精品综合一区二区三区在线

4-1 布局結(jié)構(gòu)
收藏

第1章效果預(yù)覽與介紹
視頻：1-1 課程簡(jiǎn)介(03:16)

第2章設(shè)計(jì)思路與蘊(yùn)涵的知識(shí)點(diǎn)
視頻：2-1 整體介紹(01:40)
視頻：2-2 編程思路(02:15)

第8章最終效果與總結(jié)
編程：8-1 最終效果與總結(jié)

布局結(jié)構(gòu)

本節(jié)正式進(jìn)入圣誕主題實(shí)現(xiàn)階段的學(xué)習(xí)與代碼的編寫(xiě)。首先回顧下視頻的內(nèi)容：整個(gè)效果都表述了一個(gè)主題，小男孩與小女孩在圣誕節(jié)的見(jiàn)面場(chǎng)景并呈現(xiàn)在三個(gè)主題場(chǎng)景且在每個(gè)主題頁(yè)面中會(huì)有不同的效果。

從大的方向上看三個(gè)主題場(chǎng)景都是獨(dú)立的，因此在布局的實(shí)現(xiàn)上可以用單獨(dú)的一個(gè)元素抽象出來(lái)去做每個(gè)場(chǎng)景容器，這里就會(huì)有3個(gè)大的容器元素。所以結(jié)構(gòu)就應(yīng)該長(zhǎng)這下面的樣子：

<section class="container">
    <!-- 第一幅畫(huà)面 -->
    <section class="page-a bg-adaptive">
    </section>
    <!-- 第二幅畫(huà)面 -->
    <section class="page-b bg-adaptive">
    </section>
    <!-- 第三幅畫(huà)面 -->
    <section class="page-c bg-adaptive">
    </section>
</section>

在所有的場(chǎng)景最外層會(huì)包裝一層container的主元素，用來(lái)做尺寸與定位處理，讓所有的子元素都相對(duì)與.container元素定位

.container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

通過(guò)類(lèi)名page-a、page-b、page-c用來(lái)區(qū)分不同的場(chǎng)景頁(yè)面，通過(guò)設(shè)置層級(jí)z-index關(guān)系來(lái)切換可視頁(yè)面。bg-adaptive主要抽出背景圖自適應(yīng)代碼

.bg-adaptive {
    background-size: 100% 100%;
}

最后，可以通過(guò)js動(dòng)態(tài)修改.container元素的大小，從而控制整個(gè)主題效果的大小與位置。具體布局效果，可以參考右邊代碼區(qū)域，通過(guò)層級(jí)控制頁(yè)面的切換

任務(wù)

?不會(huì)了怎么辦

||

index.html
common.css

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>圣誕主題</title> <link rel='stylesheet' href='common.css' /> </head> <body> <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> 選擇頁(yè)面： <select id="page"> <option value="page-a" selected="">1</option> <option value="page-b">2</option> <option value="page-c">3</option> </select> </body> <script type="text/javascript"> var doc = document; /** * 針對(duì)content中的html文本框 * 增加rem的修改 * @param {[type]} doc [description] * @param {[type]} win [description] * @return {[type]} [description] */ var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { //自適應(yīng)設(shè)置容器高度 var container = document.querySelector(".container") //原始比例 var proportion = 900 / 1440; container.style.height = container.clientWidth * proportion + "px"; }; window.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); /** * 下拉選擇頁(yè)面 * @type {[type]} */ var page = document.querySelector("#page"); //層級(jí) var index = 10; //切換切換 page.addEventListener("change",function(e){ //頁(yè)面元素 var pageElement = document.querySelector("." + e.target.value) pageElement.style.zIndex = ++index; },false) </script> </html>

*{ margin: 0; padding: 0; } /*body{ width: 100%; height: 100%; }*/ .container { width: 100%; height: 100%; position: relative; overflow: hidden; } .bg-adaptive { background-size: 100% 100%; } .container .page-a { width : 100%; height : 100%; background-image: url("http://img1.sycdn.imooc.com//565d07770001790814410901.png"); position: absolute; z-index: 5; } .container .page-b { width : 100%; height : 100%; background-image: url("http://img1.sycdn.imooc.com//565d09fa000145a614410901.png"); position: absolute; z-index: 4; } .page-c { width : 100%; height : 100%; background-image: url("http://img1.sycdn.imooc.com//565d0b280001788014410901.png"); position: absolute; z-index: 3; }

提問(wèn)題

提交

其他問(wèn)答

查看更多本節(jié)問(wèn)答

寫(xiě)筆記

公開(kāi)筆記

提交

||

全屏

請(qǐng)驗(yàn)證，完成請(qǐng)求

由于請(qǐng)求次數(shù)過(guò)多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求

打開(kāi)微信掃碼自動(dòng)綁定

您還未綁定服務(wù)號(hào)

綁定后可得到

· 粉絲專(zhuān)屬優(yōu)惠福利
· 大咖直播交流干貨
· 課程更新,問(wèn)題答復(fù)提醒
· 賬號(hào)支付安全提醒

使用 Ctrl+D 可將網(wǎng)站添加到書(shū)簽

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

4-1 布局結(jié)構(gòu)

布局結(jié)構(gòu)

任務(wù)

提問(wèn)題

其他問(wèn)答

寫(xiě)筆記

您還未綁定服務(wù)號(hào)

收藏課程后，能更快找到我哦～

手記推薦

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

4-1 布局結(jié)構(gòu)

熱搜

最近搜索清空

布局結(jié)構(gòu)

任務(wù)

提問(wèn)題

其他問(wèn)答

寫(xiě)筆記

您還未綁定服務(wù)號(hào)

收藏課程后，能更快找到我哦～

手記推薦

收藏課程后，能更快找到我哦～