Some summaries of the mock payroll site.

This is the top navigation bar of my simulation header. Here to use the Font-awesome font icon, the usage is very simple, only need to download the good resources, and then in our site to introduce MIN.CSS, as for the specific usage is to find the name of the icon you want to use, placed in the I tag class can be.

This is a summary of the font icon that was written earlier, and put it together.

Say the font icon back to our business, top navigation bar

Summarize the wording, the outermost label is the header, where the header is set high, 47px, but also set the Line-height is also 47px, in order to be the font vertical center.

And then it contains four Div, respectively.

The main note here is that the order of the 34th div,float of Float:right is arranged according to the order of the div we wrote, that is, it is written in the front of the float:right div more to the right, so float on the rightmost Div, that left the , we have to write to the user before the only way to make the left on the far right.

Let's talk about the specific implementation of the a tag. Take home is also the first div to say. The HTML structure is as follows

Structure is very simple, our style settings are basically placed in a tag inside, the outer div in addition to floating and simple positioning without the other style, note that the outer div set the float, the width is no longer 100%, but by the content to prop up or manually set the width.

As you can see, we show that the A-label display is set to block, so that our A-tag can also include the icon and the position of the text up and down. After setting the padding around for 10px, it is obvious that the size of our a label can be automatically propped up according to the text. At this point has been basically set up, and then add a hover change the background color is completed. But sometimes we think that each a tag is separated by a distance, which can give a margin-left.

Some summaries of the mock payroll site.