🧱 项目目标:响应式博客页面
完整代码
✅ 项目亮点:
| 项目要点 | 你练习到的知识 |
|---|---|
| 📱 响应式布局 | grid-template-columns + 媒体查询 |
| 🖼️ 图片适配 | object-fit: cover, max-height |
| 🖋️ 字体排版 | font-family, line-height |
| 📐 页面结构布局 | Grid 主体 + aside 侧边栏 |
| 🖌️ 样式美化 | Google 字体、圆角、间距等) |
【拓展功能】
| 模块 | 功能描述 |
|---|---|
| 🧭 多页导航栏 | 顶部导航支持切换“首页”和“文章页” |
| 🏠 首页列表页 | 显示文章摘要列表,点击跳转 |
| 💬 静态评论区 | 显示模拟的评论内容区域 |
| 📦 JSON 数据渲染 | 用 JavaScript 加载文章数据生成卡片 |
| 模块 | 内容 |
|---|---|
| 🧠 动态文章加载 | 通过 ?id= 获取文章内容并渲染 |
| 💬 本地模拟评论提交 | 用户输入评论后显示在页面中(本地存储) |