&

零基礎網頁開發13（左右分欄設計）

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

admin

2025年7月22日 8:41 本文熱度 728

當你用Flexbox輕松實現導航欄、卡片流之后，是否遇到這樣的場景：左側需要展示精美環境圖，右側要放置活動文案？

這類「圖文左右分列」布局正是商業網站的高頻需求！今天我們就用Flexbox的延伸技巧，實現像示例中咖啡店宣傳頁一樣的顏值+信息量雙贏設計??

你將掌握：

? 精準控制圖文左右/上下排列邏輯

? 自適應留白技巧（告別擁擠版面）

? 多區塊元素同步對齊的工業級方案

?左右分欄設計依然用flexbox來制作，但是我們需注意到，上圖版面的的section中，有3個區塊元素：<img>、<h2>、<p>

如果直接用flex語法，這3個子元素便會以橫向排列的方式呈現：

因此，為實現左圖右文的效果，這里我們需要引入一個新標簽。

<div>標簽：

<div> 標簽是 HTML 中最基礎、最常用的容器元素，全稱為 "division"（分區）

一、基本概念

1. 定義：<div> 是一個通用的塊級容器，用于在文檔中創建邏輯分區，將相關元素組織在一起

2. 語義特性：

? 無特定語義含義（與 <header>、<section> 等語義標簽不同）

? 純粹用于組織和結構化內容

3. 默認特性：

? 塊級元素（默認占據整行寬度）

? 高度為0（由內容撐開）

? 無默認樣式（是"空白"容器）

二、核心作用

1. 頁面布局：搭建頁面基礎框架

<div class="container">  <div class="header"></div>  <div class="main-content"></div>  <div class="footer"></div></div>

2. 內容分組：將相關元素組織在一起

<div class="product-card">  <img src="product.jpg" alt="商品">  <h3>商品名稱</h3>  <p>商品描述</p>  <button>購買</button></div>

3. 樣式控制：為內容塊添加統一樣式

.card {  border: 1px solid #ddd;  border-radius: 8px;  padding: 20px;  box-shadow: 0 2px 4px rgba(0,0,0,0.1);}

以上概念讓人看得云里霧里？沒關系，咱們直接實操拆解

1.將<h2>和<p>標簽，合并成一個class，命名為“info”，這里的命名和之前一樣，按照個人喜好命名即可。這樣，原本的三個區塊簡化成了兩個：

這時，我們再使用flex布局，

就會產生我們想要的，左圖右文的效果啦

接下來版面的微調，就又到了我們之前講解的內容了，我們一起來看看美化效果吧（左側為示例代碼，版面整體為美化效果）

示例代碼講解：

/* 選擇所有類名為"shop"的元素內的img標簽 */.shop img {    width:50%; /* 設置圖片寬度為其父容器寬度的50% */}
/* 類名為"info"的元素 */.info {    width:50%; /* 設置寬度為父容器寬度的50% */    background-color: white; /* 背景顏色為白色 */    display:flex; /* 使用Flexbox布局 */    flex-direction:column; /* 子元素垂直排列（列方向） */    align-items: center; /* 子元素在交叉軸上居中（水平居中） */    justify-content: center; /* 子元素在主軸居中（垂直居中） */}
/* .info元素下的所有h2標題 */.info h2 {    font-size:40px; /* 設置字體大小為40像素 */    margin-bottom: 30px; /* 標題下方設置30px的外邊距，與下方元素產生間隔 */}
/* .info元素下的所有段落 */.info p {    text-align: center; /* 文本水平居中 */    line-height: 2em; /* 行高為2倍字體大?。ㄔ黾有虚g距，提高可讀性） */}

?? 整體布局方案

這布局實現了一個左右分欄設計，圖片占用 50% 寬度，信息區域占用 50% 寬度：

? .shop img: 控制左側圖片區域

? .info: 控制右側信息區域

.shop img {    width:50%; /* 圖像占用50%寬度 */}.info {    width:50%; /* 信息區域占用50%寬度 */}

?? 信息區域樣式細節 (.info)

信息區域采用了Flexbox 布局技術：

.info {    background-color: white; /* 純凈白色背景 */    display: flex; /* 激活Flex布局 */    flex-direction: column; /* 垂直方向布局 */    align-items: center; /* 水平居中 */    justify-content: center; /* 垂直居中 */}

布局效果：

1. 居中展示設計 → 內容在水平和垂直方向完美居中

2. 卡片式UI → 白色背景提供現代卡片效果

3. 響應式基礎 → Flexbox 為各種設備提供良好基礎

? 標題樣式 (.info h2)

創建醒目但優雅的標題展示：

.info h2 {    font-size: 40px; /* 大尺寸字體 */    margin-bottom: 30px; /* 標題下方留白 */}

設計意圖：

? 大號字體（40px）確保標題視覺層次清晰

? 30px 的下邊距創建舒適的標題-正文間距

? 整體營造現代咖啡館的氛圍感

?? 段落文本樣式 (.info p)

優化正文可讀性與美觀度：

.info p {    text-align: center; /* 文本居中 */    line-height: 2em; /* 雙倍行高 */}

排版科學：

? 居中文本 → 匹配整體居中的設計語言

? 2em行高 → 呼吸感排版（標準是1.5-1.8，此處放大增強奢侈感）

? 文字呼吸空間 → 強化咖啡館輕松的氛圍體驗

好啦，本章的內容到這里就結束啦~本章講解了：

?1.左右分欄設計的實現

?2.<div>標簽的概念及運用

?3.CSS美化實操代碼及解釋

?4.網頁美學常識

閱讀原文：原文鏈接

該文章在 2025/7/22 17:24:57 編輯過

關鍵字查詢

網頁

開發

設計

基礎

正在查詢...

點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。

點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理，結合碼頭的業務特點，圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體，是物流碼頭及其他港口類企業的高效ERP管理信息系統。

點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。

點晴免費OA是一款軟件和通用服務都免費，不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。