今天想唠唠新手学网页设计的事儿，刚整理完电脑里一堆练习代码，感觉挺有代表性的，干脆写个记录。
起头是让朋友坑了一把
有个哥们儿，啥基础没有，非要我教他做网页，说做个个人主页就行。我心想那还不简单？打开记事本就开始敲 html，觉得十几分钟搞定。结果刚敲了个 <head><title>我的主页</title></head>，他就在旁边问：“哥，这黄色的是为啥我打的中文在里头显示不出来？” 得，从零开始。
地基得先打牢靠
赶紧刹车，跟他说咱得一步步来。先不整花里胡哨的，就怼着最基础的 html 标签练：
- <h1> 到 <h6>：这玩意儿就是标题大小，数字越大字越小，告诉他“标题党必备”，他乐了，挨个试了一遍。
- <p> ：放普通段落，跟写作文似的。
- <div>：我说这就像包快递的盒子，啥都能往里塞，他似懂非懂地点头。
写了个超简单的例子，就两行标题加一段话，存成 .html 文件。用浏览器打开那瞬间，他“哇”了一声：“原来代码真能变成网页！” 这入门的一哆嗦算是成了。
CSS 进场就翻车
看他会改标题了，我寻思加点颜色。教他写个 * 文件，想给 h1 染个红色。告诉他用 <link> 标签把 css 拽进来。结果他写的 h1 { color red; }，死活不出效果，急得挠头。一检查，漏了个冒号！改完 h1 { color: red; }，屏幕瞬间飘红，他猛拍大腿：“原来就是这点玩意儿卡着我！” 新手中英文标点、分号真的是命门。
布局这玩意儿得靠“盒”
他想把自己照片放上去，歪七扭八堆在左边。我说得用 CSS 布局，跟他解释盒模型：内容、内边距、边框、外边距。直接找了个以前练习的“豆腐块”布局代码给他看：
- 外层 div 当大容器
- 里层用 div 当盒子
- 一个放头像（<img src="">）
- 一个放自我介绍（<p>）
- 再搞个导航菜单（<ul><li>）
教他用 float: left 让豆腐块并排，结果他几个盒子都挤成一坨塌了。这才知道宽度（width）不设置或者父容器不够宽，float 直接玩完。加了宽度百分比 width: 30% 后，豆腐块才整整齐齐漂起来。他就记住一点：float 得加宽。
选颜色全靠“吸管”救急
让他自己调色，他对着设计稿发愁。我说别死磕色号，直接用浏览器开发者工具偷颜色！按 F12 打开工具，用吸管吸设计稿上的色，复制十六进制代码往自己 CSS 里一贴，颜色一模一样。他眼睛放光：“这招太脏了！我喜欢！” 省了新手配色的纠结时间。
憋出个“作品”
折腾一下午，他捣鼓出个只有三页的个人主页：
- 首页一大标题，中间歪歪扭扭塞着他照片和一段话。
- 导航点了能跳到“我的爱好”，就一行字写喜欢打游戏。
- 还有个“联系我”页面，做了个表格（<table>），里面有电话微信。
页面没设计感？确实丑。但用他电脑打开，能点、能跳、有颜色、图片没压变形，这就够了。能跑起来的代码对新手就是强心剂。
踩坑总结：
- html 标签忘写结束符 </> —— 网页直接裂开。
- css 里漏写分号、冒号 —— 属性直接失灵。
- 图片路径写错 —— 显示个小红叉能把人逼疯。
- 忘了给浮动元素定宽 —— 布局塌得妈都不认识。
- 不同浏览器看效果不一样（尤其 Chrome 和 默认浏览器）—— 当场心肌梗塞。
零基础别怕丑，先整明白代码怎么动起来。这玩意儿就跟拼乐高似的，认熟零件（标签），知道怎么卡在一起（结构），再想造大楼。给新手整复杂理论不如丢几个实用案例抄着改，边改边骂娘，骂着骂着就会了。实践出真知，代码是写出来的，不是看出来的。
