“你的页面，丑得让我眼睛疼。”
墨尘的这条消息，让林小凡刚喝进嘴的可乐差点喷出来。
他低头看了看自己精心制作的“个人主页”——白底黑字，蓝色超链接，一张像素感人的自拍照，以及毫无美感的无序列表。
“丑吗？我觉得……挺简洁的啊？”他心虚地回复。
对方秒回：
“简洁 ≠ 丑。你的页面像Word文档，不叫网页。”
紧接着，一个链接甩了过来。
林小凡点开，一片绚丽的色彩瞬间撞进视野——渐变色标题、圆角按钮、悬浮特效……
他瞪大眼睛，手指不自觉地滑动页面。
“这……真的是用代码写出来的？”
第一节：初识CSS
林小凡按照教程，在HTML文件里加了一行：
html
<link rel="stylesheet" href="style.css">然后新建了一个style.css，战战兢兢地写下：
css
body {
background-color: #f0f0f0;
font-family: 'Arial', sans-serif;
}刷新页面——
原本刺眼的纯白背景，瞬间变成了柔和的浅灰，字体也从默认的Times New Roman变成了更现代的Arial。
“卧槽……”
他像发现了新大陆，立刻又加了几行：
css
h1 {
color: #3366ff;
text-align: center;
}刷新后，原本死板的<h1>标题变成了居中、蓝色的醒目文字。
“这比HTML刺激多了！”他兴奋地搓手。
第二节：盒模型的噩梦
然而，好景不长。
当林小凡试图给照片加个边框时，代码变成了这样：
css
img {
border: 2px solid red;
margin: 20px;
padding: 10px;
}结果——
照片周围出现了一个诡异的红色方框，但整个布局却像被无形的手推挤了一样，文字和图片的间距变得乱七八糟。
“这‘margin’和‘padding’到底是什么鬼？！”他抓狂地揪住头发。
墨尘的聊天窗口突然弹出：
“遇到盒模型问题了？”
林小凡一惊：“你怎么知道？”
“因为每个新手都会在这里卡住。”
随后，对方发来一张手绘示意图：
[ Margin（外边距） ]
[ Border（边框） ]
[ Padding（内边距） ]
[ Content（内容） ]“记住，CSS里每个元素都是一个盒子，从外到内依次是margin、border、padding、content。”
林小凡盯着图看了半天，突然恍然大悟。
“所以……我刚才其实是在照片外面套了三个隐形盒子？！”
“Bingo。”
第三节：Flex布局的救赎
两天后，林小凡终于勉强搞懂了盒模型，但新的问题又来了——
他想把导航菜单横着排，但<li>标签死活不肯听话， stubbornly 堆叠在左侧，像一列倔强的士兵。
“为什么它们不能并排？！！”他对着屏幕咆哮。
墨尘幽幽地发来一条消息：
“试试Flexbox。”
林小凡按照教程，在父元素加了：
css
ul {
display: flex;
list-style: none;
gap: 15px;
}刷新页面——
原本垂直排列的列表项，瞬间整齐地横排展开，间距均匀，仿佛被一股无形的力量驯服。
“这……这就是CSS的魔法吗？！”他激动得声音发颤。
墨尘回复：
“Flexbox只是开始。等你学会Grid，你会跪下叫爸爸。”
第四节：深夜的调色战争
凌晨1点，宿舍里只剩下林小凡的屏幕还亮着。
他正在疯狂调整配色：
css
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
text-shadow: 1px 1px 3px rgba(0,0,0,0.3);渐变背景！文字阴影！
页面终于从“90年代复古风”进化成了“至少像21世纪的产物”。
正当他陶醉时，王胖子起夜路过，眯着眼瞥了下屏幕：
“你这配色……像劣质洗发水广告。”
“你懂什么！这是莫兰迪色系……大概。”林小凡底气不足地反驳。
他偷偷打开设计师常用的配色网站，把十六进制值一个一个替换掉。
终节：魔法的代价
清晨，林小凡顶着黑眼圈把新链接发到论坛。
标题：《学了CSS三天，我的页面终于能看了！》
这一次，回复截然不同：
“这个渐变背景很舒服！”
“导航栏hover效果是怎么实现的？求代码！”
“比上次强多了，不过图片边框阴影可以再加个blur值。”
墨尘也留下了评论：
“进步很快。但记住——CSS是魔法，也是诅咒。你永远会在‘怎么又不对齐了！’和‘这颜色怎么和设计稿不一样！’之间反复崩溃。”
林小凡笑着关上电脑。
窗外，朝阳刚刚升起，把他的屏幕映出一片绚烂的光晕。
就像他刚刚学会的CSS渐变一样。
（第二章 完）
下一章预告：
第三章：JavaScript的觉醒——动态世界的钥匙
“你以为静态页面就是全部？没有JavaScript，你的网页永远是个哑巴。”——墨尘
