How to use div+css to make a simple login interface

The knowledge of this article "how to use div+css to do a simple login interface" is not understood by most people, so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to use div+css to do a simple login interface" article.

The final effect of this example is as follows:

First, set the background color of the entire web page

Figure 1

Figure 2

Second, create a box so that it is centered horizontally, 200 pixels above.

Figure 3

Figure 4

Third, set the box with four corners as fillets and a circle of 10 pixels.

Figure 5

Figure 6

Make a ding box in a big box and set the upper two corners to be round corners and the lower two corners to be right angles.

Figure 7

Figure 8

Type a few words into the ding box so that the words are centered horizontally and vertically in the box. For the problem of centering in the box, please see my article.

Figure 9

Figure 10

6. Make three small boxes inside the deng box and name them ref. Note what the effect will be if these three boxes do not float. You can try this.

Figure 11

Figure 12

7. Add information to the ref box and send the following picture. Learn two tags here, one is input and the other is button.

Figure 13

Figure 14

Get rid of the background color and use the method of centering in the box to center these elements.

Figure 15

Figure 16

9. Through the style, set the size of the button and the size of the word. Here I specially use id to give the name of the element. Unlike class, when called in the style, one is added before. One is preceded by #.

Figure 17

Figure 18

Finally, set the password input box to hide the symbol for the password when entering the content.

Figure 19

The above is about the content of this article on "how to use div+css to make a simple login interface". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more related knowledge, please pay attention to the industry information channel.