今天捣鼓了个网页排版教程，说实话刚上手的时候真挺懵的，满屏代码看得我眼晕。不过折腾完这7步，突然就通透了！拿我昨天刚做的个人博客页举例：
第一步：下载个顺手的编辑器
直接在官网下了个免费编辑器。装完打开空白的编辑页面，手都有点抖——真就从零开始！先建了个文件夹，把等下要用的图片素材全扔进去，省的到处找。
第二步：捣腾HTML骨架
噼里啪敲了个基本框架，跟搭积木似的：
- <!DOCTYPE html> 这行必须放最开头
- <head> 里塞了网页标题和编码
- <body> 里先空着，主要内容都在这儿发挥
写完顺手按了保存，文件名——这步千万别忘了！
第三步：标题段落先堆上去
在body里疯狂敲字：
- 主标题用<h1>，看着就大气
- 小标题换成<h2>、<h3>
- 正文老老实实用<p>包起来
存完用浏览器打开一看，哎哟喂全挤成一坨了！
第四步：CSS文件挂钩子
赶紧新建文件，在HTML的head里加了行<link>把俩文件串起来。测试的时候故意在CSS里写了个红色背景，看到网页变红了才放心——说明挂上了！
第五步：调字体字号
在CSS里折腾半天字体：
- 直接抄了系统自带的安全字体"微软雅黑", sans-serif
- 标题字号设成28px，正文16px
- 行高调到1.6，终于不像蚂蚁爬了
第六步：边距调试到吐血
这步最费劲！拿着浏览器开发者工具戳来戳去：
- 用margin: 0 auto;把内容居中
- 段落之间敲了margin-bottom: 20px;
- 图片四周加了padding: 10px;
改完数值就刷新页面，来来回回折腾了十几次...
第七步：响应式加个保险
塞了段媒体查询：
- 屏幕宽度小于600px时启动
- 把标题字号压到22px
- 左右边距缩成10px
拿手机瞅了眼，果然不会撑爆屏幕了！
全部搞完回头看看代码，核心就三件事：结构用HTML搭，样式靠CSS调，手机适配写个保险杠。新手千万别碰花里胡哨的，基础间距调舒服了比啥都强，真的！
