CSS实现全屏切换效果的示例代码

前端  /  管理员 发布于 7年前   175

如何通过CSS使div实现全屏效果，主要分为图片横排展示全屏切换效果和图片竖排展示全屏切换效果，分享给大家，具体如下：

全屏要素

  1. 全屏的元素及其父元素都要设置height:100%
  2. 将html、body标签设置height:100%

（注：height:100%是跟随其父元素高度变化而变化的）

1.图片横排展示全屏切换效果

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Document</title>  <style>    *{      padding: 0;      margin: 0;    }    html,body{      height: 100%;    }    #container,.sections,.section{      height: 100%;    }    #section0,    #section1,    #section2,    #section3{      background-color: #000;      background-size: cover;      /*让背景图片在容器中居中*/      background-position: 50% 50%;      text-align: center;      color: white;    }    #section0{      background-image: url("http://ossweb-img.qq.com/images/lol/web201310/skin/big86000.jpg");    }    #section1{      background-image: url("http://ossweb-img.qq.com/images/lol/web201310/skin/big11000.jpg");    }    #section2{      background-image: url("http://ossweb-img.qq.com/images/lol/web201310/skin/big55000.jpg");    }    #section3{      background-image: url("http://ossweb-img.qq.com/images/lol/web201310/skin/big45000.jpg");    }    .left{      float: left;      width: 25%;    }  </style></head><body>  <div id="container" style="width:400%">    <div class="sections">      <div class="section left" id="section0">        <h3>this is the page</h3>      </div>      <div class="section left" id="section1">        <h3>this is the page</h3>      </div>      <div class="section left" id="section2">        <h3>this is the page</h3>      </div>      <div class="section left" id="section3">        <h3>this is the page</h3>      </div>    </div>  </div></body></html>

2.图片竖排展示全屏切换效果

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Document</title>  <style>    *{      padding: 0;      margin: 0;    }    html,body{      height: 100%;    }    #container,.sections,.section{      height: 100%;    }    #section0,    #section1,    #section2,    #section3{      background-color: #000;      background-size: cover;      /*让背景图片在容器中居中*/      background-position: 50% 50%;      text-align: center;      color: white;    }    #section0{      background-image: url("http://ossweb-img.qq.com/images/lol/web201310/skin/big86000.jpg");    }    #section1{      background-image: url("http://ossweb-img.qq.com/images/lol/web201310/skin/big11000.jpg");    }    #section2{      background-image: url("http://ossweb-img.qq.com/images/lol/web201310/skin/big55000.jpg");    }    #section3{      background-image: url("http://ossweb-img.qq.com/images/lol/web201310/skin/big45000.jpg");    }  </style></head><body>  <div id="container">    <div class="sections">      <div class="section" id="section0">        <h3>this is the page</h3>      </div>      <div class="section" id="section1">        <h3>this is the page</h3>      </div>      <div class="section" id="section2">        <h3>this is the page</h3>      </div>      <div class="section" id="section3">        <h3>this is the page</h3>      </div>    </div>  </div></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。


  • 上一条：
    css是如何实现在页面文字不换行、自动换行、强制换行的方法
    下一条：
    浅谈CSS 栅格系统布局原理分析

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客