副队长HTML+CSS博客网站实战 (5)-文章详情页 article.html开发

文章目录

[1. 页面开发思路](#1. 页面开发思路)
[2. article.html 完整页面代码](#2. article.html 完整页面代码)
[3. 详情页外层两栏布局 CSS](#3. 详情页外层两栏布局 CSS)
[4. 文章标题与元信息 CSS](#4. 文章标题与元信息 CSS)
[5. 文章正文基础排版 CSS](#5. 文章正文基础排版 CSS)
[6. 引用块 blockquote 样式](#6. 引用块 blockquote 样式)
[7. 侧边栏推荐文章列表 CSS](#7. 侧边栏推荐文章列表 CSS)
[8. 本篇小结](#8. 本篇小结)

1. 页面开发思路

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

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

2. article.html 完整页面代码

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

html 复制代码

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

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

当前效果：

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

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

css 复制代码

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

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

当前效果：

4. 文章标题与元信息 CSS

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

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

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

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 样式

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

css 复制代码

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

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

当前效果：

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

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

css 复制代码

/* 侧边栏推荐文章列表 */
.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 实现左右分栏；完成标题、发布信息、段落、图片、引用块的正文阅读排版；侧边栏增加推荐文章列表。

最终效果如下：