div布局步骤

一般在新建div布局的时候大概是这个样子的

1、首先用一个 id = main 的最大 div 占据浏览器的整个页面；

2、然后用 id = main-left 和 id = main-right 的两个子 div 分割 main ，产生左右两个部分；

3、最后在 main-left 中创建一个 main-left-image 放图片，在 main-right 中创建一个 main-right-text 来放提示信息；

大概的代码就是这样子的

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>平台升级中~</title>
<style>
  *{  
    margin: 0;  
    padding: 0;  
  }  
  html,body{  
    height: 100%;  
    width: 100%;
    background: #F0F2F5;
  }  
  #main{  
    height: 100%;  
    width: 100%;  
  }
  #main-left{
    height: 100%;
    width: 50%;
    float: left;
    display: flex;
  }
  #main-left-image {
    height: 50%;
    width: 50%;
    margin-left: 40%;
    margin-top: 15%;
  }
  #main-right{
    height: 100%;
    width: 50%;
    float: right;
    display: flex;
  }
  #main-right-text {
    height: 50%;
    width: 50%;
    margin-left: 5%;
    margin-top: 28%;
    color: #2A39DD;
  }
</style>
</head>
<body>
  <div id="main">
    <div id="main-left">
      <div id="main-left-image">
        <img src="./50x.png" style="weight:100%; height:100%;"></img>
      </div> <!-- main-left-image-->
    </div> <!-- main-left-->
    <div id="main-right">
      <div id="main-right-text">
         <h3>Platform upgrade maintenance in progress </p>
         lease try again later...</p>
         </h3>
         </br>
        <h2>平台升级维护中，请稍后再试~~</h2>
      </div> <!-- main-right-text-->
    </div> <!-- main-right-->
  </div> <!-- main-->
</body>
</html>

__EOF__

本文作者：孙文杰
本文链接：https://www.cnblogs.com/image100/p/16352144.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！