神武八荒一颗小说,欢乐颂小说结局是什么,官场小说排行榜

零基礎(chǔ)網(wǎng)頁開發(fā)13（左右分欄設(shè)計）

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

admin

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

當(dāng)你用Flexbox輕松實現(xiàn)導(dǎo)航欄、卡片流之后，是否遇到這樣的場景：左側(cè)需要展示精美環(huán)境圖，右側(cè)要放置活動文案？

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

你將掌握：

? 精準(zhǔn)控制圖文左右/上下排列邏輯

? 自適應(yīng)留白技巧（告別擁擠版面）

? 多區(qū)塊元素同步對齊的工業(yè)級方案

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

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

因此，為實現(xiàn)左圖右文的效果，這里我們需要引入一個新標(biāo)簽。

<div>標(biāo)簽：

<div> 標(biāo)簽是 HTML 中最基礎(chǔ)、最常用的容器元素，全稱為 "division"（分區(qū)）

一、基本概念

1. 定義：<div> 是一個通用的塊級容器，用于在文檔中創(chuàng)建邏輯分區(qū)，將相關(guān)元素組織在一起

2. 語義特性：

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

? 純粹用于組織和結(jié)構(gòu)化內(nèi)容

3. 默認(rèn)特性：

? 塊級元素（默認(rèn)占據(jù)整行寬度）

? 高度為0（由內(nèi)容撐開）

? 無默認(rèn)樣式（是"空白"容器）

二、核心作用

1. 頁面布局：搭建頁面基礎(chǔ)框架

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

2. 內(nèi)容分組：將相關(guān)元素組織在一起

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

3. 樣式控制：為內(nèi)容塊添加統(tǒng)一樣式

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

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

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

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

就會產(chǎn)生我們想要的，左圖右文的效果啦

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

示例代碼講解：

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

?? 整體布局方案

這布局實現(xiàn)了一個左右分欄設(shè)計，圖片占用 50% 寬度，信息區(qū)域占用 50% 寬度：

? .shop img: 控制左側(cè)圖片區(qū)域

? .info: 控制右側(cè)信息區(qū)域

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

?? 信息區(qū)域樣式細(xì)節(jié) (.info)

信息區(qū)域采用了Flexbox 布局技術(shù)：

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

布局效果：

1. 居中展示設(shè)計 → 內(nèi)容在水平和垂直方向完美居中

2. 卡片式UI → 白色背景提供現(xiàn)代卡片效果

3. 響應(yīng)式基礎(chǔ) → Flexbox 為各種設(shè)備提供良好基礎(chǔ)

? 標(biāo)題樣式 (.info h2)

創(chuàng)建醒目但優(yōu)雅的標(biāo)題展示：

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

設(shè)計意圖：

? 大號字體（40px）確保標(biāo)題視覺層次清晰

? 30px 的下邊距創(chuàng)建舒適的標(biāo)題-正文間距

? 整體營造現(xiàn)代咖啡館的氛圍感

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

優(yōu)化正文可讀性與美觀度：

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

排版科學(xué)：

? 居中文本 → 匹配整體居中的設(shè)計語言

? 2em行高 → 呼吸感排版（標(biāo)準(zhǔn)是1.5-1.8，此處放大增強(qiáng)奢侈感）

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

好啦，本章的內(nèi)容到這里就結(jié)束啦~本章講解了：

?1.左右分欄設(shè)計的實現(xiàn)

?2.<div>標(biāo)簽的概念及運用

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

?4.網(wǎng)頁美學(xué)常識

閱讀原文：原文鏈接

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

關(guān)鍵字查詢

網(wǎng)頁

開發(fā)

設(shè)計

基礎(chǔ)

相關(guān)文章

正在查詢...

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

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

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

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