CSS学习笔记(一)-13.盒子布局的案例

 

 案例代码：

 1 <!--
 2  * @Author: invoker
 3  * @Github: https://github.com/invoker2021
 4  * @Date: 2021-07-13 13:55:06
 5  * @LastEditors: invoker
 6  * @LastEditTime: 2021-07-13 15:00:46
 7  * @Description: 
 8  * @FilePath: \css\小米产品案例.html
 9 -->
10 <!DOCTYPE html>
11 <html lang="en">
12 
13 <head>
14     <meta charset="UTF-8">
15     <meta http-equiv="X-UA-Compatible" content="IE=edge">
16     <meta name="viewport" content="width=device-width, initial-scale=1.0">
17     <title>小米产品案例</title>
18     <style>
19         * {
20             margin: 0;
21             padding: 0;
22         }
23         
24         body {
25             background-color: #f5f5f5;
26         }
27         
28         .box {
29             width: 236px;
30             height: 302px;
31             margin: 100px auto;
32             background-color: #fff;
33             overflow: hidden;
34             text-align: center;
35         }
36         
37         .box img {
38             display: block;
39             width: 60%;
40             margin: 0 auto;
41         }
42         
43         .prodInfo {
44             margin-top: 20px;
45             font: 14px "Microsoft YaHei";
46         }
47         
48         .baseinfo {
49             font: 12px "Microsoft YaHei";
50             color: #B0B0B0;
51             margin-top: 5px;
52         }
53         
54         .prodPrice {
55             font: 14px "Microsoft YaHei";
56             margin-top: 5px;
57         }
58         
59         .yh {
60             color: orange;
61         }
62         
63         .yj {
64             text-decoration: line-through;
65             color: #B0B0B0;
66         }
67     </style>
68 </head>
69 
70 <body>
71     <div class="box">
72         <img src="./img/小米手机1.jpg" alt="">
73         <p class='prodInfo'>小米11 Pro</p>
74         <div class="baseinfo">
75             <span>1/1.12"GN2</span>
76             <span>|</span>
77             <span>晓龙888</span>
78         </div>
79         <div class="prodPrice">
80             <span class='yh'>4499元起</span>
81             <span class='yj'>4999元</span>
82         </div>
83     </div>
84 
85 </body>
86 
87 </html>
View Code

总结：

1.布局用什么标签，取决于其语义。不能全用div,该用标题的得用标题。该用段落用段落。

2. 每一个标签都有一个类名，方便后期维护盒子的样式。

3.margin和padding的使用原则：盒子与盒子之间的距离用margin,就不用见高度了。

4.多练习，形成自己的思路。

posted @ 2021-07-13 15:14  kaer_invoker  阅读(88)  评论(0)  编辑  收藏  举报