1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <!--外边距的妙用：居中元素
7 margin: 0 auto;
8 -->
9 <style>
10 #box{
11 width: 300px;
12 border:1px solid red;
13 margin: 0 auto; /*边距上下为0，左右自动对齐*/
14 }
15 /*顺时针旋转的顺序
16 margin:0 上边距
17 margin:0 1px 上 右
18 margin:0 1px 2px 3px 上 右 下 左
19 */
20 h2{
21 font-size: 16px;
22 background-color: aquamarine;
23 line-height: 40px;
24 color: white;
25 margin: 0 1px 2px 3px; /*上右下左*/
26 }
27 form{
28 background: aquamarine;
29 }
30 input{
31 border:1px solid black;
32 }
33 div:nth-of-type(1){
34 padding: 10px 2px; /*上下边距是10px,左右边距是2px*/
35 }
36 </style>
37
38 </head>
39 <body>
40 <div id="box">
41 <h2>会员登录</h2>
42 <form action="#" method="get">
43 <div>
44 <span>用户名</span>
45 <input type="text">
46 </div>
47 <div>
48 <span>密码</span>
49 <input type="password">
50 </div>
51 <div>
52 <span>邮箱</span>
53 <input type="email">
54 </div>
55 </form>
56
57 </div>
58 </body>
59 </html>
