副队长HTML+CSS博客网站实战 (1)–项目介绍与整体规划

文章目录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 └─ imageshtml 文件放在根目录css 文件夹存放样式文件images 文件夹放图片资源每一个页面都引入同一个 style.css保证全站样式统一。用 VSCode 打开 blog-demo 文件夹后面所有代码都在这个项目里面编写。对照目录结构手动新建文件夹和空白文件创建完成之后我们就准备好了项目基础环境。项目搭建完成后效果如下4. 本篇小结本篇确定项目目标预览成品效果梳理项目用到的知识点并且搭建好了项目目录。下一篇我们开始搭建项目基础骨架编写公共头部、底部的 HTML 结构完成 CSS 样式重置定义网站全局基础样式。