效果:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c5fe54577d41ac5fee25510695ce2f7b.png)
知识点
- padding和margin
- CSS中元素定位,父元素加子元素
- 对于一个盒子,先定义其宽高、颜色等大体的样式
- 文字删除线(用于原价)
- span行内元素,不会换行
代码
<!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>产品模块</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: rgb(245, 245, 245);
}
.box {
width: 347px;
height: 448px;
background-color: rgb(255, 255, 255);
margin: 50px auto;
}
.box img {
width: 60%;
padding: 80px 70px 40px 70px;
}
.box .name {
font-weight: 300;
font-size: 17px;
margin: 60px auto 10px auto;
text-align: center;
}
.box .review {
font-weight: 300;
font-size: 15px;
color: rgb(176, 176, 176);
text-align: center;
}
.price {
text-align: center;
padding-top: 20px;
}
.price .xianjia {
color: rgb(255, 103, 0);
}
.price .yuanjia {
color: rgb(176, 176, 176);
text-decoration: line-through;
}
</style>
</head>
<body>
<div class="box">
<img src="images/TV.jpg" alt="">
<h4 class="name">全面屏电视E43K</h4>
<p class="review">全面屏设计,海量内容</p>
<div class="price">
<span class="xianjia">1399元 </span>
<span class="yuanjia">1599元</span>
</div>
</div>
</body>
</html>