码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-07-11 13:24:49      阅读:484      评论:0      收藏:0      [点我收藏+]

标签:wrap   1.5   推荐   position   logs   main   app   相对   font   

需要用到的技术

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;  
      } 

 

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

标签:wrap   1.5   推荐   position   logs   main   app   相对   font   

原文地址:http://www.cnblogs.com/guorange/p/7149999.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!