难度系数：简单

前面的题目就像一个个小单元，接下来，结合你前面所学知识，综合应用，完成独属于你的个人blog！

你一路披荆斩棘，终于来到了最后(?)的关卡了，微光娘表示很看好你！

但是你立刻注意到了微光娘那程序员标志性的黑眼圈：原来她为了制作自己的博客，连夜学习网站的样式与布局，但是始终达不到令自己满意的效果。

你决定大展身手，给她做个个人博客示范一下！

制作一个个人博客，内容自拟，但请千万不要抄袭！！！

可以在你的博客里谈谈为什么选择前端，选择微光？再分享点个人兴趣，生活之类的，总而言之，让大家了解了解你！

1. 搭建博客骨架：创建完整的HTML页面，使用语义化标签（如<header>、<nav>、<main>、<article>、<footer>等）来组织页面结构。博客至少应包含导航栏、自我介绍区域、文章列表和页脚。

2. 设计视觉风格：用CSS为博客设计一套自己喜欢的样式。尝试使用Flexbox或Grid进行页面布局，想一想你希望博客给人什么感觉，根据这个方向选择配色和字体。

3. 加入交互功能：用JavaScript给你的博客添加至少两个交互效果。比如：回到顶部按钮、导航栏滚动变色、图片轮播、时间问候语、简单的留言板……发挥你的创意即可。

4. 适配手机屏幕：用浏览器的设备模拟器（F12 → 切换设备工具栏）把博客切换到手机模式看看。如果排版乱了，了解一下@media媒体查询，让你的博客在手机上也能正常浏览。

进阶挑战（选做）：

5. 为博客添加一个亮色/暗色模式切换按钮。

6. 试试把博客部署到GitHub Pages或其他免费平台，让朋友们都能访问到！

• 阮一峰的网络日志
• 酷壳 – CoolShell
• 失眠海峡

• 导航栏怎么固定在页面顶部？（提示：position: sticky）
• Flexbox和Grid怎么选？一维排列用Flexbox，二维布局用Grid
• 图片在手机上显示太大了怎么办？（提示：max-width: 100%）
• 想做一个效果但不知道怎么写？先搜索关键词，大概率已经有人做过了——学会搜索是程序员最重要的技能之一
• …

提交点这里

主题示例：2026091203004-张三-前端-05

提交文件：你的blog项目代码

出题人：  > 1

QQ：3625607718

邮箱：3625607718@qq.com