前端案例：产品模块

2024-03-22 05:22:07
开发
20

文章目录

产品模块效果
结构布局分析
父级盒子布局
图片和段落
评价和详情

产品模块效果

请添加图片描述

结构布局分析

1、大的父级盒子包含全部的内容
2、内容装入图片（img标签）；分别三个子盒子装入两段评价以及商品信息。
请添加图片描述

父级盒子布局

div {
            width: 300px;
            height: 400px;
            margin: auto;   /* 水平居中对齐 */
 }

<div class="box">
</div>

图片和段落

  .box img {
            width: 100%; /* 宽度和父级一致 */
        }
        .review {
            font-size: 14px;
            padding: 0 28px; /* 上下0 左右28  注意：这里的元素没有指定宽度高度，因此设置padding不会撑开盒子*/
            margin-top: 30px;
        }

    <div class="box">
        <img src="" alt="">
        <p class = "review">快递很牛，整体不错。。。</p>
    </div>

评价和详情

 <div class="info">
        <h4>Redimi 蓝牙耳机</h4>
        |
        <span>99.9元</span>
</div>

	   .info {
            font: 14px;
            padding: 0 28px;;
            margin-top:15px;
        }
        .info h4 {
            display: inline-block; /* h4标签为块级标签，这里需要和后面的标签在同一行因此需要转化一下*/
        }
        .info span {
            color:orange;
        }

 <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 300px;
            height: 400px;
            margin: auto;   /* 水平居中对齐 */
        }
        .box img {
            width: 100%; /* 宽度和父级一致 */
        }
        .review {
            font-size: 14px;
            padding: 0 28px; /* 上下0 左右28  注意：这里的元素没有指定宽度高度，因此设置padding不会撑开盒子*/
            margin-top: 30px;
        }
        .appraise {
            color: #b0b0b0;
            font: 14px;
            margin-top: 20px;
            padding:0 28px;
        }
        .info {
            font: 14px;
            padding: 0 28px;;
            margin-top:15px;
        }
        .info h4 {
            display: inline-block; /* h4标签为块级标签，这里需要和后面的标签在同一行因此需要转化一下*/
        }
        .info span {
            color:orange;
        }
    </style>


<body>
    <div class="box">
        <img src="" alt="">
        <p class = "review">快递很牛，整体不错。。。</p>
        <div class="appraise">来自117384232的评价</div>
        <div class="info">
            <h4>Redimi 蓝牙耳机</h4>
            |
            <span>99.9元</span>
        </div>
    </div>

</body>

原文地址:https://blog.csdn.net/weixin_51745630/article/details/136915111 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：https://www.suanlizi.com/kf/1770923868928741376.html 如若内容造成侵权/违法违规/事实不符，请联系《酸梨子》网邮箱：1419361763@qq.com进行投诉反馈，一经查实，立即删除！

阅读全部