简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >Chapter7 布局原理与实战

Chapter7 布局原理与实战

无关
无关原创
2020年07月01日 00:13:10628浏览

一、 浮动元素的塌陷和解决方案

1.效果图

1.1 元素浮动前：

1.2 浮动元素的塌陷图：

1.3 塌陷解决后，恢复原图：

2.源码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>浮动元素的塌陷和解决方案</title>
  7.   <style>
  8.     .container{
  9.       border:3px dashed blue;
  10.       background-color: lightseagreen;
  12.     }
  13.     .item{
  14.       width: 150px;
  15.       height: 150px;
  16.     }
  17.     .item:first-of-type{
  18.       background-color:lightpink ;
  19.     }
  20.     .item:last-of-type{
  21.       background-color:lightsalmon;
  22.     }
  23.     .item:nth-of-type(2){
  24.       background-color:lightgreen ;
  25.     }
  26.     /* 当三个子元素全部浮动之后，容器container没有子元素的支持，高度塌陷， */
  27.     .item{
  28.       float:left;
  29.     }
  30.     /* 塌陷解决方案 */
  32.      /* 解决方案1. 添加一个伪元素解决-可以用，但啰嗦*/
  33.      /* .container::after{
  34.        content: "";
  35.        display: block;
  36.        clear:both;
  37.      } */
  38.      /* overflow：最简单的解决方案*/
  39.      .container{
  40.        /* overflow: hidden=overflow: auto; */
  41.        /* overflow: hidden; */
  42.        overflow: auto;
  43.      }
  45.   </style>
  46. </head>
  47. <body>  
  48.  <div class="container">
  49.    <div class="item">浮动元素1</div>
  50.    <div class="item">浮动元素2</div>
  51.    <div class="item">浮动元素3</div>
  52.    <!-- <div class="clear"></div> -->
  53.  </div>  
  54. </body>
  55. </html>

二、中国诗词大会：绝对定位

1.效果图

2.源码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>中国诗词大会：绝对定位完成三列布局</title>
  7.     <style>
  9.         /* 初始化  */
  10.      * {
  11.          margin:0;
  12.          padding:0;
  13.          box-sizing: border-box;   
  14.          color:red;
  15.          font-size: 1.2rem;          
  16.      }  
  18.      /* 页眉样式 与内容 */
  19.      .header{
  20.          width: 1060px;
  21.          height: 500px;
  22.          margin:auto;
  23.          background:url('header.png') no-repeat center;
  25.      }
  26.  /* 页脚样式 与内容*/
  27.      .footer{
  28.          width: 1060px;
  29.          height: 130px;
  30.          margin:auto;
  31.          background:lightgreen url('footer.png') no-repeat  center ;
  33.      }
  35.  /* 主体样式 */
  36.  .container{
  37.      width: 1060px;
  38.      margin: 10px auto;
  39.      background-color: #ccc;
  40.      min-height:200px;
  41.      /* 转为定位元素，作为定位父级*/
  42.      position: relative;
  43.  }
  44.  .container>.left{
  45.      width:85px;
  46.      min-height: 200px;
  47.      background-color: wheat;
  48.      background-image:url('left.png') ;
  49.      background-repeat:no-repeat;    
  50.      /* 左绝对定位 */
  51.      position: absolute;
  52.      top: 0;
  53.      left:0;
  54.     }
  55.  .container>.right{
  56.      width:100px;
  57.      min-height: 200px;
  58.      background-color: wheat;
  59.      background-image:url('right.png') ;
  60.      background-repeat:no-repeat;   
  61.      /* 右绝对定位 */ 
  62.      position: absolute;
  63.      top: 0;
  64.      right:0;
  65.     }
  66.  .container>.main{
  67.      width: 860px;
  68.      background-color: limegreen;
  69.      min-height: 200px;
  70.      background:url('main.png') no-repeat ;
  71.      /* 主体绝对定位 */
  72.      position: absolute;
  73.      left:90px;
  74.      top:0;
  75.  }
  76.   </style>   
  78.  </head>
  79.  <body>
  80.    <!-- 页眉   -->
  81.    <div class="header">页眉</div>
  82.    </div> 
  83.    <!-- 主体 -->
  84.    <div class="container">  
  85.       <div class="left">左侧</div> 
  86.       <div class="main">主体</div> 
  87.       <div class="right">右侧</div>
  88.     </div>  
  89.    <!-- 页脚 -->
  90.    <div class="footer">页脚</div>
  91.  </body>
  92.  </html>
  93.     }
  94.  .container>.right{
  95.      width:100px;
  96.      min-height: 200px;
  97.      background-color: wheat;
  98.      background-image:url('right.png') ;
  99.      background-repeat:no-repeat;   
  100.      /* 右绝对定位 */ 
  101.      position: absolute;
  102.      top: 0;
  103.      right:0;
  104.     }
  105.  .container>.main{
  106.      width: 860px;
  107.      background-color: limegreen;
  108.      min-height: 200px;
  109.      background:url('main.png') no-repeat ;
  110.      /* 主体绝对定位 */
  111.      position: absolute;
  112.      left:90px;
  113.      top:0;
  114.  }
  115.   </style>

三、中国诗词大会：浮动定位

1.效果图

2.源码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>中国诗词大会：浮动定位完成三列布局</title>
  7.     <style>
  9.        /* 初始化  */
  10.     * {
  11.         margin:0;
  12.         padding:0;
  13.         box-sizing: border-box;   
  14.         color:red;
  15.         font-size: 1.2rem;          
  16.     }  
  18.     /* 页眉样式 与内容 */
  19.     .header{
  20.         width: 1060px;
  21.         height: 500px;
  22.         margin:auto;
  23.         background:url('header.png') no-repeat center;
  25.     }
  26. /* 页脚样式 与内容*/
  27.     .footer{
  28.         width: 1060px;
  29.         height: 130px;
  30.         margin:auto;
  31.         background:lightgreen url('footer.png') no-repeat  center ;
  32.     }
  34. /* 主体样式 */
  35. .container{
  36.     width: 1060px;
  37.     margin: 10px auto;
  38.     background-color: #ccc;
  39.     min-height:200px;
  40.     /* 转为定位元素，作为定位父级*/
  41.     position: relative;
  42. }
  43. .container>.left{
  44.     width:85px;
  45.     min-height: 200px;
  46.     /* 左浮动 */    
  47.     float: left;
  48.     background: wheat url('left.png') no-repeat;    
  49.    }
  50. .container>.right{
  51.     width:100px; 
  52.     min-height: 200px;
  53.     /* 右浮动 */ 
  54.     float: right;
  55.     background: wheat url('right.png') no-repeat;    
  56.     }
  57. .container>.main{
  58.     width: 800px;   
  59.     min-height: 200px;
  60.     margin-left:40px;
  61.     background:limegreen url('main.png') no-repeat ;
  62.      /* 左浮动 */ 
  63.     float: left;
  64. }
  65.  </style>    
  66. </head>
  67. <body>
  68.   <!-- 页眉   -->
  69.   <div class="header">页眉</div>
  70.   </div> 
  71.   <!-- 主体 -->
  72.   <div class="container">  
  73.      <div class="left">左侧</div> 
  74.      <div class="main">主体</div> 
  75.      <div class="right">右侧</div>
  76.    </div>  
  77.   <!-- 页脚 -->
  78.   <div class="footer">页脚</div>
  79. </body>
  80. </html>
上一条：关闭vscode的MDN提示框下一条：仿中文网课程标题
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
武2020-07-01 16:34:431楼
为了体现背景色，页面故意留出来了空隙，看上去不太美观哈。 谢谢老师！