Web前端大作业：个人博客网站开发全记录

做了什么

用HTML、CSS、JavaScript做了一个个人博客网站，有5个页面：首页、关于我、项目作品、技术博客、联系我。页面之间可以来回切换，首页有轮播图，项目卡片点击能打开我之前做的练习项目。

怎么做的

结构：每个页面都有相同的导航栏，用`<nav>`标签包起来，页面内容放在`<div class="container">`里。

样式：用CSS变量统一颜色，`flex`和`grid`布局让内容居中、卡片排列整齐。

轮播图：用JavaScript控制`transform: translateX`切换图片，`setInterval`每4秒自动下一张。

响应式：手机屏幕上导航栏变成竖着排列，轮播图高度变小。

踩过的坑

1. 图片加载不出来：外网占位图被墙，换成纯色块做卡片头部，好看又稳定。

2. GitHub推送超时：学校网限制，改用SSH走443端口解决。

3. 手机端布局乱：加一行`@media (max-width: 768px)`让导航栏竖排，问题解决。

代码片段 ```css /* 统一颜色 */ :root { --primary: #2c3e50; --accent: #3498db; } /* 轮播图切换 */ function showSlide(index) { carouselInner.style.transform = `translateX(-${index * 100}%)`; }

总结

做完这个博客，把课堂上学的HTML、CSS、JS连在了一起，也学会了怎么用GitHub Pages把网站免费上线。整个过程写代码、查文档、调bug，收获很多。