综合案例：产品模块
分析：
下面是代码部分以及效果图：注意其中的注释非常重要
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #f5f5f5;
}
a {/*给我们的链接设置统一样式*/
color: #333;
text-decoration: none;
}
.box {
width: 298px;
height: 415px;
background-color: #ffffff;
/*让块级盒子水平居中*/
margin: 100px auto;
}
.box img {/*图片的样式*/
width: 100%;
}
.review {/*评论的话的样式**/
height: 70px;
font-size: 14px;
padding: 0px 28px;/*这个段落没有width属性所以不会撑开盒子，但是有height所以上下会撑开*/
margin-top: 30px;/**这里我们用外边距距离顶上来代替padding中的-top*/
}
.appraise {/*下方评论中的样式*/
font-size: 12px;
color: #b0b0b0;
margin-top: 20px;
padding:0 28px;
}
.info {/*整个介绍中的样式*/
font-size: 14px;
margin-top:15px ;
padding: 0 28px;
}
.info h4 {
display: inline-block;/*转行内块取消必须独占一行元素*/
font-weight: 400;/*文字加粗取消*/
}
.info h4 a:hover {/*当划过链接的时候会变色*/
color: powderblue;
}
.info span {
color: #f6700f;
}
.info em {
font-style: normal;/*我们给那个竖线加上形式本来是在em中是斜线但是这里让他nomal表示普通样式*/
color: powderblue;
margin:0 6px 0 15px;/*连写上右下左*/
}
</style>
</head>
<body>
<div class="box">
<img src="image_box/1.png" alt="">
<p class="review">快递牛，整体不错，蓝牙可以说妙链接红米很给力</p>
<div class="appraise">
来自于200059的评价
</div>
<div class="info">
<h4><!--这里h4是行内元素必须独占一
行但是我们想要下面的99元和他在同一行
所以我们直接把它转化成行内块-->
<a href="#"> Redim AirDots真无线蓝..</a>
</h4>
<em>|</em>
<span>99.9元</span>
</div>
</div>
</body>
</html>
本次主要是对于前面外边距的盒子模型，内边距的相关应用，同时这涉及到前面的小部分字体样式，链接样式以及行内元素转行内块等等知识
标签：info,ps,color,padding,样式,基本操作,font,margin From： https://www.cnblogs.com/222wan/p/17483923.html