原码笔记

原码笔记

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

小诸哥 0

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

全屏要素

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

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.      <meta charset="UTF-8">
  5.      <title>Document</title>
  6.      <style>
  7.      *{
  8.          padding: 0;
  9.          margin: 0;
  10.      }
  11.      html,body{
  12.          height: 100%;
  13.      }
  14.      #container,.sections,.section{
  15.          height: 100%;
  16.      }
  17.      #section0,
  18.      #section1,
  19.      #section2,
  20.      #section3{
  21.          background-color: #000;
  22.          background-size: cover;
  23.          /*让背景图片在容器中居中*/
  24.          background-position: 50% 50%;
  25.          text-align: center;
  26.          color: white;
  27.      }
  28.      #section0{
  29.          background-image: url("http://ossweb-img.qq.com/images/lol/web201310/skin/big86000.jpg");
  30.      }
  31.      #section1{
  32.          background-image: url("http://ossweb-img.qq.com/images/lol/web201310/skin/big11000.jpg");
  33.      }
  34.      #section2{
  35.          background-image: url("http://ossweb-img.qq.com/images/lol/web201310/skin/big55000.jpg");
  36.      }
  37.      #section3{
  38.          background-image: url("http://ossweb-img.qq.com/images/lol/web201310/skin/big45000.jpg");
  39.      }
  40.      .left{
  41.          float: left;
  42.          width: 25%;
  43.      }
  44.      </style>
  45. </head>
  46. <body>
  47.      <div id="container" style="width:400%">
  48.      <div class="sections">
  49.          <div class="section left" id="section0">
  50.          <h3>this is the page</h3>
  51.          </div>
  52.          <div class="section left" id="section1">
  53.          <h3>this is the page</h3>
  54.          </div>
  55.          <div class="section left" id="section2">
  56.          <h3>this is the page</h3&gt;
  57.          </div>
  58.          <div class="section left" id="section3">
  59.          <h3>this is the page</h3>
  60.          </div>
  61.      </div>
  62.      </div>
  63. </body>
  64. </html>

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.      <meta charset="UTF-8">
  5.      <title>Document</title>
  6.      <style>
  7.      *{
  8.          padding: 0;
  9.          margin: 0;
  10.      }
  11.      html,body{
  12.          height: 100%;
  13.      }
  14.      #container,.sections,.section{
  15.          height: 100%;
  16.      }
  17.      #section0,
  18.      #section1,
  19.      #section2,
  20.      #section3{
  21.          background-color: #000;
  22.          background-size: cover;
  23.          /*让背景图片在容器中居中*/
  24.          background-position: 50% 50%;
  25.          text-align: center;
  26.          color: white;
  27.      }
  28.      #section0{
  29.          background-image: url("http://ossweb-img.qq.com/images/lol/web201310/skin/big86000.jpg");
  30.      }
  31.      #section1{
  32.          background-image: url("http://ossweb-img.qq.com/images/lol/web201310/skin/big11000.jpg");
  33.      }
  34.      #section2{
  35.          background-image: url("http://ossweb-img.qq.com/images/lol/web201310/skin/big55000.jpg");
  36.      }
  37.      #section3{
  38.          background-image: url("http://ossweb-img.qq.com/images/lol/web201310/skin/big45000.jpg");
  39.      }
  40.      </style>
  41. </head>
  42. <body>
  43.      <div id="container">
  44.      <div class="sections">
  45.          <div class="section" id="section0">
  46.          <h3>this is the page</h3>
  47.          </div>
  48.          <div class="section" id="section1">
  49.          <h3>this is the page</h3>
  50.          </div>
  51.          <div class="section" id="section2">
  52.          <h3>this is the page</h3>
  53.          </div>
  54.          <div class="section" id="section3">
  55.          <h3>this is the page</h3>
  56.          </div>
  57.      </div>
  58.      </div>
  59. </body>
  60. </html>

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

标签： CSS 实现 效果 代码

赏
版权声明：本站所有图片/内容除标明原创外，均来自网络转载，版权归原作者所有，如果有侵犯到您的权益，请联系本站删除，谢谢！

上一篇CSS Flexbox的具体用法详解

下一篇如何理解 CSS 布局和块级格式上下文

相关文章