–项目介绍与整体规划)
文章目录
- 0. 前置教程
- 1. 项目要做什么，页面结构与页面跳转逻辑
- 2. 最终成品，以及需要用到的知识点汇总
- 3. 搭建项目文件夹结构
- 4. 本篇小结
0. 前置教程
学习本实战项目前，建议先完成两个前置教程。
- 副队长HTML教程(完结)
- 副队长CSS教程(完结)
学完以上两个教程，再进行本实战项目，比较合适。
1. 项目要做什么，页面结构与页面跳转逻辑
本系列实战教程不会只写简单的单页 demo，我们从零动手搭建一套多页面静态技术博客网站。整个项目只使用 HTML 和 CSS，不引入 JavaScript，把前面学习的 HTML 标签、各类选择器、Flex、Grid、过渡、阴影、渐变、伪类伪元素、响应式布局等知识点，在真实项目里落地练习。
我们一共开发 5 个独立网页，页面之间依靠 a 标签超链接互相跳转，还原真实网站的访问体验。
- 首页：网站入口，用来展示网站介绍、文章卡片列表和侧边栏信息。
- 文章列表页：集中展示所有文章条目，附带静态分页 UI。
- 文章详情页：作为文章阅读页面，可以实现图文混排。
- 关于本站页：用来放置站点介绍和个人信息。
- 404 页面：访问不存在网页地址时展示，提供返回首页的链接。
页面跳转关系：打开首页，可以跳转到文章列表页、关于本站页；点击文章卡片，进入文章详情页；地址访问错误，就展示 404 页面。
2. 最终成品，以及需要用到的知识点汇总
最终成品是一套风格统一的技术博客，全站复用同一套样式，所有页面都带有顶部导航栏和底部版权区域。
页面包含这些视觉交互效果：导航鼠标悬浮高亮、文章卡片 hover 产生阴影过渡、Grid 卡片布局、圆角、渐变背景、响应式适配，手机打开网站会自动调整页面布局。
项目会用到的知识点清单：
- HTML 基础标签、div 与 span 容器、列表、超链接、图片标签
- 各类 CSS 选择器、CSS 重置样式
- Flex 布局，实现导航栏、横向模块排版
- Grid 布局，制作文章卡片、图文混排模块
- border-radius 圆角、box-shadow 阴影、gradient 渐变
- transition 过渡效果、伪类与伪元素
- 媒体查询，开发移动端响应式布局
都是前置教程详细讲解过的技术
3. 搭建项目文件夹结构
做多页面网站，第一件事就是规划文件夹，不能把所有文件全部堆在一起，规范的目录结构，后期修改维护会省心很多。
在电脑新建项目文件夹，命名 blog-demo。
blog-demo ├─ index.html ├─ list.html ├─ article.html ├─ about.html ├─ 404.html ├─ css │ └─ style.css └─ images- html 文件放在根目录
- css 文件夹存放样式文件
- images 文件夹放图片资源
每一个页面都引入同一个 style.css，保证全站样式统一。
用 VSCode 打开 blog-demo 文件夹，后面所有代码都在这个项目里面编写。
对照目录结构手动新建文件夹和空白文件，创建完成之后，我们就准备好了项目基础环境。
项目搭建完成后，效果如下：
4. 本篇小结
本篇确定项目目标，预览成品效果，梳理项目用到的知识点，并且搭建好了项目目录。下一篇，我们开始搭建项目基础骨架，编写公共头部、底部的 HTML 结构，完成 CSS 样式重置，定义网站全局基础样式。
