今天想弄个个人网站，翻了一圈发现现成的模板要么太花哨要么收费死贵。干脆自己从零开始撸个html模板，反正基础结构就那几样。

先定个基本框架

打开编辑器第一件事就是敲，这玩意儿必须放最前面。接着把html、head、body这些大骨架搭head区域塞进字符编码和视口设置，不然手机上看会排版错乱。

• 用header标签做顶栏，里面放网站标题和导航菜单
• main标签包主要内容，左边文章区右边侧栏
• footer简单写个版权信息和联系方式

往里填具体内容

导航菜单直接上ul和li组合，每个菜单项用a标签包着。文章区先弄个h2当标题，下面跟两段p标签填充占位文本。侧栏搞个about模块，加粗标重点的话就用strong标签强调。

中途发现段落间距太小，临时给p标签加了个margin-bottom。导航菜单的a标签默认带下划线，顺手用text-decoration去掉，鼠标悬停时变成蓝色过渡。

收尾和测试

检查所有标签是否闭合，把html文件拖到不同浏览器里打开看看。chrome和firefox显示正常，但edge里侧栏有点错位，原来是忘了给main标签设flex布局。补上display:flex之后总算齐活了。

虽然只是个基础模板，但自己亲手敲一遍确实比直接套现成的踏实。下次可以往里面加图片轮播或者留言板功能，慢慢折腾呗。