商品纯页面编程实现
一、涉及知识:
1.盒模型的使用
2.居中对齐
3.块元素的水平对齐
二、效果展示
三、代码展示:
1.css
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #f5f5f5;
}
a {
text-decoration: none;
color: #333;
}
.box {
width: 298px;
height: 415px;
margin: 100px auto;
background-color: #fff;
}
.box img {
width: 100%;
}
.review {
height: 70px;
/* font-style: 14px; */
font-size: 14px;
/* 因为段落没有width,所以不会撑大盒子 */
padding: 0 28px;
margin-top: 30px;
}
.appraise {
color: #b0b0b0;
padding: 0 28px;
margin-top: 20px;
font-size: 12px;
}
.info {
font-size: 14px;
margin-top: 15px;
}
.info h4 {
display: inline-block;
font-weight: normal;
padding: 0 28px;
}
.info span {
color: #ff6700;
}
.info em {
color: #b0b0b0;
font-style: normal;
margin: 0 5px 0 10px;
}
</style>
2.html:
<div class="box">
<img src="bg1.png" alt="">
<p class="review">快递牛,整体不错,质量给力</p>
<div class="appraise">来自于 1173876的评价</div>
<div class="info">
<h4><a href="#">Redmi AirDots真无线蓝…</a></h4>
<em>|</em>
<span>9.9元</span>
</div>
</div>