10.盒子模型
作者：互联网
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6
7 <style>
8 /*body总有一个默认的外边距margin=0，常规操作*/
9 /*h1,ul,li,a,body{*/
10 /* margin:0;*/
11 /* padding:0;*/
12 /* text-decoration: none;*/
13 /*}*/
14 #box{
15 width: 300px;
16 border:1px solid red;
17 }
18 h2{
19 font-size: 16px;
20 background-color: aquamarine;
21 line-height: 40px;
22 color: white;
23 }
24 form{
25 background: aquamarine;
26 }
27 div:nth-of-type(1) input{
28 border: 3px solid black;
29 }
30 div:nth-of-type(2) input{
31 border: 3px dashed red;/*dashed red 红色虚线*/
32 }
33 div:nth-of-type(3) input{
34 border: 3px dashed greenyellow;
35 }
36
37 </style>
38
39 </head>
40 <body>
41 <div id="box">
42 <h2>会员登录</h2>
43 <form action="#" method="get">
44 <div>
45 <span>用户名</span>
46 <input type="text">
47 </div>
48 <div>
49 <span>密码</span>
50 <input type="password">
51 </div>
52 <div>
53 <span>邮箱</span>
54 <input type="email">
55 </div>
56 </form>
57
58 </div>
59 </body>
60 </html>
标签：3px,10,盒子,模型,nth,input,div,border,red 来源： https://www.cnblogs.com/wzq135/p/15362266.html