前端案例:产品模块

文章目录

产品模块效果

结构布局分析

1、大的父级盒子包含全部的内容

2、内容装入 图片(img标签);分别三个子盒子装入两段评价以及商品信息。

父级盒子布局

css 复制代码
div {
            width: 300px;
            height: 400px;
            margin: auto;   /* 水平居中对齐 */
 }
html 复制代码
<div class="box">
</div>

图片和段落

css 复制代码
  .box img {
            width: 100%; /* 宽度和父级一致 */
        }
        .review {
            font-size: 14px;
            padding: 0 28px; /* 上下0 左右28  注意:这里的元素没有指定宽度高度,因此设置padding不会撑开盒子*/
            margin-top: 30px;
        }
html 复制代码
    <div class="box">
        <img src="" alt="">
        <p class = "review">快递很牛,整体不错。。。</p>
    </div>

评价和详情

html 复制代码
 <div class="info">
        <h4>Redimi 蓝牙耳机</h4>
        |
        <span>99.9元</span>
</div>
css 复制代码
	   .info {
            font: 14px;
            padding: 0 28px;;
            margin-top:15px;
        }
        .info h4 {
            display: inline-block; /* h4标签为块级标签,这里需要和后面的标签在同一行因此需要转化一下*/
        }
        .info span {
            color:orange;
        }
html 复制代码
 <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>
相关推荐
艾小码8 分钟前
这份超全JavaScript函数指南让你从小白变大神
前端·javascript
reembarkation16 分钟前
vue 右键菜单的实现
前端·javascript·vue.js
00后程序员张2 小时前
Fiddler抓包工具使用教程,代理设置与调试方法实战解析(含配置技巧)
前端·测试工具·ios·小程序·fiddler·uni-app·webview
2301_768350238 小时前
Vue第二期:组件及组件化和组件的生命周期
前端·javascript·vue.js
华洛9 小时前
公开一个AI产品的商业逻辑与设计方案——AI带来的涂色卡自由
前端·后端·产品
明远湖之鱼9 小时前
opentype.js 使用与文字渲染
前端·svg·字体
90后的晨仔10 小时前
Vue 3 组合式函数(Composables)全面解析:从原理到实战
前端·vue.js
今天头发还在吗10 小时前
【React】动态SVG连接线实现:图片与按钮的可视化映射
前端·javascript·react.js·typescript·前端框架
小刘不知道叫啥10 小时前
React 源码揭秘 | suspense 和 unwind流程
前端·javascript·react.js
szial10 小时前
为什么 React 推荐 “不可变更新”:深入理解 React 的核心设计理念
前端·react.js·前端框架