零基础网页开发13（左右分栏设计）

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

admin

2025年7月22日 8:41 本文热度 100

当你用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倍字体大小（增加行间距，提高可读性） */}

🌈 整体布局方案

这布局实现了一个左右分栏设计，图片占用 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协同办公管理系统。