CSS学习笔记(一)-13.盒子布局的案例
案例代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>
总结:
1.布局用什么标签,取决于其语义。不能全用div,该用标题的得用标题。该用段落用段落。
2. 每一个标签都有一个类名,方便后期维护盒子的样式。
3.margin和padding的使用原则:盒子与盒子之间的距离用margin,就不用见高度了。
4.多练习,形成自己的思路。
本文来自博客园,作者:kaer_invoker,转载请注明原文链接:https://www.cnblogs.com/invoker2021/p/15006538.html