企业官网建设流程全解析

1. 页面开发思路

本篇开发文章详情页article.html，继续复用网站公共头部与底部。详情页采用左右布局，左侧为文章阅读主体区域，右侧保留侧边栏，和首页布局结构保持统一。

• 文章区域：标题、发布信息、正文段落、配图、引用提示块，打造舒适阅读排版
• 侧边栏：放置推荐文章列表
• 配色依旧沿用淡蓝色主题：#4086d3、#f0f7ff、#cde3ff

2. article.html 完整页面代码

下面是文章详情完整 HTML 结构，header、footer 直接复用项目公共代码，main 内部搭建文章主体与侧边栏。

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>CSS Grid布局入门讲解 - HTML+CSS实战博客</title><linkrel="stylesheet"href="css/style.css"></head><body><header><divclass="container"><divclass="header-inner"><divclass="logo">HTML+CSS实战</div><nav><ulclass="nav-list"><li><ahref="index.html">首页</a></li><li><ahref="list.html">文章列表</a></li><li><ahref="about.html">关于本站</a></li></ul></nav></div></div></header><main><divclass="container"><divclass="article-wrap"><!-- 左侧文章主体区域 --><divclass="article-main"><h1class="article-title">CSS Grid布局入门讲解</h1><divclass="article-meta"><span>发布时间：2026-10-01</span><span>分类：CSS教程</span></div><divclass="article-content"><p>Grid是强大的二维布局方案，可以同时控制行与列，适合卡片、图文混排这类复杂页面布局。Flex属于一维布局，只能控制单一方向，而Grid可以同时操作横向和纵向。</p><imgsrc="https://picsum.photos/800/360"alt="Grid布局示意图"><p>想要使用Grid布局，只需要给父容器设置display:grid。之后我们可以定义行列尺寸，快速划分页面区域。</p><blockquote>Grid非常适合做页面整体大布局，比如首页左右分栏、多列卡片。如果只是单行横向排列元素，优先选择Flex。</blockquote><p>在实际项目开发中，经常Grid和Flex搭配使用。Grid负责页面大块区域划分，Flex负责区域内小元素的对齐排列，二者结合可以高效完成绝大多数网页布局。</p></div></div><!-- 右侧侧边栏 --><asideclass="sidebar"><divclass="sidebar-box"><h3>推荐阅读</h3><ulclass="recommend-list"><li><ahref="article.html">Flex弹性布局实战技巧</a></li><li><ahref="article.html">CSS伪类与伪元素详解</a></li><li><ahref="article.html">CSS媒体查询响应式开发</a></li></ul></div></aside></div></div></main><footer><divclass="container"><p>©2026 HTML+CSS实战博客 版权所有</p></div></footer></body></html>

重点说明：页面结构和首页保持一致，共用 header 和 footer；article-main 存放正文内容，aside 作为侧边栏；blockquote 标签用来标记引用文本，属于语义化标签。

当前效果：

3. 详情页外层两栏布局 CSS

下面编写文章页面外层容器样式，使用 Grid 实现左侧文章、右侧侧边栏的两栏布局，追加到 style.css 原有样式后面。

/* 文章详情外层容器 */.article-wrap{display:grid;grid-template-columns:1fr 300px;gap:30px;margin:40px 0;}

重点说明：1fr代表剩余空间，左侧文章区域自适应宽度，侧边栏固定 300px；gap 设置两栏之间间距，和首页两栏写法保持统一，方便记忆。

当前效果：

4. 文章标题与元信息 CSS

设置文章大标题和发布信息样式，区分标题与辅助文字。

/* 文章标题 */.article-title{font-size:28px;color:#222;margin-bottom:12px;}/* 文章发布信息 */.article-meta{font-size:14px;color:#888;padding-bottom:16px;border-bottom:1px solid #eee;margin-bottom:24px;}.article-meta span{margin-right:20px;}

重点说明：元信息区域底部增加分割线，把标题区域和正文隔开；使用 span 存放多条辅助信息，横向排列。

当前效果：

5. 文章正文基础排版 CSS

设置正文段落、图片的样式，优化阅读行高，控制图片最大宽度。

/* 文章正文容器 */.article-content p{font-size:16px;line-height:1.8;color:#333;margin-bottom:16px;}.article-content img{width:100%;border-radius:6px;margin:20px 0;}

重点说明：line-height:1.8是阅读文本常用行高，文字不会拥挤；图片设置宽度 100%，自动适配文章容器宽度，不会超出正文。

当前效果：

6. 引用块 blockquote 样式

美化引用区块，使用主题淡蓝色作为左侧标识，背景使用浅蓝底色。

/* 引用区块 */.article-content blockquote{padding:16px 20px;background-color:#f0f7ff;border-left:4px solid #4086d3;margin:20px 0;color:#444;}

重点说明：左侧粗边框搭配浅蓝背景，区分引用文字和普通段落，不需要额外增加标签，纯 CSS 实现装饰效果。

当前效果：

7. 侧边栏推荐文章列表 CSS

侧边栏新增推荐阅读列表样式，和侧边栏盒子配套，增加 hover 交互。

/* 侧边栏推荐文章列表 */.recommend-list li{padding:8px 0;border-bottom:1px dashed #eee;}.recommend-list li a{font-size:14px;color:#555;transition:color 0.3s;}.recommend-list li a:hover{color:#4086d3;}

重点说明：虚线边框dashed作为列表分隔，和实线边框做出视觉区分；a 标签 hover 切换为主色调，和全站交互风格统一。

效果：

8. 本篇小结

本篇完成文章详情页开发，使用 Grid 实现左右分栏；完成标题、发布信息、段落、图片、引用块的正文阅读排版；侧边栏增加推荐文章列表。

最终效果如下：