4-1 布局结构
本节编程练习不计算学习进度，请电脑登录imooc.com操作

布局结构

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

从大的方向上看三个主题场景都是独立的，因此在布局的实现上可以用单独的一个元素抽象出来去做每个场景容器，这里就会有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.htmlcommon.css 
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6.     <title>圣诞主题</title>
  7.     <link rel='stylesheet' href='common.css' />
  8. </head>
  9.  
  10. <body>
  11.     <section class="container">
  12.         <!-- 第一幅画面 -->
  13.         <section class="page-a bg-adaptive">
  14.         </section>
  15.         <!-- 第二幅画面 -->
  16.         <section class="page-b bg-adaptive">
  17.         </section>
  18.         <!-- 第三幅画面 -->
  19.         <section class="page-c bg-adaptive">
  20.         </section>
  21.     </section>
  22.     选择页面：
  23.     <select id="page">
  24.         <option value="page-a" selected="">1</option>
  25.         <option value="page-b">2</option>
  26.         <option value="page-c">3</option>
  27.     </select>
  28. </body>
  29. <script type="text/javascript">
  30.  
  31. var doc = document;
  32. /**
  33.  * 针对content中的html文本框
  34.  * 增加rem的修改
  35.  * @param  {[type]} doc [description]
  36.  * @param  {[type]} win [description]
  37.  * @return {[type]}     [description]
  38.  */
  39. var docEl = doc.documentElement,
  40.     resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
  41.     recalc = function() {
  42.         //自适应设置容器高度
  43.         var container = document.querySelector(".container")
  44.             //原始比例
  45.         var proportion = 900 / 1440;
  46.         container.style.height = container.clientWidth * proportion + "px";
  47.     };
  48. window.addEventListener(resizeEvt, recalc, false);
  49. doc.addEventListener('DOMContentLoaded', recalc, false);
  50.  
  51.  
  52.  
  53. /**
  54.  * 下拉选择页面
  55.  * @type {[type]}
  56.  */
  57. var page = document.querySelector("#page");
  58.  
  59.  
  60. //层级
  61. var index = 10;
  62. //切换切换
  63. page.addEventListener("change",function(e){
  64.     //页面元素
  65.     var pageElement = document.querySelector("." + e.target.value)
  66.     pageElement.style.zIndex = ++index;
  67. },false)
  68.  
  69. </script>
  70.  
  71. </html>
  72.  
  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5.  
  6. /*body{
  7.     width: 100%;
  8.     height: 100%;
  9. }*/
  10.  
  11. .container {
  12.     width: 100%;
  13.     height: 100%;
  14.     position: relative;
  15.     overflow: hidden;
  16. }
  17.  
  18. .bg-adaptive {
  19.     background-size: 100% 100%;
  20. } 
  21.  
  22. .container .page-a {
  23.     width  : 100%;
  24.     height : 100%;
  25.     background-image: url("http://img1.sycdn.imooc.com//565d07770001790814410901.png");
  26.     position: absolute;
  27.     z-index: 5;
  28. }
  29.  
  30. .container .page-b {
  31.     width  : 100%;
  32.     height : 100%;
  33.     background-image: url("http://img1.sycdn.imooc.com//565d09fa000145a614410901.png");
  34.     position: absolute;
  35.     z-index: 4;
  36. }
  37.  
  38. .page-c {
  39.     width  : 100%;
  40.     height : 100%;
  41.     background-image: url("http://img1.sycdn.imooc.com//565d0b280001788014410901.png");
  42.     position: absolute;
  43.     z-index: 3;
  44. }
  45.  
  46.  
下一节