零基础网页开发14（产品卡片布局）

当前位置：点晴教程→知识管理交流 →『技术文档交流』

admin

2025年7月23日 12:7 本文热度 80

接上篇学习完左右分栏设计以后，我们再来接触一个经典且实用的网页布局吧。例如：

这种设计常用在你主卖产品的介绍，图文并茂。那这种版面对于flexbox来说也是洒洒水啦~话不多少，我们上实操：

1.首先HTML用<section>标签，建立一个区块，区块我这里命名为"product"

2.<section>内,新建<div>标签。将产品的介绍包含在<div>标签内，即将产品图片、名称、讲解文本，都包含在<div>标签

3.需要展示几个产品，就建立几个<div>标签

示例代码解析：

一、整体结构解析

<section class="product">  <!-- 产品卡片1 -->  <div>...</div>  <!-- 产品卡片2 -->  <div>...</div>  <!-- 产品卡片3 -->  <div>...</div></section>

1. 语义化容器

<section> 标签定义独立内容区块，class="product" 为CSS样式提供钩子

2. 卡片容器

每个 <div> 包裹一个完整产品单元，形成独立卡片

二、单个产品卡片结构（以第一个为例）

<div>  <img src="images/p1.png" alt="巴黎風法國土司">          <!-- 产品图 -->  <h3>巴黎風法國土司</h3>                           <!-- 产品名称 -->  <p>外皮金黃酥脆，內質鬆軟</br>                       <!-- 产品描述 -->  讓您體驗法式浪漫的味覺享受</p></div>

元素	作用	设计要点
<img>	产品视觉展示	alt 属性提供无障碍访问和SEO优化
<h3>	产品名称（三级标题）	建立清晰的信息层级
<p>	产品描述	使用</br>强制换行控制文本布局

三、关键设计特点

1. 响应式友好结构

嵌套的块级元素默认垂直堆叠，配合CSS可轻松实现：(CSS代码）

.product {  display: grid; /* 或 flex布局 */  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));}

◦ 移动端：卡片自动纵向排列

◦ 桌面端：卡片横向平铺

2. 无障碍优化

◦ 图片均有描述性 alt 属性（如 alt="巴黎風法國土司"）

◦ 标题层级 (<h3>) 帮助屏幕阅读器导航

3. 内容与样式分离

通过 class="product" 实现：（CSS代码）

.product div {  border: 1px solid #eee;  border-radius: 8px;  padding: 15px;}

以上就是图中html示例代码的讲解。此时，我们用HTML将网页的骨骼搭建好了，缺少CSS美化的情况下，目前版面会长这样：

接下来，我们快速用CSS进行美化，坐好扶稳，起飞喽！

📌 CSS代码逐行解析：

.product {    display: flex;                   /* 启用弹性布局 */    background-color: #ede9db;       /* 浅卡其色背景 */    justify-content: space-between;   /* 子元素水平均匀分布 */    align-items: center;             /* 垂直居中对齐 */    padding: 100px 180px 80px;      /* 内边距：上100 左右180 下80 */}

1. Flex容器设置

◦ 创建水平产品展示区（类似面包店的产品展柜）

◦ 三大核心布局属性组合：

▪ space-between → 产品卡片等间距分布

▪ align-items: center → 垂直居中（确保不同高度内容对齐）

▪ 典型电商产品陈列布局

.product div {    width: 300px;                   /* 固定卡片宽度 */    text-align: center;             /* 内容居中对齐 */

2. 产品卡片设置

◦ 受限宽度(300px) → 确保图片和文字比例协调

◦ 中心对齐 → 增强视觉秩序感

.product img {    width: 100%;                   /* 图片填充容器 */    border-radius: 10px;            /* 圆角软化边缘 */}

3. 产品图片优化

◦ width:100% → 响应式图片（保持宽高比）

◦ 圆角设计 → 模拟食品包装的柔和感

.product h3 {    font-size: 20px;               /* 标准标题字号 */    margin: 20px 0;                /* 上下间距隔离 */}
.product p {    font-size: 14px;               /* 易读正文字号 */    line-height: 1.6em;            /* 舒适行距 */}

4. 文字排版系统

◦ 标题-描述层级清晰（视觉流：图片→名称→详情）

◦ 精确间距控制 → 遵循格式塔邻近原则

◦ 1.6倍行高 → 描述文本的最佳可读性

💡 实现效果可视化

|------------------ [网页宽度] ------------------||                                                ||  [100px]                                       ||  +----------------------------------------+    ||  |[180px]              .product           |    ||  |        +----------+ +----------+ +----------+|  |        |  300px   | |  300px   | |  300px   | |  |        |  🥐图片  | |  🍞图片  | |  🥖图片  ||  |        | 标题文字 | | 标题文字 | | 标题文字 ||  |        | 描述文本 | | 描述文本 | | 描述文本 ||  |        +----------+ +----------+ +----------+|  |                                       [180px]|  +----------------------------------------+    |                                       [80px]|                                                ||------------------------------------------------|

• 三列等宽卡片自动分配间距

• 背景色(#ede9db) ≈ 烤面包的浅金色

• 整体形成聚焦式的产品展示岛台

这样，我们就快速完成了电商网站常用的卡片式布局咯。掌握此种技巧，我们网站的美观度又能轻轻松松再上一个台阶！

阅读原文：https://mp.weixin.qq.com/s/Dv8l48OaaGrKKczSHVuA7Q

该文章在 2025/7/23 12:07:52 编辑过

关键字查询

正在查询...

点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。

点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。

点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。

点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。