我们在确定想要使用的素材以后，通过Ps来进行获取像素、获取所需颜色等操作。获取图片大小采用像素
当取色的时候，首先使用吸色工具，然后点击颜色值获取颜色编码。
使用PS的综合分析案例
详细代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>综合案例-产品模块</title> <style> * { margin: 0; padding: 0; } body { background-color: #f5f5f5; } a { color: #333; text-decoration: none; } .box { width: 298px; height: 415px; background-color:#fff; /* 让块级的盒子水平居中对齐 */ margin: 100px auto; } .box img { /* 图片的宽度和父亲一样宽即可得到效果图，否则图片大小会超过盒子 */ width: 100%; } .review { /* height: 70px*/ height: 40px; font-size: 14px; /* 因为这个段落没有 width属性 所有 padding不会撑开盒子的宽度 */ padding: 0 28px; /*margin-top: 30px;*/ padding-top: 30px; } .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 span { color: #ff6700; } .info em { /* em标签为倾斜，通过font-style可以设置normal值为竖杠 */ font-style: normal; color: #ebe4e0; /* 设置盒子与盒子之间的距离一般使用margin */ margin: 0 6px 0 15px; } </style> </head> <body> <div class="box"> <img src="images/img.jpg" alt=""> <p class="review">快递牛，整体不错蓝牙可以说秒连。红米给力</p> <div class="appraise">来自于 117384232 的评价</div> <div class="info"> <h4> <a href="#">Redmi AirDots真无线蓝...</a></h4> <em>|</em> <span> 99.9元</span> </div> </div> </body> </html>
