css3之小米界面产品模块实现——学习笔记14

最新推荐文章于 2022-11-01 23:44:31 发布

一位美女

最新推荐文章于 2022-11-01 23:44:31 发布

阅读量452

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/weixin_45019830/article/details/107665304

版权

web前端专栏收录该内容

23 篇文章 2 订阅

订阅专栏

在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <style>
        /* 取消内外边距 */
        * {
            margin: 0;
            padding:0;
        }
        /* 将整个页面的底色换成这种浅浅的灰色 */
        body {
            background-color: #f5f5f5;
        }
        /* 设置盒子的长宽 背景色 居中 */
        .box {
            width: 298px;
            height: 415px;
            background-color: white;
            margin: 100px auto;/*这是块级元素的居中方式*/
        }
        .box img {
            width: 298px;
        }
        .review {
            font-size: 14px;
            height: 70px;
            padding:0 28px;
            margin-top: 30px;           
        }
        .appraise {
            color:#b0b0b0;
            font-size: 12px;
            padding:0 28px;
            margin-top: 20px;
        }
        .info {
          font-size: 14px;
          margin-top: 15px;
          padding: 0 28px;
      }
        .info h4{
            display: inline-block;/*设置成行内块元素 可以和99.9一行*/
            font-weight: 400;/*取消加粗*/
        }
        .info span {
            color: #ff6700;   
        }
        /* 斜杠 */
        .info em {
          font-style: normal;
          color: #ebe4e0;
          margin: 0 6px 0 15px;
      }
      /* 链接设置 */
      a {
          color: #333;
          text-decoration: none;
      }
    </style>

<body>
    <div class="box">
        <img src="image.jpg" alt="图片">
        <p class="review">快递牛，整体不错蓝牙可以说秒连。红米牛</p>
        <div class="appraise">来自于13435221的评价</div>
        <div class="info">
        <h4> <a href="#">Redmi AirDots真无线蓝...</a></h4>
        <em>|</em>
        <span> 99.9元</span>
     </div>
    </div>
</body>
</html>

一位美女

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css3之小米界面产品模块实现——学习笔记14

代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head> <style> .
复制链接

扫一扫