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>

 

posted @ 2022-06-08 09:33  修知阁  阅读(411)  评论(0)    收藏  举报