首页 > 代码库 > 百度前端学院---小薇学院---任务---10

百度前端学院---小薇学院---任务---10

2024-11-06 01:10:02   206人阅读

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7     @media screen and (max-width: 640px)  {
 8         .d {order: -1;}
 9     }
10     body{
11     padding: 0;
12     margin: 0;
13     }
14     .parent { 
15         margin-top: 100px;
16         align-items: center;
17     justify-content: space-around;
18     padding: 20px;    
19       display: flex;
20       height: 100px;
21     }
22     .a {
23     padding: 20px;
24       width: 150px;
25       height: 120px;  
26       border: 1px solid #f00;
27       
28       
29     }
30     .b {
31     padding: 20px;
32       width: 150px;
33       height: 100px;  
34       border: 1px solid #f00;
35    
36            
37     }
38     .c {
39     padding: 20px;
40       width: 150px;
41       height: 40px;  
42       border: 1px solid #f00;
43       
44       
45     }
46     .d {
47     padding: 20px;
48       width: 150px;
49       height: 200px; 
50       border: 1px solid #0f0;
51   
52       
53       }        
54     </style>
55 </head>
56 <body>
57     <div class="parent">
58         <div class="a">1</div>
59         <div class="b">2</div>
60         <div class="c">3</div>
61         <div class="d">4</div>
62     </div>
63 </body>
64 </html>

效果：技术分享

百度前端学院---小薇学院---任务---10


联系
我们