3. 综合案例
案例1:产品模块
分析一下:
- 整体看成一个大盒子
- 里面分块分别当作小盒子
当时敲代码出现一个命名问题:
我开始命名图片b2.png,.box b2 {}一直达不到效果,后来改成普通的英文名字img.png就可以了(为什么?我还没查,应该是命名规则问题)
eg : 26-综合案例-产品模块.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
a{
color: #333;
text-decoration: none;
}
body {
background-color: #ededed;
}
.box {
width: 291px;
height: 374px;
background-color: #fff;
/* 让块级盒子水平居中对齐 */
margin: 100px auto;
}
.box img {
margin: 0 86px;
margin-top: 44px;
}
.review {
height: 14px;
font-size: 14px;
/* 因为这个段落没有width属性 所有padding不会撑开盒子的宽度 */
padding: 0 91px;
margin-top: 50px;
}
.appraise {
font-size: 12px;
color: #b0b0b0;
margin-top: 10px;
/* padding: 0 50px; */
text-align: center;
}
.info {
font-size: 14px;
color: #ff6c09;
margin-top: 25px;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<img src="image/img.png" >
<p class="review">
<a href="#">Xiaomi 12 Pro</a>
</p>
<div class="appraise">
<a href="#">全新骁龙8 1 2K AMOL ED屏幕</a>
</div>
<div class="info">4699元起</div>
</div>
</body>
</html>
网页显示:
总结:
- 布局用盒子不是都用div。标签都是有语义的,合理的地方用合理的标签。比如产品标题就用h,大量文字段落就用p。
- 多用类名。类名就是给每个盒子起了一个名字可以更好的找到这个盒子,选取盒子更容易,后期维护也方便。
- 用margin还是padding,大部分情况可以混用,都有优缺点,看实际情况。
- 思路:先分析好布局,大块,然后其中每一小块,再写代码。