基于 HTML+CSS 的个人生活主页设计与实现
一、前言
个人主页是很多人接触 Web 开发的第一个完整作品：没有后端、没有数据库，五个页面就把「我是谁、我在做什么、我喜欢什么」讲清楚。别看它小，导航布局、图文排版、色彩搭配、多页面组织这些前端基本功一个都不少，作为 Web 课程的期末作业或入门练习都非常合适。
本文拆解的这套个人生活主页基于HTML + CSS构建，五个页面（网站首页、旅游城市、日常生活、兴趣爱好、给我留言）通过统一的顶部导航组织，暖色调插画风格，图文混排覆盖照片墙、基本信息、技能证书、生活相册、兴趣展示和留言板等常见板块。麻雀虽小，但它是一张能直接看出前端功底的「名片」。
二、技术栈与页面结构
| 项 | 说明 |
|---|---|
| 结构 | HTML4/5 静态页面，共 5 页 |
| 样式 | 纯 CSS（styles.css），暖黄底色 + 卡片式布局 |
| 素材 | 34 张图片（风景摄影、插画头像、美食照片），位图为主 |
| 交互 | 页面跳转 + 锚点导航（纯静态，无 JS 框架依赖） |
| 环境 | 任意浏览器直接打开 index.html，或部署到任意静态服务器 |
这套页面刻意保持了「零依赖」：没有 jQuery、没有构建工具，双击即开。页面间通过顶部导航统一跳转，每页复用同一套头部（logo + 导航）与底部结构，改内容只需要动对应页面。
三、功能设计
五个页面的内容组织如下：
- 网站首页（index.html）：横幅大图 + 四个板块——我的照片（照片墙）、基本信息（班级/姓名/性别/年龄）、技能证书（英语四级、Office 二级、平面设计、程序员证书）、工作能力及其他专长介绍；
- 旅游城市（jy.html）：图文卡片展示去过的城市与风景照；
- 日常生活（rcsh.html）：生活相册网格——吃喝玩乐、清凉饮品、观影记录等分类照片墙；
- 兴趣爱好（xqah.html）：兴趣条目图文展示；
- 给我留言（ly.html）：留言板页面，访客留言的展示位。
设计上值得借鉴的小细节：导航当前项用「对勾 + 高亮」标记所在页面；照片墙统一比例裁剪配悬停边框；每个板块配独立小图标，信息层级一眼可辨。
四、页面结构与素材组织
目录结构非常干净，适合初学者对照学习：
personal-homepage/ ├── index.html 网站首页 ├── jy.html 旅游城市 ├── rcsh.html 日常生活 ├── xqah.html 兴趣爱好 ├── ly.html 给我留言 ├── css/ 样式表 └── images/ 34 张图片素材（风景/插画/图标）所有图片统一放 images 目录、HTML 里相对路径引用；插画头像（卡通人物）用于「我的照片」板块，规避真人照片的隐私问题；风景与美食图承担页面视觉主体。改造成自己的主页时，替换 images 里的图、改 html 里的文字即可，不动结构。
五、页面演示
网站首页：横幅 + 照片墙 + 基本信息 + 技能证书：
日常生活页，分类照片墙：
旅游城市页：
兴趣爱好页与给我留言页：
六、小结
这套个人主页适合两类用途：一是 Web 入门学习——五个页面把 HTML 结构、CSS 布局、图片排版、多页导航全部过了一遍；二是作为个人主页模板，替换文字与图片就能变成自己的网上名片。想继续演进的话，可以给留言页接一个后端（比如 Spring Boot + MySQL 做留言存取），或者引入响应式布局适配手机端。
完整资源已整理上传（含全部页面源码与图片素材）：
个人生活主页源码（HTML+CSS 静态站）
如果在实现类似页面时遇到问题，欢迎评论区交流。
