1 demand
Make a simple upgrade prompt page for the project;
2 Analysis
Because it's a simple prompt page, you don't need a lot of content, just let users see clear prompts;
Here, the whole page is divided into left and right parts, with a picture on the left (it looks more comfortable) and some prompt text on the right;
3 layout
- First, use a maximum div with id = main to occupy the whole page of the browser;
- Then, the main is divided into two sub div with id = main left and id = main right to generate the left and right parts;
- Finally, create a main left image in main left to put the picture, and create a main right text in main right to put the prompt information;
4 write code
4.1 page split + full screen
<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>Platform upgrade maintenance in progress, please try again later~~</h2> </div> <!-- main-right-text--> </div> <!-- main-right--> </div> <!-- main-->
In the process of writing CSS, I encountered many problems. The most impressive thing is that the margin of the main div is always not 0;
After querying, I learned that if you want main to occupy the whole screen, you need to set the size of its parent element (because if you set the div size according to percentage, it sets its own width and height according to the width and height of the parent element by default);
If you do not set the size of its parent element, it will set its own width and height according to the default size of the parent element, so sometimes even if you set width: 100%, height:100%; ， But it will still be small, that's why;
In the standard case, the root element of our page is html. At this time, the parent element of main div is body, and the parent element of body is html;
Therefore, at this time, we need to set the size of the html body tags;
html,body{
height: 100%;
width: 100%;
background: #F0F2F5;
}
However, the margin of the body is 8px by default, so if you want main to occupy the whole screen at this time, you need to set the margin of the body again;
*{
margin: 0;
padding: 0;
}
After two steps of setting, our main can finally occupy the whole screen;
But ha, there is a more extreme case, the so-called weird mode;
When our html document is not written! DOCTYPE html, the page will enter weird mode;
In fact, the so-called weird mode means that every company's browser will have a set of unique page parsing methods, and the most unified is the W3C standard (that is, if you add this code, you will parse the page according to the W3C standard, and if you don't add it, you will parse it according to each browser's own way);
If our page is in weird mode, the parent element of our main div is body. You can only set the size of body and no longer be responsible for the html part;
That is, the CSS style of the parent element at this time is written as follows (compared with the above, only html is deleted):
body{
height: 100%;
width: 100%;
}
When we write about these attributes such as width and height, we try to use the form of percentage, because the user's computer screen size is different, and the percentage is universal;
4.2 detail style to increase Aesthetics
#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;
}
5 page source code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Platform upgrade in progress~</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>Platform upgrade maintenance in progress, please try again later~~</h2>
</div> <!-- main-right-text-->
</div> <!-- main-right-->
</div> <!-- main-->
</body>
</html>
6 result display
