&

零基礎網頁開發14（產品卡片布局）

當前位置：點晴教程→知識管理交流 →『技術文檔交流』

admin

2025年7月23日 12:7 本文熱度 510

接上篇學習完左右分欄設計以后，我們再來接觸一個經典且實用的網頁布局吧。例如：

這種設計常用在你主賣產品的介紹，圖文并茂。那這種版面對于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協同辦公管理系統。