Tutorial for Beginners | "Writing "Pulse" from 0 (1)" · Homepage Layout Analysis

Recently, many app developers Xiaobai left messages to Yuzijun, hoping to introduce some dry knowledge of novice teaching.

In order to meet the requirements of the little friends, Yuzijun specially compiled a series of novice teaching posts for you, and these dry goods sorted out, Yuzijun will share with you one by one.

So let's take a look today, this dry article "Writing "Maimai" from 0 (1) · Homepage Layout Analysis" by "Old Post Office", the moderator of the official forum of APICloud.

You Zijun's warm reminder: It's not "Mo (mo) Mo (mo)", it's Mai (mai) Mai (mai) ~

In fact, the UI interface is the div+css layout, then let's analyze the layout of the home page interface of "Maimai":

1. The home page is divided into upper, middle and lower parts: header (pink), main (green), footer (yellow), these three parts are vertically laid out, and the heights of header and footer are fixed, while the main The height will occupy the rest of the window; 2. The

header is divided into four parts: a button on the left and right, and two text labels in the middle (there is a slider below, which will dynamically change the position according to the selection);

3. The main layout is more complicated, The combination of various vertical and horizontal layouts, we will analyze it at the end;

4.footer consists of four buttons: home, work, contacts, and personal. These four buttons are horizontal layouts, gray if not clicked, and blue after clicking (In fact, there are two sets of pictures, and the other set is switched after being selected).

In addition, if the bottom navigation bar has a corresponding tabbar module, it can be called directly. Because my foundation is too poor, I will simply practice the div+css layout.

Navigation bar at the bottom of Maimai (Mosaic beauty is not Yuzi Jun, Mo licking the screen)

Preliminary knowledge:

vertical box model. The general meaning is: the parent element sets the vertical box model, and the proportion of each child element is set. In the example below, header: main: footer = 1:2:3

html:
<div id = 'wrap'>
        <div id='header'></div>
        <div id='main'></div>
        <div id='footer'></div>
</div>
Copy code
css:
#wrap{ // parent element, wrapping three child elements
        display:-webkit-box; // open box model
        -webkit-box-orient:vertical; // set to vertical box model, default is horizontal
}
#header{ // child element 1
        -webkit-box-flex:1; // in parent element container, take a share
}
#main{ // child element 2
        -webkit-box-flex:2; // In the parent element container, account for two copies
}
#footer { // child element 3
        -webkit-box-flex: 3; // in the parent element container, three copies
} The height is fixed, the main occupies the remaining part, we first write the frame: index.html <body>         <div id="wrap"> //The outermost frame, wrapping the three small frames inside                 <div id="header" ></div> //Top frame                 <div id="main"></div> //Main frame                 <div id="footer"></div> //Bottom frame         </div> </body> Copy Code main.css html,body{height: 100%} // Set the height of the parent element to 100%, and the 100% parameter of the child element wrap can take effect #wrap{ // The child element of the body inherits the height:100% attribute of the parent body

        height: 100%; // Due to the height of 100%, this wrap element will fill the page
        display: -webkit-box; // box display mode
        -webkit-box-orient: vertical; // boxes are arranged vertically
         text-align: center; //Inner center display
}
#header{ // Top frame
        text-align: center; // Center display
        background-color: #81a9c3; // Background color: blue
        color: #fff; // Text color
        width: 100%; // The width fills the screen
        height: 2.8125em; // Set the height. Note: The code of Maimai embeds a div in the #header, and sets the height of the div. In fact, it means
#main{
        -webkit-box-flex: 1; // The height accounts for 100% of the page, provided that the heights of #header and #footer are removed, so there is no need to set the height.
        width: 100%; // width fills the screen
}
#footer{
        height: 50px; // height
        line-height: 20px; // line height, #footer will have two lines, the first line is the icon, the second line is Text, set the spacing between these two lines here
        width: 100%; // the width fills the screen
        text-align: center; // center display
} Copy
the code

Source code You will find that the code I have here is not exactly the same as it, but the general meaning is the same.

Then the next work is to get the header, main and footer respectively, let's talk about follow me in the next part...

Tutorial for Beginners | "Writing "Pulse" from 0 (1)" · Homepage Layout Analysis

Guess you like