那天老师突然布置网页设计作业，全班都傻眼了。我这辈子连HTML是啥都不清楚，结果要交个能点能跳的完整网页。只能硬着头皮开搞，折腾两天居然真弄出来了，过程全给你捋一遍。
准备打仗的家伙
先把谷歌浏览器拖到桌面，随手再下个记事本编辑器。这两样东西我电脑里本来就有，真要现装也很简单。重点是把作业要求翻来覆去读三遍，用红笔把老师强调的“导航栏”“轮播图”“响应式”这些词圈出来。
平地起高楼
打开编辑器就干三件事：
1. 搭钢筋架子- 先敲<!DOCTYPE html>定基调
- <html>包住<head>和<body>两大块
- <head>里塞网页标题和字符编码
骨架搭完像这样：
<body>
<h1>作业标题</h1>
<p>这里放文字</p>
</body>
给毛坯房刷漆
上面代码在浏览器里丑得像车祸现场。立马新建CSS文件开始装修：
- 用background-color刷背景墙
- 拿font-size调字体大小
- 拖margin/padding控制留白距离
调颜色时犯了傻，把十六进制代码#FF0000写成#FF00，整个页面变透明，愣是查了半小时才发现少个0。
让网页动起来
老师要的轮播图差点要我命。打开B站找个教程边看边抄：
- 用<div>圈出图片地盘
- 在JS里写setInterval定时器
- 配opacity渐变效果
第一次做出来左右按钮是反的，点了右钮往左跑，气得我抓着鼠标晃了半天。
关键保命三招
上面几步搞完就碰到新问题：
1. 导航栏乱窜在小屏手机上菜单栏挤成俄罗斯方块。赶紧塞@media screen and (max-width:600px)这串咒语，屏幕变窄时自动把横排菜单变竖排。
2. 图片不听话插图总撑破边框。用max-width:100%强行拴住，顺便加object-fit:cover防变形。
3. 表单耍流氓提交按钮死活点不动。原来漏写了<form action="#">，补上后终于能弹出提交成功的假提示。
查漏补缺
交作业前疯狂按F5刷新测试：
- 用Chrome开发者工具模拟各种手机尺寸
- 把图片全换成猫咪表情包测试加载速度
- 使劲戳导航栏看会不会卡死
最绝的是开着网页去吃泡面，回来发现浏览器崩溃了——原来轮播图代码死循环，把我2G内存的老电脑直接送走。
老师要的根本不是多牛的技术，那些花里胡哨的效果不如把作业要求都实现清楚。按这六步走下来，两天搞个及格分网页足够了。
