引用

双飞翼布局

  1.   body {
  2.     min-width: 550px;
  3.     font-weight: bold;
  4.     font-size: 20px;
  5.   }
  6.   #header,
  7.   #footer {
  8.     background: rgba(29, 27, 27, 0.726);
  9.     text-align: center;
  10.     height: 60px;
  11.     line-height: 60px;
  12.   }
  13.     #container{
  14.         overflow: hidden;
  15.     }
  16.     #left,#right,#center{
  17.         float: left;
  18.     }
  19.     .container{
  20.         margin: 0 150px 0 200px;
  21.     }
  22.     #center{
  23.         width: 100%;
  24.         background-color: blue;
  25.     }
  26.     #left{
  27.         width: 200px;
  28.         margin-left: -100%;
  29.         background-color: powderblue;
  30.     }
  31.     #right{
  32.         width: 150px;
  33.         margin-left: -150px;
  34.         background-color: rebeccapurple;
  35.     }
  36.     </style>
  37. </head>
  38. <body>
  39.     <div id="header">#header</div>
  40.     <div id="container">
  41.     <div id="center" class="column">
  42.         <div class="content">#center</div>
  43.     </div>
  44.     <div id="left" class="column">#left</div>
  45.     <div id="right" class="column">#right</div>
  46.     </div>
  47.     <div id="footer">#footer</div>
  48. </body>
  49. </html>
  50. <!-- 1.中间容器设置 overflow: hidden;
  51. 2.left right center 设置左浮动
  52. 3.中间总容器设置左右 margin: 0 150px 0 200px;
  53. 4.中间容器center设置 width:100%;
  54. 5.左边容器设置左外边距-100%;
  55. 6.右边容器设置左外边距-自身宽度px; -->

圣杯布局

  2. <!DOCTYPE html>
  3. <html>
  5. <head>
  6.   <meta charset="utf-8">
  7.   <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
  8. </head>
  9. <style>
  10.   body {
  11.     min-width: 550px;
  12.     font-weight: bold;
  13.     font-size: 20px;
  14.   }
  15.   #header,
  16.   #footer {
  17.     background: rgba(29, 27, 27, 0.726);
  18.     text-align: center;
  19.     height: 60px;
  20.     line-height: 60px;
  21.   }
  22.   #container {
  23.     overflow: hidden;
  24.   }
  25.   /* .column {
  26.     text-align: center;
  27.     height: 300px;
  28.     line-height: 300px;
  29.   } */
  30.   #left, #right, #center {
  31.     float: left;
  32.   }
  33.   #center {
  34.     width: 100%;
  35.     background: rgb(206, 201, 201);
  36.   }
  37.   #left {
  38.     width: 200px;
  39.     margin-left: -100%;
  40.     background: rgba(95, 179, 235, 0.972);
  41.   }
  42.   #right {
  43.     width: 150px;
  44.     margin-left: -150px;
  45.     background: rgb(231, 105, 2);
  46.   }
  47.   .content {
  48.     margin: 0 150px 0 200px;
  49.   }
  50. </style>
  52. <body>
  53.   <div id="header">#header</div>
  55.   <div id="container">
  56.     <div id="center" class="column">
  57.       <div class="content">#center</div>
  58.     </div>
  59.     <div id="left" class="column">#left</div>
  60.     <div id="right" class="column">#right</div>
  61.   </div>
  63.   <div id="footer">#footer</div>
  64. </body>
  66. </html>

作业： 课后作业
打印一个参数值以内能被3或5或7整除的数
打印斐波那契数列的第N位
打印从0到一个数的累加值

    window.onload = function(){
        console.log(initFb(10));
        console.log(initDiv(100));
        console.log(initSum(100));
    }
    var initFb = (function(){
        function fb(n){
            if(n<=0){
                return 0;
            }
            if(n<=2){
                return 1;
            }
            return fb(n-1) + fb(n-2);
        }
        return fb;
    })();
    var initDiv = (function(){
        function div(n){
            var arr = [];
            for(var i=0;i<=n;i++){
                if(i%3===0||i%5===0||i%7===0){
                    arr.push(i);
                }
            }
            return arr;
        }
        return div;
    })();
    var initSum = (function(){
        function sum(n){
            if(n==1){
                return 1;
            }
            return n + sum(n-1);
        }
        return sum;
    })();