全背景切换布局 

贴三段代码，经常回顾，复习，理解才更深刻。
温故而知新。
需要注意的点：
height，margin，padding不会继承，要手动添加100%或inherit
<html style="height: 100%;">
  <body style="height: 100%;">
    <div style="height: 100%;">
      <p>
        这样这个div的高度就会100%了
      </p>
    </div>
  </body>
</html>

2. 纵向

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;padding: 0;
            }
            html,body{
                height: 100%;
            }
            .section,.sections,#container{
                height: 100%;
            
            }
            /*我之前没有给sections设置height,原来 height是不继承的. 
            height、padding、margin等是不继承的，
            继承的有例如：color, line-height, font-size, font-family等，
            多数都是文本有关的样式。
                               如果想要高度继承的话，height: 100%，或者 height: inherit 试试*/
            /*如果设置了.sections这个div,是需要写继承的*/
            #section0{
                background: url("img/bg1.png") no-repeat ;
            }
            #section1{
                background: url("img/bg2.png")no-repeat ;
            }
            #section2{
                background: url("img/bg3.jpg") no-repeat deepskyblue;
            }
            #section3{
                background: url("img/bg4.jpg") no-repeat firebrick;
            }
            #section0,
        #section1,
        #section2,
        #section3{
            background-size: cover;
        }
            /*如果背景图片不够大,怎么让图片100%占满*/
        </style>
    </head>
    <body>
        <div id="container">
            <div class="sections">
                <div class="section" id="section0">1</div>
                <div class="section" id="section1">2</div>
                <div class="section" id="section2">3</div>
                <div class="section" id="section3">4</div>
            </div>
        </div>
    </body>
</html>

3. 横向

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;padding: 0;
            }
            html,body{
                height: 100%;
            }
            
            .section,.sections,#container{
            height: 100%;
            
            }
            #container{
                width: 400%;
            }
            /*我之前没有给sections设置height,原来 height是不继承的. 
            height、padding、margin等是不继承的，
            继承的有例如：color, line-height, font-size, font-family等，
            多数都是文本有关的样式。
                               如果想要高度继承的话，height: 100%，或者 height: inherit 试试*/
            /*如果设置了.sections这个div,是需要写继承的*/
            #section0{
              
                background: url(img/bg1.jpg) no-repeat red ;
            }
            #section1{
                
                background: url(img/bg2.jpg) no-repeat gold;
            }
            #section2{
                background: url(img/bg3.jpg) no-repeat deepskyblue;
            }
            #section3{
                background: url(img/bg4.jpg) no-repeat firebrick;
            }
            #section0,#section1,#section2,#section3{
                background-size: cover;
            }
        
            .left{
                float: left;
                width: 25%;
            }
            /*加了一个float:left 在他的包裹容器中设置width:400% 
            因为你是要他占据body宽度的400%*/
            /*如果背景图片不够大,怎么让图片100%占满*/
        </style>
    </head>
    <body>
        <div id="container">
            <div class="sections">
                <div class="section left" id="section0">1</div>
                <div class="section left" id="section1">2</div>
                <div class="section left" id="section2">3</div>
                <div class="section left" id="section3">4</div>
            </div>
        </div>
    </body>
</html>

 

 
posted @ 2016-08-18 22:32  nostic  阅读(118)  评论(0)  编辑  收藏  举报