魔天记忘语小说,旷世神医,古风小说君子以泽

零基礎(chǔ)網(wǎng)頁(yè)開發(fā)14（產(chǎn)品卡片布局）

當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流 →『技術(shù)文檔交流』

admin

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

接上篇學(xué)習(xí)完左右分欄設(shè)計(jì)以后，我們?cè)賮?lái)接觸一個(gè)經(jīng)典且實(shí)用的網(wǎng)頁(yè)布局吧。例如：

這種設(shè)計(jì)常用在你主賣產(chǎn)品的介紹，圖文并茂。那這種版面對(duì)于flexbox來(lái)說(shuō)也是灑灑水啦~話不多少，我們上實(shí)操：

1.首先HTML用<section>標(biāo)簽，建立一個(gè)區(qū)塊，區(qū)塊我這里命名為"product"

2.<section>內(nèi),新建<div>標(biāo)簽。將產(chǎn)品的介紹包含在<div>標(biāo)簽內(nèi)，即將產(chǎn)品圖片、名稱、講解文本，都包含在<div>標(biāo)簽

3.需要展示幾個(gè)產(chǎn)品，就建立幾個(gè)<div>標(biāo)簽

示例代碼解析：

一、整體結(jié)構(gòu)解析

<section class="product">  <!-- 產(chǎn)品卡片1 -->  <div>...</div>  <!-- 產(chǎn)品卡片2 -->  <div>...</div>  <!-- 產(chǎn)品卡片3 -->  <div>...</div></section>

1. 語(yǔ)義化容器

<section> 標(biāo)簽定義獨(dú)立內(nèi)容區(qū)塊，class="product" 為CSS樣式提供鉤子

2. 卡片容器

每個(gè) <div> 包裹一個(gè)完整產(chǎn)品單元，形成獨(dú)立卡片

二、單個(gè)產(chǎn)品卡片結(jié)構(gòu)（以第一個(gè)為例）

<div>  <img src="images/p1.png" alt="巴黎風(fēng)法國(guó)土司">          <!-- 產(chǎn)品圖 -->  <h3>巴黎風(fēng)法國(guó)土司</h3>                           <!-- 產(chǎn)品名稱 -->  <p>外皮金黃酥脆，內(nèi)質(zhì)鬆軟</br>                       <!-- 產(chǎn)品描述 -->  讓您體驗(yàn)法式浪漫的味覺(jué)享受</p></div>

元素	作用	設(shè)計(jì)要點(diǎn)
<img>	產(chǎn)品視覺(jué)展示	alt 屬性提供無(wú)障礙訪問(wèn)和SEO優(yōu)化
<h3>	產(chǎn)品名稱（三級(jí)標(biāo)題）	建立清晰的信息層級(jí)
<p>	產(chǎn)品描述	使用</br>強(qiáng)制換行控制文本布局

三、關(guān)鍵設(shè)計(jì)特點(diǎn)

1. 響應(yīng)式友好結(jié)構(gòu)

嵌套的塊級(jí)元素默認(rèn)垂直堆疊，配合CSS可輕松實(shí)現(xiàn)：(CSS代碼）

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

? 移動(dòng)端：卡片自動(dòng)縱向排列

? 桌面端：卡片橫向平鋪

2. 無(wú)障礙優(yōu)化

? 圖片均有描述性 alt 屬性（如 alt="巴黎風(fēng)法國(guó)土司"）

? 標(biāo)題層級(jí) (<h3>) 幫助屏幕閱讀器導(dǎo)航

3. 內(nèi)容與樣式分離

通過(guò) class="product" 實(shí)現(xiàn)：（CSS代碼）

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

以上就是圖中html示例代碼的講解。此時(shí)，我們用HTML將網(wǎng)頁(yè)的骨骼搭建好了，缺少CSS美化的情況下，目前版面會(huì)長(zhǎng)這樣：

接下來(lái)，我們快速用CSS進(jìn)行美化，坐好扶穩(wěn)，起飛嘍！

?? CSS代碼逐行解析：

.product {    display: flex;                   /* 啟用彈性布局 */    background-color: #ede9db;       /* 淺卡其色背景 */    justify-content: space-between;   /* 子元素水平均勻分布 */    align-items: center;             /* 垂直居中對(duì)齊 */    padding: 100px 180px 80px;      /* 內(nèi)邊距：上100 左右180 下80 */}

1. Flex容器設(shè)置

? 創(chuàng)建水平產(chǎn)品展示區(qū)（類似面包店的產(chǎn)品展柜）

? 三大核心布局屬性組合：

? space-between → 產(chǎn)品卡片等間距分布

? align-items: center → 垂直居中（確保不同高度內(nèi)容對(duì)齊）

? 典型電商產(chǎn)品陳列布局

.product div {    width: 300px;                   /* 固定卡片寬度 */    text-align: center;             /* 內(nèi)容居中對(duì)齊 */

2. 產(chǎn)品卡片設(shè)置

? 受限寬度(300px) → 確保圖片和文字比例協(xié)調(diào)

? 中心對(duì)齊 → 增強(qiáng)視覺(jué)秩序感

.product img {    width: 100%;                   /* 圖片填充容器 */    border-radius: 10px;            /* 圓角軟化邊緣 */}

3. 產(chǎn)品圖片優(yōu)化

? width:100% → 響應(yīng)式圖片（保持寬高比）

? 圓角設(shè)計(jì) → 模擬食品包裝的柔和感

.product h3 {    font-size: 20px;               /* 標(biāo)準(zhǔn)標(biāo)題字號(hào) */    margin: 20px 0;                /* 上下間距隔離 */}
.product p {    font-size: 14px;               /* 易讀正文字號(hào) */    line-height: 1.6em;            /* 舒適行距 */}

4. 文字排版系統(tǒng)

? 標(biāo)題-描述層級(jí)清晰（視覺(jué)流：圖片→名稱→詳情）

? 精確間距控制 → 遵循格式塔鄰近原則

? 1.6倍行高 → 描述文本的最佳可讀性

?? 實(shí)現(xiàn)效果可視化

|------------------ [網(wǎng)頁(yè)寬度] ------------------||                                                ||  [100px]                                       ||  +----------------------------------------+    ||  |[180px]              .product           |    ||  |        +----------+ +----------+ +----------+|  |        |  300px   | |  300px   | |  300px   | |  |        |  ??圖片  | |  ??圖片  | |  ??圖片  ||  |        | 標(biāo)題文字 | | 標(biāo)題文字 | | 標(biāo)題文字 ||  |        | 描述文本 | | 描述文本 | | 描述文本 ||  |        +----------+ +----------+ +----------+|  |                                       [180px]|  +----------------------------------------+    |                                       [80px]|                                                ||------------------------------------------------|

? 三列等寬卡片自動(dòng)分配間距

? 背景色(#ede9db) ≈ 烤面包的淺金色

? 整體形成聚焦式的產(chǎn)品展示島臺(tái)

這樣，我們就快速完成了電商網(wǎng)站常用的卡片式布局咯。掌握此種技巧，我們網(wǎng)站的美觀度又能輕輕松松再上一個(gè)臺(tái)階！

閱讀原文：https://mp.weixin.qq.com/s/Dv8l48OaaGrKKczSHVuA7Q

該文章在 2025/7/23 12:07:52 編輯過(guò)

關(guān)鍵字查詢

相關(guān)文章

正在查詢...

點(diǎn)晴ERP是一款針對(duì)中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國(guó)內(nèi)大量中小企業(yè)的青睞。

點(diǎn)晴PMS碼頭管理系統(tǒng)主要針對(duì)港口碼頭集裝箱與散貨日常運(yùn)作、調(diào)度、堆場(chǎng)、車隊(duì)、財(cái)務(wù)費(fèi)用、相關(guān)報(bào)表等業(yè)務(wù)管理，結(jié)合碼頭的業(yè)務(wù)特點(diǎn)，圍繞調(diào)度、堆場(chǎng)作業(yè)而開發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體，是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。

點(diǎn)晴WMS倉(cāng)儲(chǔ)管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購(gòu)管理,倉(cāng)儲(chǔ)管理,倉(cāng)庫(kù)管理,保質(zhì)期管理,貨位管理,庫(kù)位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號(hào)管理軟件。

點(diǎn)晴免費(fèi)OA是一款軟件和通用服務(wù)都免費(fèi)，不限功能、不限時(shí)間、不限用戶的免費(fèi)OA協(xié)同辦公管理系統(tǒng)。