开始动手前的准备
今天下午突然想搞个个人网页，主要就是想放点自我介绍和照片。电脑里翻出个空文件夹当基地，直接右键新建文本文档改名叫"我的主页.html"。顺手开浏览器搜了几个喜欢的简单网页截图当参考，真没想搞太复杂。
从零敲第一行代码
用记事本打开文件，啪嗒啪嗒先敲最基础的框架：<html><body></body></html>这些标签。突然想起该写标题，又在<body>前面补了<head>，塞进<title>我的小天地</title>。浏览器一刷新，标签页果然显示新标题了。
- 第一步先把导航栏搭起来，手敲<div id="nav"></div>占位置
- 接着写个横幅区域，<div id="banner">后头塞了张从硬盘上传的图片
- 核心部分划成左右两栏，左边写介绍右边放照片
样式崩坏的惨案
文字全挤成一团实在难看，赶紧新建样式.css文件。给body设了米白色背景，文字用深灰。用ID选择器给#nav调了背景色，结果死活不生效，气得猛拍键盘。瞪屏幕半小时才发现把styl*拼错成style.css，这俩字母顺序真能逼死人。
终于搞定基础布局：导航栏横在顶端，下面分三大块。左边栏宽度设30%，右边70%用float属性飘过去。照片尺寸总失控，直接暴力写死width=400px，结果在小屏幕上全挤炸了。
深夜修修补补
- 发现手机上看排版全乱，紧急加了个响应式meta标签
- 字体大小改用rem单位，总算能自适应了
- 给照片加了圆角效果，鼠标移上去会微微放大
- 导航栏文字间距调到眼快瞎，总算看着不拥挤
在页脚处敲上<hr/>分隔线，底下写行小字"2024年手搓版"。按F5刷新那瞬间，地址栏从"file:///乱七八糟的路径"变成实际网页效果，虽然土但好歹能看，成就感蹭蹭涨。
笨办法的收获
全程没敢碰花里胡哨的框架，纯手写反而更清楚每个标签的实际作用。下次再搞的话，绝对要先在纸上画框框，这回边写边改太折腾。传照片还是得用图床，本地路径在别人电脑上全变叉烧包。
最大的教训：凌晨三点发现导航栏点击没反应，才想起根本没做超链接。眼睛都熬红了还在给每个菜单项补<a href="#>，这脑子该灌咖啡了。
