每日汇报第五周第三天 html表单的认证和css盒子模型

qmz-znv2 / 2023-07-25 / 原文

今日学习：

　　html表单的小考试；css简单的盒子模型；盒子模型代码

html：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3   <head>
 4     <meta charset="UTF-8">
 5     <title>Rothko Painting</title>
 6     <link href="./styles-box.css" rel="stylesheet">
 7   </head>
 8   <body>
 9     <div class="frame">
10       <div class="canvas">
11         <div class="one"></div>
12         <div class="two"></div>
13         <div class="three"></div>
14       </div>
15     </div>
16   </body>
17 </html>

css：

 1 .canvas {
 2   width: 500px;
 3   height: 600px;
 4   background-color: #4d0f00;
 5   overflow: hidden;
 6   filter: blur(2px);
 7 }
 8 
 9 .frame {
10   border: 50px solid black;
11   width: 500px;
12   padding: 50px;
13   margin: 20px auto;
14 }
15 
16 .one {
17   width: 425px;
18   height: 150px;
19   background-color: #efb762;
20   margin: 20px auto;
21   box-shadow: 0 0 3px 3px #efb762;
22   border-radius: 9px;
23   transform: rotate(-0.6deg);
24 }
25 
26 .two {
27   width: 475px;
28   height: 200px;
29   background-color: #8f0401;
30   margin: 0 auto 20px;
31   box-shadow: 0 0 3px 3px #8f0401;
32   border-radius: 8px 10px;
33   transform: rotate(0.4deg);
34 }
35 
36 .one, .two {
37   filter: blur(1px);
38 }
39 
40 .three {
41   width: 91%;
42   height: 28%;
43   background-color: #b20403;
44   margin: auto;
45   filter: blur(2px);
46   box-shadow: 0 0 5px 5px #b20403;
47   border-radius: 30px 25px 60px 12px;
48   transform: rotate(-0.2deg);
49 }