8.4 博客文章排版与布局

项目目标

构建一个美观且易于阅读的博客文章页面，支持良好的排版设计，并提供响应式布局，适配移动端和桌面端的阅读体验。

1. 需求分析

页面模块：
1. 标题区（文章标题、作者、发布日期）
2. 正文内容区
3. 侧边栏（热门文章推荐或作者简介）
4. 页脚区（版权信息、分享链接）
功能与设计：
- 正文采用现代排版设计，包含标题、段落、图片和代码块。
- 侧边栏展示相关内容。
- 响应式布局：在移动端隐藏侧边栏，提供更大的内容阅读区。

2. 代码实现

2.1 HTML 结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>博客文章页面</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="header">
    <h1>CSS 从入门到精通</h1>
    <p class="meta">作者: 张三 | 发布日期: 2025-01-02</p>
  </header>
  <main class="container">
    <article class="content">
      <h2>简介</h2>
      <p>CSS 是一种用于为网页内容添加样式的语言。在本教程中，我们将从基础开始，逐步深入了解 CSS 的高级特性。</p>
      <h2>什么是 CSS</h2>
      <p>CSS 的全称是 Cascading Style Sheets，即层叠样式表。它用于控制 HTML 元素的外观和布局。</p>
      <img src="example-image.jpg" alt="示例图片">
      <h3>示例代码</h3>
      <pre><code>body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
}</code></pre>
    </article>
    <aside class="sidebar">
      <h2>热门文章</h2>
      <ul>
        <li><a href="#">Flexbox 布局详解</a></li>
        <li><a href="#">CSS Grid 初学指南</a></li>
        <li><a href="#">动画与过渡效果</a></li>
      </ul>
      <h2>关于作者</h2>
      <p>张三是一名经验丰富的前端开发工程师，擅长现代 CSS 技术和网页性能优化。</p>
    </aside>
  </main>
  <footer class="footer">
    <p>© 2025 博客平台 | <a href="#">分享本文</a></p>
  </footer>
</body>
</html>

2.2 CSS 样式

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Georgia", serif;
  line-height: 1.8;
  color: #333;
  background: #f9f9f9;
  padding: 20px;
}

/* Header */
.header {
  text-align: center;
  margin-bottom: 20px;
}

.header h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.meta {
  color: #555;
  font-size: 0.9rem;
}

/* Main Layout */
.container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.content {
  background: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.content h2 {
  margin-top: 20px;
  font-size: 1.8rem;
  color: #007acc;
}

.content p {
  margin-bottom: 15px;
}

.content img {
  max-width: 100%;
  margin: 20px 0;
  border-radius: 5px;
}

pre {
  background: #f4f4f4;
  padding: 10px;
  border-radius: 5px;
  overflow-x: auto;
}

/* Sidebar */
.sidebar {
  background: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.sidebar h2 {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar ul li {
  margin-bottom: 10px;
}

.sidebar ul li a {
  text-decoration: none;
  color: #007acc;
  transition: color 0.3s ease;
}

.sidebar ul li a:hover {
  color: #005a99;
}

/* Footer */
.footer {
  text-align: center;
  margin-top: 20px;
  font-size: 0.9rem;
}

/* Responsive Design */
@media (min-width: 768px) {
  .container {
    grid-template-columns: 3fr 1fr;
  }
}

3. 总结

核心技术：
- 使用 grid 布局实现内容与侧边栏的排列。
- 借助 pre 和 code 元素实现代码高亮效果。
扩展功能：
- 添加目录跳转功能（锚点链接）。
- 实现评论区功能，供用户互动。

通过该项目，您可以实现一个功能完整的博客文章页面，并为后续扩展提供了基础框架。

#前端开发分享于 2025-03-11

上一篇：8.3 带动画效果的登录注册表单下一篇：8.5 使用 Grid 构建电商产品页面