一个满屏 品 字布局 如何设计?

Posted 2020-09-27 Orange

需要用到的技术

1.     元素水平居中对齐

1)        使用margin对齐(推荐)

2)        使用left：50%

3)        使用text-align

2.  元素对相对窗口定位

1)        使用filxed（推荐）

2)        使用absolute定位

3)        使用html和body的width和height填?这个窗口

3.     元素左右定位

1)        使用float左右浮动

2)        使用绝对定位进行左右定位（推荐）

具体实现的代码

html

1 <div class="main">  
2  <div class="wrapper-up">  
3    <div class="div-square-up"></div>  
4  </div>  
5  <div class="wrapper-down">  
6    <div class="div-square-left"></div>  
7    <div class="div-square-right"></div>  
8  </div>  
9 </div>   

css

　　　　body{  
          height: 1200px;  
      }  
      .main {  
          position: fixed;  
          left: 0;  
          top: 0;  
          height: 100%;  
          width: 100%;  
      }  
      .wrapper-up {  
          height: 50%;  
      }  
  
      .wrapper-down {  
          height: 50%;  
          position: relative;  
      }  
      .div-square-up {  
          width: 50%;  
          margin: 0 auto;  
          border: 2px solid red;  
          height: 96%;  
          box-sizing: border-box;  
      }  
  
      .div-square-left {  
          position: absolute;  
          left: 0;  
          width: 48%;  
          height: 100%;  
          box-sizing: border-box;  
          border: 2px solid red;  
      }  
  
      .div-square-right {  
          position: absolute;  
          right: 0;  
          width: 48%;  
          height: 100%;  
          border: 2px solid red;  
          box-sizing: border-box;  
      }