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>

10.盒子模型

 

 10.盒子模型

 

 

上一篇:25-微信小程序商城 我的收藏(微信小程序商城开发、小程序毕业设计、小程序源代码)(黄菊华-微信小程序开发教程)


下一篇:21-微信小程序商城 会员首页(微信小程序商城开发、小程序毕业设计、小程序源代码)(黄菊华-微信小程序开发教程)