很多新手学HTML都会卡在同一个地方标签、属性、快捷键背了一堆可是关掉教程自己动手时面对一个空白文档根本不知道从哪里开始。小鲜兔儿项目就是专门治这个毛病的——它不教你背语法而是让你用纯HTML和CSS从零把一个粉白色的小兔子页面搭出来。做完之后你会发现网页里那些看起来复杂的排版和动效底层逻辑其实就那几样东西。这个项目我建议刚学完基础语法、但还没独立做过完整页面的同学拿来练手。它不依赖任何框架不用JavaScript也能实现大部分效果只需要一个文本编辑器和浏览器就能跑。本文会把从HTML骨架、盒子结构、CSS样式到动效交互的完整过程拆开讲同时把我自己踩过的几个典型坑也一并列出来希望能让你少走点弯路。1. 小鲜兔儿项目到底在练什么真正的“从零到一”说起HTML基础大家最先想到的往往是div、p、img这些孤立的标签。但做小鲜兔儿项目时你会发现一件很现实的事标签单独学很容易难的是把它们按照正确的层级组合起来让浏览器渲染出你脑子里的画面。1.1 为什么每份HTML文档都长一个样无论你打开哪个网站右键“查看网页源代码”都会看到几乎相同的外壳!DOCTYPE html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title小鲜兔儿/title link relstylesheet hrefstyle.css /head body !-- 页面内容写在这里 -- /body /html很多教程会直接让你“照抄这个模板”却不说清楚每一行是干嘛的。这里必须把几个关键点讲明白!DOCTYPE html不是标签它是文档类型声明告诉浏览器“请用最新的HTML标准来解析这份文件”。少了这行浏览器可能会进入怪癖模式导致CSS表现和预期不一致。html langzh-cn声明页面的主要语言是简体中文。这个属性一方面方便浏览器翻译、朗读工具判断发音另一方面也影响搜索引擎对页面内容的理解。做中文页面时写成zh-cn就好。meta charsetutf-8指定字符编码。中文字符如果不声明UTF-8很容易出现乱码而且这行位置要尽量靠前最好放在head的开头附近。meta nameviewport contentwidthdevice-width, initial-scale1.0是移动端适配的关键。没有这行手机浏览器会把页面当成桌面版缩小显示字小得看不清。小鲜兔儿项目的第一步就是老老实实把这段骨架写出来。我见过不少同学跳过骨架直接写div结果后续调样式时出现各种莫名其妙的问题回头检查才发现是DOCTYPE丢了或者CSS文件没引入对。1.2 这个项目的验收标准不是“像”而是“结构清楚”做之前先想清楚这个页面要长什么样我的目标很简单——页面中间站着一只圆滚滚的小兔子粉白的脸、两只竖起的耳朵、腮红和微笑底部配一行“小鲜兔儿”的标题。如果只追求“像”那直接截图放上去最快。但HTML项目练的不是图片而是结构拆分能力。你能不能把一只兔子拆成耳朵、脸、眼睛、腮红、嘴巴这几个独立模块每个模块之间是什么关系哪些是并排的兄弟节点哪些是嵌套的父子节点这一步思考比写代码重要得多。很多老手说“写HTML先画草图”画的不只是视觉草图更是结构草图整个兔子是一个大容器#rabbit容器下面只有两层耳朵层和脸部层左耳和右耳是两个独立的块但样式高度相似脸下面再嵌套眼睛、腮红、鼻子、嘴巴理清这层关系后代码结构自然就出来了后面加CSS也会顺很多。小鲜兔儿项目真正的价值就是逼你养成“先拆结构、再写标签”的习惯这个习惯会一直用到你以后做复杂页面。2. 不用图片不用canvas用div把兔子“搭”出来HTML里没有“兔子”这种现成标签网页上的图形几乎都是用div配合CSS画出来的。小鲜兔儿项目最核心的练习点就在这里怎么用几个方方正正的盒子拼出一个有辨识度的兔子轮廓。2.1 盒子模型CSS布局的基础必须吃透写CSS调样式时最绕不开的就是盒子模型。每个div在页面上都是一个矩形盒子从外到内分成四层margin外边距、border边框、padding内边距、content内容。我的建议是做小鲜兔儿项目前先做一件事随便写一个div给它分别设置宽度、内边距和边框然后打开浏览器开发者工具看那个可视化的盒子示意图。项目做完后你会发现页面里出现的所有“错位”“变宽”“挤在一起”问题百分之八十都和盒子模型有关。* { margin: 0; padding: 0; box-sizing: border-box; }这里有个特别重要的经验开始写样式前先把全局的margin和padding清零并设置box-sizing: border-box。因为不同浏览器对元素默认样式有差异清零之后才能保证我们的设置不受干扰。border-box的意思是元素最终的宽度包含边框和内边距不会因为加了边框就比预想的大一圈这对后续精确布局非常有帮助。2.2 从结构图到HTML代码一步步搭骨架按照前面想好的结构小鲜兔儿的HTML主体可以这样写main classscene div classrabbit div classear ear-left/div div classear ear-right/div div classface div classeye eye-left/div div classeye eye-right/div div classblush blush-left/div div classblush blush-right/div div classnose/div div classmouth/div /div /div h1小鲜兔儿/h1 p一只用HTML CSS画出来的小兔子/p /main你可能会问为什么耳朵和眼睛要分成ear-left、ear-right两个类而不是只写一个ear类因为左耳和右耳虽然大体相同但位置和旋转角度是对称的必须单独控制。这里有两个类名同时用在了同一个元素上一个是通用类ear负责共同的宽高、背景、圆角一个是专用类ear-left只负责定位和旋转角度。这种“公共样式提取、差异样式另写”的做法是CSS中很重要的复用思路。脸内部的face是一个相对定位容器所有的五官眼睛、腮红、鼻子、嘴巴都用绝对定位放在它内部的对应位置。这个“父容器相对定位子元素绝对定位”的组合是页面布局里出镜率最高的方案之一。2.3 绝对定位和相对定位控制兔子五官的关键新手最容易困惑的点就是position的几个属性值。用小鲜兔儿的眼睛来举例.face { position: relative; } .eye { position: absolute; width: 24px; height: 28px; background: #3a2e2e; border-radius: 50%; top: 60px; } .eye-left { left: 50px; } .eye-right { right: 50px; }position: relative本身不会让元素移动它存在的意义是给内部的绝对定位子元素当参照物。left: 50px指的是“相对.face左边缘往右50像素”而不是相对页面或浏览器。父元素一旦没有设置relative子元素就会往上找最近的定位祖先找不到就相对整个页面定位这就是很多新手“眼睛跑到页面角落”的原因。把耳朵、脸、五官都这样搭好之后你的页面应该已经出现一只不太好看但轮廓完整的兔子了。接下来才进入最出效果的环节“化妆”。3. CSS化妆术从白纸到粉白小兔结构搭好只是素颜状态真正让兔子变得粉嫩可爱的全靠CSS里的圆角、渐变、阴影和布局技巧。这一段看起来零散其实每一项都有明确的目的。3.1 圆角所有“可爱感”的来源兔子为什么可爱核心特征是圆润感。border-radius这个属性就是专门把直角变圆角的。.ear { width: 80px; height: 120px; background: #fff; border: 4px solid #f5c6d0; border-radius: 50% 50% 40% 40%; }border-radius可以一次传四个值分别对应左上、右上、右下、左下。耳朵根部稍微窄一点所以下面的圆角设成40%整体像拉长的椭圆视觉上更接近兔子耳朵。这里有个经验如果元素宽度和高度相同border-radius: 50%会得到一个正圆或椭圆如果宽高悬殊比如一个宽80px、高120px的矩形50%的圆角在长边上会显得过度比例不协调。我画兔脸时用的是border-radius: 50% 50% 45% 45%底部略收更像真实的兔子脸部轮廓。3.2 背景渐变和阴影让兔子脱离“纸片感”纯色背景虽然简洁但如果你想让页面有氛围可以给整个场景加一个浅粉到浅杏色的渐变body { min-height: 100vh; background: linear-gradient(145deg, #fff5f7 0%, #ffe0e8 100%); }linear-gradient的括号里第一个参数是渐变方向后面是颜色节点。145deg表示从左上到右下的对角线渐变比纯垂直或水平渐变更柔和自然。兔子的白色脸部在浅色背景上容易看不清边界加一道阴影是最简单的解决方案.rabbit { filter: drop-shadow(0 12px 20px rgba(210, 120, 140, 0.25)); }filter: drop-shadow和box-shadow的区别在于box-shadow只能按照盒子的矩形形状投影而drop-shadow会把透明区域之外的轮廓抠出来投影。对兔子这种由多个圆角块组成的形状来说drop-shadow的效果要自然太多阴影会跟着耳朵的轮廓走。3.3 flex布局让整个场景先居中再说页面上所有内容要整体居中这是新手第一个会遇到的布局需求。最简单的方案是flexbody { display: flex; justify-content: center; align-items: center; }display: flex把body变成一个弹性容器justify-content: center控制水平居中align-items: center控制垂直居中。但有个前提容器要有可伸展的高度。所以必须同时给body设置min-height: 100vh让它至少撑满一整个屏幕高度否则垂直方向没有多余空间居中就没有意义。第一次看到vh这个单位可能会陌生1vh等于视口高度的百分之一100vh就是整个浏览器可视区域的高度。用百分比给body设高度通常不生效因为父级html没有确定高度直接使用视口单位是更稳妥的选择。4. 让兔子活起来过渡、动画与小细节静态的兔子已经能交作业了但既然项目叫“小鲜兔儿”总要有一点俏皮的感觉。这一部分可以完全不用JavaScript靠CSS的伪元素和动画就能搞定。4.1 用伪元素给眼睛加“高光”眼睛是最能传递情绪的细节。瞳孔做成深棕色、再加一点白色高光立刻就显得水灵.eye { position: absolute; width: 24px; height: 28px; background: #3a2e2e; border-radius: 50%; top: 55px; } .eye::after { content: ; position: absolute; width: 8px; height: 8px; background: #fff; border-radius: 50%; top: 4px; left: 4px; }::after是伪元素它不需要在HTML里额外写一个div而是直接用CSS在元素内部“凭空生成”一个小块。content: 必须写哪怕内容为空否则伪元素不显示。这种用伪元素做高光、腮红、装饰点的手法在纯CSS插画里非常常见。4.2 hover交互耳朵会动的小兔子给兔子加一点反馈感最简单的是让耳朵在鼠标悬停时动一下.ear { transition: transform 0.3s ease; } .rabbit:hover .ear-left { transform: rotate(-25deg); } .rabbit:hover .ear-right { transform: rotate(25deg); }transition声明了transform属性变化时过渡动画持续0.3秒。.rabbit:hover .ear-left的意思是当鼠标悬停在.rabbit上时它内部.ear-left元素应用后面的样式。这里需要注意如果之前已经给.ear-left设置了transform: rotate(-15deg)hover时会从-15度变成-25度这就是“动一下”的效果。没有transition的话这个变化是瞬时的看起来会非常生硬。4.3 呼吸感让整个兔子微微起伏再高级一点的玩法是让兔子整体有微弱的“呼吸”节奏keyframes breath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } } .rabbit { animation: breath 3s ease-in-out infinite; }keyframes定义一套动画关键帧0%和100%时原始大小50%时放大到1.03倍。animation使用这套动画周期3秒无限循环。ease-in-out让缩放速度在开头和结尾更缓和模拟呼吸起伏节奏。结合前面的drop-shadow整体效果就是兔子在页面中央轻轻起伏影子也随之显隐。这种微动效不会喧宾夺主却让页面立刻有了生气。5. 翻车现场复盘这五个坑我几乎每个都踩过小鲜兔儿项目我带着不同学员做过很多次每一次都能在同一个地方看到同样的报错和翻车。这里挑五个出现频率最高的问题完整复盘一下排查思路。5.1 中文乱码charset的位置写晚了现象页面标题和文字出现“灏忛矞鍏斿効”之类的乱码。原因meta charsetutf-8没有被浏览器在第一时间读到导致浏览器在解析中文字符时用了错误的编码。排查过程先确认HTML文件保存时的编码格式是不是UTF-8再确认charset声明是不是在title之前。有些编辑器默认用GBK保存文件即使声明了UTF-8也可能乱码。解决办法在编辑器右下角把文件编码改成UTF-8同时保证HTML前五行是标准骨架charset声明放在head最前面。5.2 居中失败flex写了却不居中的真相现象兔子和文字没有水平垂直居中而是靠在左上角或只水平居中。原因通常是body没有高度或者flex属性写错了容器。排查过程打开开发者工具检查display: flex是否生效看看body的实际高度。如果body只有内容那么高垂直方向没有剩余空间align-items: center自然没有效果。解决办法给body设置min-height: 100vh再检查子元素的宽度是否被其他样式影响。5.3 圆角失效说好的“圆圆的”怎么变方了现象设置了border-radius但元素看起来没什么变化。原因元素没有设宽度和高度内容撑开的大小不够明显或者圆角和边框混合时圆角被box-sizing的设置干扰。排查过程先在开发者工具里看元素的实际盒子大小。如果宽高太接近0或者太小border-radius的百分比效果当然不明显。解决办法给要画形状的元素显式设置width和height并统一使用box-sizing: border-box。5.4 margin塌陷子元素的margin跑到了父元素外面现象给脸部里的某个元素设置margin-top结果整个兔子往下移了一段距离。原因父元素没有设置padding、border或overflow时子元素的margin-top会“穿透”到父元素外部这种现象叫margin塌陷。排查过程检查.face是否设置过overflow: hidden或display: flex之类的属性回忆一下是不是刚给某个五官加了margin-top就触发了移位。解决办法在父元素上增加display: flex或者用padding代替子元素的margin还可以给父元素设置overflow: hidden。我最常用的是给父元素加display: flex因为它同时还能解决很多其他布局问题。5.5 样式不更新改了半天页面没变化现象CSS文件改了浏览器刷新后还是老样子。原因浏览器缓存了旧的CSS文件或者CSS文件路径写错样式根本没加载进来。排查过程按F12打开开发者工具在Network标签里看CSS文件是否加载成功切换到Sources标签确认修改的内容是否真的保存到文件里。解决办法开发时按下CtrlShiftR强制刷新更稳妥的做法是在link标签的href后面加版本号比如style.css?v2这样浏览器会当作新文件请求。6. 小鲜兔儿之后的下一步把技能迁移到更多场景做完小鲜兔儿这个项目不应该是终点。它积累下来的方法和经验可以迁移到各种其他页面中。6.1 场景装饰从一个兔子到“完整的场景画”目前页面只有一个兔子主体略显孤单。你可以发挥一下给页面底部加一条弧形“草地”天上加几朵白云或小星星这些都可以用div加border-radius实现.star { width: 6px; height: 6px; background: #fff; border-radius: 50%; position: absolute; animation: twinkle 1.5s ease-in-out infinite; } keyframes twinkle { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }这种做法的好处是不用引入任何图片资源纯代码生成文件体积极小加载速度非常快。以后再遇到“画一个小动物”“画一个吉祥物”的需求小鲜兔儿积累的结构拆分思维完全可以复用。6.2 从静态到动态引入JavaScript之后的三种玩法当CSS能给你的想象力开始不够时就是引入JavaScript的好时机。小鲜兔儿项目非常适合做渐进增强我建议按顺序尝试三个方向第一个方向是点击反馈点击兔子的脸时它的腮红颜色变深一下像被戳了脸。实现只需要一个小事件监听器代码量不超过十行。第二个方向是随机位置让一只小蝴蝶或小星星在页面里随机移动这能训练你对定时器和随机数的理解。第三个方向是交互输入加一个输入框让访客输入自己的名字然后页面上的标题自动变成“XX的小鲜兔儿”。这会涉及简单的DOM操作和字符串处理。这三个方向难度是递增的但它们都在小鲜兔儿已有的结构上扩展不用重写任何HTML。保持同样的代码基础逐步加入新能力是学习时最舒服的节奏。6.3 动手之前的一个实用建议如果你打算在小鲜兔儿基础上继续加功能建议先给代码补上注释。哪怕只是每一块结构顶上写一句“这是左耳”“这是眼睛”后面改起来都会省很多事。项目变大后你会明显感觉到写得清楚的代码比写得“巧妙”的代码更值钱。最后分享一个我自己的习惯每次完成一个小项目我会把它压缩到一个文件夹里命名为“项目-日期-版本”例如rabbit-20250120-v1。等改出问题或者变复杂之后就不会因为找不到旧版本而头疼。小鲜兔儿只是第一个后面每一个项目都值得这样对待。 
长河君 · 2026/9/18 6:48:30 · 阅读 1.2k 小鲜兔儿实战：从盒子模型到CSS动效，纯HTML+CSS搭建网页
很多新手学HTML都会卡在同一个地方标签、属性、快捷键背了一堆可是关掉教程自己动手时面对一个空白文档根本不知道从哪里开始。小鲜兔儿项目就是专门治这个毛病的——它不教你背语法而是让你用纯HTML和CSS从零把一个粉白色的小兔子页面搭出来。做完之后你会发现网页里那些看起来复杂的排版和动效底层逻辑其实就那几样东西。这个项目我建议刚学完基础语法、但还没独立做过完整页面的同学拿来练手。它不依赖任何框架不用JavaScript也能实现大部分效果只需要一个文本编辑器和浏览器就能跑。本文会把从HTML骨架、盒子结构、CSS样式到动效交互的完整过程拆开讲同时把我自己踩过的几个典型坑也一并列出来希望能让你少走点弯路。1. 小鲜兔儿项目到底在练什么真正的“从零到一”说起HTML基础大家最先想到的往往是div、p、img这些孤立的标签。但做小鲜兔儿项目时你会发现一件很现实的事标签单独学很容易难的是把它们按照正确的层级组合起来让浏览器渲染出你脑子里的画面。1.1 为什么每份HTML文档都长一个样无论你打开哪个网站右键“查看网页源代码”都会看到几乎相同的外壳!DOCTYPE html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title小鲜兔儿/title link relstylesheet hrefstyle.css /head body !-- 页面内容写在这里 -- /body /html很多教程会直接让你“照抄这个模板”却不说清楚每一行是干嘛的。这里必须把几个关键点讲明白!DOCTYPE html不是标签它是文档类型声明告诉浏览器“请用最新的HTML标准来解析这份文件”。少了这行浏览器可能会进入怪癖模式导致CSS表现和预期不一致。html langzh-cn声明页面的主要语言是简体中文。这个属性一方面方便浏览器翻译、朗读工具判断发音另一方面也影响搜索引擎对页面内容的理解。做中文页面时写成zh-cn就好。meta charsetutf-8指定字符编码。中文字符如果不声明UTF-8很容易出现乱码而且这行位置要尽量靠前最好放在head的开头附近。meta nameviewport contentwidthdevice-width, initial-scale1.0是移动端适配的关键。没有这行手机浏览器会把页面当成桌面版缩小显示字小得看不清。小鲜兔儿项目的第一步就是老老实实把这段骨架写出来。我见过不少同学跳过骨架直接写div结果后续调样式时出现各种莫名其妙的问题回头检查才发现是DOCTYPE丢了或者CSS文件没引入对。1.2 这个项目的验收标准不是“像”而是“结构清楚”做之前先想清楚这个页面要长什么样我的目标很简单——页面中间站着一只圆滚滚的小兔子粉白的脸、两只竖起的耳朵、腮红和微笑底部配一行“小鲜兔儿”的标题。如果只追求“像”那直接截图放上去最快。但HTML项目练的不是图片而是结构拆分能力。你能不能把一只兔子拆成耳朵、脸、眼睛、腮红、嘴巴这几个独立模块每个模块之间是什么关系哪些是并排的兄弟节点哪些是嵌套的父子节点这一步思考比写代码重要得多。很多老手说“写HTML先画草图”画的不只是视觉草图更是结构草图整个兔子是一个大容器#rabbit容器下面只有两层耳朵层和脸部层左耳和右耳是两个独立的块但样式高度相似脸下面再嵌套眼睛、腮红、鼻子、嘴巴理清这层关系后代码结构自然就出来了后面加CSS也会顺很多。小鲜兔儿项目真正的价值就是逼你养成“先拆结构、再写标签”的习惯这个习惯会一直用到你以后做复杂页面。2. 不用图片不用canvas用div把兔子“搭”出来HTML里没有“兔子”这种现成标签网页上的图形几乎都是用div配合CSS画出来的。小鲜兔儿项目最核心的练习点就在这里怎么用几个方方正正的盒子拼出一个有辨识度的兔子轮廓。2.1 盒子模型CSS布局的基础必须吃透写CSS调样式时最绕不开的就是盒子模型。每个div在页面上都是一个矩形盒子从外到内分成四层margin外边距、border边框、padding内边距、content内容。我的建议是做小鲜兔儿项目前先做一件事随便写一个div给它分别设置宽度、内边距和边框然后打开浏览器开发者工具看那个可视化的盒子示意图。项目做完后你会发现页面里出现的所有“错位”“变宽”“挤在一起”问题百分之八十都和盒子模型有关。* { margin: 0; padding: 0; box-sizing: border-box; }这里有个特别重要的经验开始写样式前先把全局的margin和padding清零并设置box-sizing: border-box。因为不同浏览器对元素默认样式有差异清零之后才能保证我们的设置不受干扰。border-box的意思是元素最终的宽度包含边框和内边距不会因为加了边框就比预想的大一圈这对后续精确布局非常有帮助。2.2 从结构图到HTML代码一步步搭骨架按照前面想好的结构小鲜兔儿的HTML主体可以这样写main classscene div classrabbit div classear ear-left/div div classear ear-right/div div classface div classeye eye-left/div div classeye eye-right/div div classblush blush-left/div div classblush blush-right/div div classnose/div div classmouth/div /div /div h1小鲜兔儿/h1 p一只用HTML CSS画出来的小兔子/p /main你可能会问为什么耳朵和眼睛要分成ear-left、ear-right两个类而不是只写一个ear类因为左耳和右耳虽然大体相同但位置和旋转角度是对称的必须单独控制。这里有两个类名同时用在了同一个元素上一个是通用类ear负责共同的宽高、背景、圆角一个是专用类ear-left只负责定位和旋转角度。这种“公共样式提取、差异样式另写”的做法是CSS中很重要的复用思路。脸内部的face是一个相对定位容器所有的五官眼睛、腮红、鼻子、嘴巴都用绝对定位放在它内部的对应位置。这个“父容器相对定位子元素绝对定位”的组合是页面布局里出镜率最高的方案之一。2.3 绝对定位和相对定位控制兔子五官的关键新手最容易困惑的点就是position的几个属性值。用小鲜兔儿的眼睛来举例.face { position: relative; } .eye { position: absolute; width: 24px; height: 28px; background: #3a2e2e; border-radius: 50%; top: 60px; } .eye-left { left: 50px; } .eye-right { right: 50px; }position: relative本身不会让元素移动它存在的意义是给内部的绝对定位子元素当参照物。left: 50px指的是“相对.face左边缘往右50像素”而不是相对页面或浏览器。父元素一旦没有设置relative子元素就会往上找最近的定位祖先找不到就相对整个页面定位这就是很多新手“眼睛跑到页面角落”的原因。把耳朵、脸、五官都这样搭好之后你的页面应该已经出现一只不太好看但轮廓完整的兔子了。接下来才进入最出效果的环节“化妆”。3. CSS化妆术从白纸到粉白小兔结构搭好只是素颜状态真正让兔子变得粉嫩可爱的全靠CSS里的圆角、渐变、阴影和布局技巧。这一段看起来零散其实每一项都有明确的目的。3.1 圆角所有“可爱感”的来源兔子为什么可爱核心特征是圆润感。border-radius这个属性就是专门把直角变圆角的。.ear { width: 80px; height: 120px; background: #fff; border: 4px solid #f5c6d0; border-radius: 50% 50% 40% 40%; }border-radius可以一次传四个值分别对应左上、右上、右下、左下。耳朵根部稍微窄一点所以下面的圆角设成40%整体像拉长的椭圆视觉上更接近兔子耳朵。这里有个经验如果元素宽度和高度相同border-radius: 50%会得到一个正圆或椭圆如果宽高悬殊比如一个宽80px、高120px的矩形50%的圆角在长边上会显得过度比例不协调。我画兔脸时用的是border-radius: 50% 50% 45% 45%底部略收更像真实的兔子脸部轮廓。3.2 背景渐变和阴影让兔子脱离“纸片感”纯色背景虽然简洁但如果你想让页面有氛围可以给整个场景加一个浅粉到浅杏色的渐变body { min-height: 100vh; background: linear-gradient(145deg, #fff5f7 0%, #ffe0e8 100%); }linear-gradient的括号里第一个参数是渐变方向后面是颜色节点。145deg表示从左上到右下的对角线渐变比纯垂直或水平渐变更柔和自然。兔子的白色脸部在浅色背景上容易看不清边界加一道阴影是最简单的解决方案.rabbit { filter: drop-shadow(0 12px 20px rgba(210, 120, 140, 0.25)); }filter: drop-shadow和box-shadow的区别在于box-shadow只能按照盒子的矩形形状投影而drop-shadow会把透明区域之外的轮廓抠出来投影。对兔子这种由多个圆角块组成的形状来说drop-shadow的效果要自然太多阴影会跟着耳朵的轮廓走。3.3 flex布局让整个场景先居中再说页面上所有内容要整体居中这是新手第一个会遇到的布局需求。最简单的方案是flexbody { display: flex; justify-content: center; align-items: center; }display: flex把body变成一个弹性容器justify-content: center控制水平居中align-items: center控制垂直居中。但有个前提容器要有可伸展的高度。所以必须同时给body设置min-height: 100vh让它至少撑满一整个屏幕高度否则垂直方向没有多余空间居中就没有意义。第一次看到vh这个单位可能会陌生1vh等于视口高度的百分之一100vh就是整个浏览器可视区域的高度。用百分比给body设高度通常不生效因为父级html没有确定高度直接使用视口单位是更稳妥的选择。4. 让兔子活起来过渡、动画与小细节静态的兔子已经能交作业了但既然项目叫“小鲜兔儿”总要有一点俏皮的感觉。这一部分可以完全不用JavaScript靠CSS的伪元素和动画就能搞定。4.1 用伪元素给眼睛加“高光”眼睛是最能传递情绪的细节。瞳孔做成深棕色、再加一点白色高光立刻就显得水灵.eye { position: absolute; width: 24px; height: 28px; background: #3a2e2e; border-radius: 50%; top: 55px; } .eye::after { content: ; position: absolute; width: 8px; height: 8px; background: #fff; border-radius: 50%; top: 4px; left: 4px; }::after是伪元素它不需要在HTML里额外写一个div而是直接用CSS在元素内部“凭空生成”一个小块。content: 必须写哪怕内容为空否则伪元素不显示。这种用伪元素做高光、腮红、装饰点的手法在纯CSS插画里非常常见。4.2 hover交互耳朵会动的小兔子给兔子加一点反馈感最简单的是让耳朵在鼠标悬停时动一下.ear { transition: transform 0.3s ease; } .rabbit:hover .ear-left { transform: rotate(-25deg); } .rabbit:hover .ear-right { transform: rotate(25deg); }transition声明了transform属性变化时过渡动画持续0.3秒。.rabbit:hover .ear-left的意思是当鼠标悬停在.rabbit上时它内部.ear-left元素应用后面的样式。这里需要注意如果之前已经给.ear-left设置了transform: rotate(-15deg)hover时会从-15度变成-25度这就是“动一下”的效果。没有transition的话这个变化是瞬时的看起来会非常生硬。4.3 呼吸感让整个兔子微微起伏再高级一点的玩法是让兔子整体有微弱的“呼吸”节奏keyframes breath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } } .rabbit { animation: breath 3s ease-in-out infinite; }keyframes定义一套动画关键帧0%和100%时原始大小50%时放大到1.03倍。animation使用这套动画周期3秒无限循环。ease-in-out让缩放速度在开头和结尾更缓和模拟呼吸起伏节奏。结合前面的drop-shadow整体效果就是兔子在页面中央轻轻起伏影子也随之显隐。这种微动效不会喧宾夺主却让页面立刻有了生气。5. 翻车现场复盘这五个坑我几乎每个都踩过小鲜兔儿项目我带着不同学员做过很多次每一次都能在同一个地方看到同样的报错和翻车。这里挑五个出现频率最高的问题完整复盘一下排查思路。5.1 中文乱码charset的位置写晚了现象页面标题和文字出现“灏忛矞鍏斿効”之类的乱码。原因meta charsetutf-8没有被浏览器在第一时间读到导致浏览器在解析中文字符时用了错误的编码。排查过程先确认HTML文件保存时的编码格式是不是UTF-8再确认charset声明是不是在title之前。有些编辑器默认用GBK保存文件即使声明了UTF-8也可能乱码。解决办法在编辑器右下角把文件编码改成UTF-8同时保证HTML前五行是标准骨架charset声明放在head最前面。5.2 居中失败flex写了却不居中的真相现象兔子和文字没有水平垂直居中而是靠在左上角或只水平居中。原因通常是body没有高度或者flex属性写错了容器。排查过程打开开发者工具检查display: flex是否生效看看body的实际高度。如果body只有内容那么高垂直方向没有剩余空间align-items: center自然没有效果。解决办法给body设置min-height: 100vh再检查子元素的宽度是否被其他样式影响。5.3 圆角失效说好的“圆圆的”怎么变方了现象设置了border-radius但元素看起来没什么变化。原因元素没有设宽度和高度内容撑开的大小不够明显或者圆角和边框混合时圆角被box-sizing的设置干扰。排查过程先在开发者工具里看元素的实际盒子大小。如果宽高太接近0或者太小border-radius的百分比效果当然不明显。解决办法给要画形状的元素显式设置width和height并统一使用box-sizing: border-box。5.4 margin塌陷子元素的margin跑到了父元素外面现象给脸部里的某个元素设置margin-top结果整个兔子往下移了一段距离。原因父元素没有设置padding、border或overflow时子元素的margin-top会“穿透”到父元素外部这种现象叫margin塌陷。排查过程检查.face是否设置过overflow: hidden或display: flex之类的属性回忆一下是不是刚给某个五官加了margin-top就触发了移位。解决办法在父元素上增加display: flex或者用padding代替子元素的margin还可以给父元素设置overflow: hidden。我最常用的是给父元素加display: flex因为它同时还能解决很多其他布局问题。5.5 样式不更新改了半天页面没变化现象CSS文件改了浏览器刷新后还是老样子。原因浏览器缓存了旧的CSS文件或者CSS文件路径写错样式根本没加载进来。排查过程按F12打开开发者工具在Network标签里看CSS文件是否加载成功切换到Sources标签确认修改的内容是否真的保存到文件里。解决办法开发时按下CtrlShiftR强制刷新更稳妥的做法是在link标签的href后面加版本号比如style.css?v2这样浏览器会当作新文件请求。6. 小鲜兔儿之后的下一步把技能迁移到更多场景做完小鲜兔儿这个项目不应该是终点。它积累下来的方法和经验可以迁移到各种其他页面中。6.1 场景装饰从一个兔子到“完整的场景画”目前页面只有一个兔子主体略显孤单。你可以发挥一下给页面底部加一条弧形“草地”天上加几朵白云或小星星这些都可以用div加border-radius实现.star { width: 6px; height: 6px; background: #fff; border-radius: 50%; position: absolute; animation: twinkle 1.5s ease-in-out infinite; } keyframes twinkle { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }这种做法的好处是不用引入任何图片资源纯代码生成文件体积极小加载速度非常快。以后再遇到“画一个小动物”“画一个吉祥物”的需求小鲜兔儿积累的结构拆分思维完全可以复用。6.2 从静态到动态引入JavaScript之后的三种玩法当CSS能给你的想象力开始不够时就是引入JavaScript的好时机。小鲜兔儿项目非常适合做渐进增强我建议按顺序尝试三个方向第一个方向是点击反馈点击兔子的脸时它的腮红颜色变深一下像被戳了脸。实现只需要一个小事件监听器代码量不超过十行。第二个方向是随机位置让一只小蝴蝶或小星星在页面里随机移动这能训练你对定时器和随机数的理解。第三个方向是交互输入加一个输入框让访客输入自己的名字然后页面上的标题自动变成“XX的小鲜兔儿”。这会涉及简单的DOM操作和字符串处理。这三个方向难度是递增的但它们都在小鲜兔儿已有的结构上扩展不用重写任何HTML。保持同样的代码基础逐步加入新能力是学习时最舒服的节奏。6.3 动手之前的一个实用建议如果你打算在小鲜兔儿基础上继续加功能建议先给代码补上注释。哪怕只是每一块结构顶上写一句“这是左耳”“这是眼睛”后面改起来都会省很多事。项目变大后你会明显感觉到写得清楚的代码比写得“巧妙”的代码更值钱。最后分享一个我自己的习惯每次完成一个小项目我会把它压缩到一个文件夹里命名为“项目-日期-版本”例如rabbit-20250120-v1。等改出问题或者变复杂之后就不会因为找不到旧版本而头疼。小鲜兔儿只是第一个后面每一个项目都值得这样对待。