慕课网

第1章效果预览与介绍
视频：1-1 课程简介(03:16)

第2章设计思路与蕴涵的知识点
视频：2-1 整体介绍(01:40)
视频：2-2 编程思路(02:15)

第8章最终效果与总结
编程：8-1 最终效果与总结

布局结构

本节正式进入圣诞主题实现阶段的学习与代码的编写。首先回顾下视频的内容：整个效果都表述了一个主题，小男孩与小女孩在圣诞节的见面场景并呈现在三个主题场景且在每个主题页面中会有不同的效果。

从大的方向上看三个主题场景都是独立的，因此在布局的实现上可以用单独的一个元素抽象出来去做每个场景容器，这里就会有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元素的大小，从而控制整个主题效果的大小与位置。具体布局效果，可以参考右边代码区域，通过层级控制页面的切换

任务

?不会了怎么办

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> 选择页面： <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; /** * 针对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() { //自适应设置容器高度 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); /** * 下拉选择页面 * @type {[type]} */ var page = document.querySelector("#page"); //层级 var index = 10; //切换切换 page.addEventListener("change",function(e){ //页面元素 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; }

写笔记

公开笔记

提交

全屏

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求

4-1 布局结构

布局结构

任务

写笔记

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