当前位置：首页 > news >正文

前端开发实战：从零构建个人博客页面

news 2026/8/8 9:25:00

1. 前端第二次作业：从零开始构建个人博客页面

作为一名前端开发学习者，第二次作业往往标志着从基础语法学习转向实际页面构建的关键阶段。这次我们要完成的是一个完整的个人博客页面，包含文章列表、侧边栏、页脚等常见结构元素。不同于第一次作业的简单标签练习，这次我们需要综合运用HTML语义化标签和CSS布局技术。

2. 项目需求分析

2.1 基础页面结构要求

典型的个人博客页面需要包含以下核心区域：

顶部导航栏（固定定位）
文章列表区（主内容区）
侧边栏（作者信息、分类目录等）
页脚（版权信息等）

2.2 技术实现要点

本次作业重点考察：

HTML5语义化标签的正确使用
CSS盒模型的实际应用
Flex/Grid布局技术的选择
响应式设计的基本实现

3. HTML结构搭建

3.1 语义化标签选择

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的技术博客</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header class="site-header"> <nav class="main-nav">...</nav> </header> <div class="container"> <main class="content"> <article class="post">...</article> <article class="post">...</article> </main> <aside class="sidebar"> <section class="about">...</section> <section class="categories">...</section> </aside> </div> <footer class="site-footer"> <p>© 2023 我的技术博客</p> </footer> </body> </html>

3.2 常见错误规避

新手常犯的错误包括：

滥用div而忽略语义化标签
嵌套层级不合理导致样式难以控制
忘记设置viewport导致移动端显示异常
类名命名不规范（建议使用BEM命名法）

4. CSS布局实现

4.1 主布局方案选择

对于博客类页面，推荐使用以下布局方案：

.container { display: grid; grid-template-columns: 3fr 1fr; gap: 2rem; max-width: 1200px; margin: 0 auto; padding: 0 1rem; } .content { display: flex; flex-direction: column; gap: 2rem; } .post { border: 1px solid #eee; border-radius: 8px; padding: 1.5rem; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }

4.2 响应式处理

添加媒体查询实现移动端适配：

@media (max-width: 768px) { .container { grid-template-columns: 1fr; } .sidebar { order: -1; margin-bottom: 2rem; } }

5. 样式细节优化

5.1 导航栏实现

固定定位的导航栏实现方案：

.site-header { position: fixed; top: 0; left: 0; width: 100%; background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); z-index: 100; } .main-nav { display: flex; justify-content: space-between; align-items: center; padding: 1rem; max-width: 1200px; margin: 0 auto; }

5.2 文章卡片设计

增强文章卡片的视觉效果：

.post-title { color: #333; margin-bottom: 0.5rem; font-size: 1.5rem; } .post-meta { color: #666; font-size: 0.9rem; margin-bottom: 1rem; } .post-excerpt { line-height: 1.6; color: #444; }