1. 第一次作业到底在考什么拆解评分点与核心需求很多刚接触web前端的同学第一次拿到作业时的反应通常是两种一种是觉得太简单“不就写个页面嘛网上模板一抓一大把”另一种是发懵“老师说的语义化、盒模型、布局到底要我做成什么样”。我见过几百份交上来的“web前端第一次作业”说实话绝大多数人不是不会写代码而是根本没搞清楚这份作业真正在考察什么。第一次作业几乎所有老师都会限死条件只能用HTML和CSS不许引框架不许写JavaScript。很多同学不理解觉得都2025年了还限制这么多是不是太落伍了。恰恰相反正因为框架和工具链迭代太快HTML和CSS的基础功底才显得更重要。框架是别人的轮子但你对页面结构的理解、对样式控制的能力才是你自己的本事。作业限制得越死其实越能暴露一个人对前端最底层原理的掌握程度。我把常见的评分维度整理了一下虽然不同老师侧重点有差异但大体逃不出这四块评分维度常见占比实际考察点HTML结构30%标签使用是否合理、语义化是否到位、嵌套是否规范CSS样式30%选择器使用、盒模型理解、属性覆盖关系页面布局20%整体排版是否整齐、是否用对了布局方案细节完成度20%间距是否统一、hover是否有反馈、代码是否整洁先说HTML结构这30分。很多新人喜欢用一堆div从头包到尾再堆几个span当文字容器最后交上去的代码打开一看满屏都是没有意义的标签。你要知道HTML不是用来“把页面撑出来”的而是用来描述内容是什么的。一张网页里有顶部导航那就用header有主体内容就用main有页脚信息就用footer。每一块内容是什么角色就用对应的标签去承载这才是语义化的本质。你写div classheader和写header在浏览器里渲染出来的样子几乎一模一样但在可访问性和代码可读性上完全是两个层次。再说CSS样式这30分。这里重点考察的是你有没有真正理解“样式是怎么作用到元素上的”。类名写得到不到位、选择器权重会不会算、相同的样式属性冲突时浏览器怎么决定用哪个这些基本功比你会背多少属性重要得多。很多同学喜欢给每个元素单独写样式写了十好几个类名每个类名里重复写着相同的color和font-size代码冗余到不行。真正会写的人会用类名做归组让相同的样式只写一次。一份作业交上去老师看你代码的冗余程度基本就能判断你是自己一行行写的还是从某个模板里改出来的。布局那部分反而是最容易拿分的因为现在的布局方案比早年强太多了。Flex布局和Grid布局把过去用浮动弹来弹去的问题几乎全解决了。只要你理解了主轴和交叉轴这两个概念大部分常见排版都能轻松搞定。难的是你愿不愿意多用那么一两行代码而不是遇到布局不对就疯狂调margin去“顶”。细节完成度最容易被忽视但其实最好拿分。统一的间距、统一的圆角、hover时颜色有变化这些不涉及任何高深知识纯粹是态度问题。很多作业样式写完了交互一点没有鼠标放上去整个页面毫无反应就显得特别“死”。加一个transition动画三五行的功夫整个页面的完成度和精致感立刻不一样。把评分点搞清楚你再回头去看作业要求思路就会清晰很多我要做的不是“一个好看的页面”而是一份能证明我掌握了HTML结构、CSS样式、基础布局和细节规范的完整作品。目标明确了后面每一步都有章可循。2. 核心基础怎么打牢HTML语义化、CSS选择器、盒模型与Flex布局2.1 HTML骨架与基础标签先把房子的框架搭对第一次作业不管主题是什么页面的HTML结构几乎都有一个固定套路顶部一个头部区域中间一块主体区域底部一个页脚区域。头部里通常放着标题或导航主体里放着你要展示的核心内容页脚放版权信息或者联系方式。这就好比盖房子先有承重墙和房梁再谈装修风格。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的个人主页/title link relstylesheet hrefcss/style.css /head body header h1你好我是前端练习生/h1 nav ul lia href#about关于我/a/li lia href#works作品展示/a/li lia href#contact联系我/a/li /ul /nav /header main section idabout h2关于我/h2 p这里写一段自我介绍。/p /section section idworks h2作品展示/h2 p这里放几个作品卡片。/p /section section idcontact h2联系我/h2 p邮箱、社交账号等。/p /section /main footer p© 2025 前端练习生/p /footer /body /html这段骨架里有几个细节值得你抄进笔记。第一langzh-CN告诉浏览器这个页面是中文内容对搜索引擎和朗读工具都很重要。第二meta里那个viewport标签是移动端适配的基石没有它页面在手机上就会按PC宽度缩小显示字小到看不清。第三导航用nav加列表ul来写而不是随便扔一排文字链接在外面因为导航本质上就是一个列表结构这个语义是天然的。h1到h6的层级也注意一下。一个页面只应该有一个h1它是整个页面的主题下面用h2分章节再用h3分小节。标题层级乱掉就好比一本书的目录乱写读者无论是人还是搜索引擎都会迷失方向。2.2 CSS引入方式与选择器样式的“寻址系统”CSS有三种引入方式内联样式、内部样式、外部样式。第一次作业强烈建议用外部样式也就是单独建一个.css文件用link标签引到HTML里。这样做的好处是结构和样式彻底分离HTML只管内容CSS只管表现后面想改样式完全不用动结构代码。面试的时候如果连为什么用外部样式都答不上来会显得非常不专业。/* 基础重置清掉浏览器默认间距 */ * { margin: 0; padding: 0; box-sizing: border-box; }box-sizing: border-box这个声明建议你从写第一行CSS开始就养成习惯加上。它改变的是盒子的宽度计算方式——默认的content-box模式下你设置width: 200px如果再加上padding: 20px和border: 5px盒子实际占的宽度就是200 40 10 250px。而border-box模式下这200px包含padding和border实际内容区自动缩小布局时心里算的尺寸和实际渲染的尺寸才对得上。我见过太多新手布局对不齐根子就出在这个盒模型默认值上。选择器方面先用好四类标签选择器、类选择器、ID选择器、后代选择器。ID在页面上应该唯一所以样式上尽量用类ID留给JavaScript去操作。类名命名有个土办法但很管用用功能命名而不是用样子命名。.red-text就比.warning差因为哪天你把警告改成蓝色.red-text这个名字就成了谎言。.card、.nav-list、.footer-info这类按角色命名的类代码读起来就像在读一篇文章。优先级这块不用死记记住一个口诀!important 内联样式 ID 类 标签 通配符。同一优先级下后写的覆盖先写的。实际写作业时别碰!important一旦用了它说明你的选择器本身就没写好。2.3 盒模型与Flex布局把元素和排列方式摸透盒模型是所有CSS布局的地基。你看页面上的任何一个元素其实都是一个个矩形盒子套在一起。最里面是内容content往外是内边距padding再往外是边框border最外面是外边距margin。打个比方你买了一个相框照片是content相框和照片之间的海绵垫是padding相框的木边是border相框和墙面上其他相框之间的距离就是margin。新手最容易混淆的是padding和margin。记住一条padding是元素内部的呼吸空间margin是元素外部的距离。想让卡片里的文字别贴着卡片边缘加padding想让两个卡片之间隔开一段距离加margin。看效果时打开浏览器开发者工具选中元素后页面会直接高亮显示四个区域蓝色是content、绿色是padding、黄色是border、橙色是margin一眼就明白。再说Flex布局。第一次作业里最常见的布局场景无非三种导航横向排列、卡片横向排列或换行、元素水平垂直居中。这三种场景Flex全都能优雅解决。.nav-list { display: flex; gap: 20px; list-style: none; justify-content: flex-end; }display: flex一开子元素自动横向排列这是Flex最直观的效果。gap控制子元素之间的间距这个属性是后加的老一点的布局还在用margin硬撑有gap之后省心太多不需要再给最后一个元素单独去掉margin。justify-content控制主轴上的对齐flex-end就是靠右align-items控制交叉轴上的对齐center就是垂直居中。.card-list { display: flex; flex-wrap: wrap; gap: 24px; } .card { flex: 1 1 260px; max-width: 320px; }这里flex: 1 1 260px是三个值的缩写flex-grow允许放大、flex-shrink允许缩小、flex-basis基础宽度。意思是每个卡片的基础宽度260px空间多时可以等分放大空间不足时可以等比例缩小再配合flex-wrap: wrap实现换行。用这套组合拳自适应卡片列表就写好了窗口拉大卡片跟着变宽窗口缩小卡片自动换行不需要写一行媒体查询。为什么推荐你用Flex而不是继续用float因为float设计初衷其实是“文字环绕图片”后来被人硬拿来布局带来了一堆副作用父元素会塌陷、需要清除浮动、垂直居中几乎做不到。Flex是专门为布局设计的语义正确、代码简洁、坑少。第一次作业虽然简单但选对工具的习惯比工具本身更值钱。3. 从零到一完整做一份能拿高分的web前端第一次作业3.1 定主题与搭目录别一上来就写代码很多同学写作业失败不是不会写代码而是没想清楚自己要做什么就匆匆开写。写了一半发现这个主题没什么内容可展示或者做着做着不知道下一块该放什么最后草草收尾。我在实际带新人的时候要求他们在打开编辑器之前先回答三个问题页面主题是什么核心展示内容有哪些整个页面分几个区块举个例子以“个人介绍页”为主题。核心内容可以是一张头像照片、一段自我介绍、几项技能标签、两个作品卡片、一个联系方式区域。区块就按前面说的头部导航、关于我、作品展示、联系我、页脚。这三个问题想清楚整个页面的信息架构就定了。接下来搭目录。别把所有东西平铺在一个文件夹里从一开始就按工程化的习惯组织web-frontend-homework/ ├── index.html ├── css/ │ └── style.css └── images/ ├── avatar.jpg ├── work-1.jpg └── work-2.jpgHTML文件放在根目录CSS单独放css文件夹图片统一归到images文件夹。这样分类的好处是文件多了之后不会乱引用路径也直观。图片引用路径写images/avatar.jpg相对路径就能在HTML里找到而不需要写一长串绝对路径。用相对路径还有一个好处整个项目文件夹拷给别人只要保持相对位置不变页面就能正常打开。3.2 完整HTML代码把骨架搭起来我直接给你一份可以照着写的完整HTML。主题就定为人个介绍页这是第一次作业里最经典的主题——内容来源就是你自己的生活不存在没有素材的问题。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title小明的主页 - Web前端第一次作业/title link relstylesheet hrefcss/style.css /head body header classsite-header div classcontainer h1 classlogo小明/h1 nav classmain-nav ul lia href#about关于我/a/li lia href#skills技能/a/li lia href#works作品/a/li lia href#contact联系/a/li /ul /nav /div /header main section idabout classabout-section div classcontainer div classabout-grid div classavatar-wrapper img srcimages/avatar.jpg alt小明的头像照片 /div div classabout-text h2关于我/h2 p你好我是小明一名正在学习web前端开发的学生。我对网页设计和用户体验有浓厚的兴趣目前正在系统学习HTML、CSS和JavaScript。/p p这个页面是我的第一份前端作业整个页面完全用手写HTML和CSS完成没有使用任何框架。/p /div /div /div /section section idskills classskills-section div classcontainer h2我掌握的技能/h2 ul classskill-list liHTML5 语义化/li liCSS3 样式与布局/li liFlex 弹性布局/li liGit 版本管理/li li基础 Photoshop/li /ul /div /section section idworks classworks-section div classcontainer h2我的作品/h2 div classcard-list div classcard img srcimages/work-1.jpg alt作品一预览图 h3第一个静态页面/h3 p这是我最早完成的页面主要练习了HTML标签和基础CSS属性。/p /div div classcard img srcimages/work-2.jpg alt作品二预览图 h3Flex布局练习/h3 p为了提高布局能力我用Flex实现了一个卡片式布局的页面。/p /div /div /div /section section idcontact classcontact-section div classcontainer h2联系我/h2 p邮箱xiaomingexample.com/p pGitHubgithub.com/xiaoming/p /div /section /main footer classsite-footer div classcontainer p© 2025 小明 · 使用纯HTML与CSS制作/p /div /footer /body /html注意我在每个section上用了id属性同时导航里的链接用#about这种形式指向对应区块。这样点击导航菜单页面会自动滚动到对应区域这个叫锚点定位不需要写任何JavaScript就能实现是新手很容易忽略的好用功能。每个图片标签都有alt属性。这个属性在图片正常显示时你看不到什么区别但一旦图片加载失败页面上会显示这段文字屏幕阅读工具也会朗读这段文字给视障用户听。写alt不是应付检查而是前端工程师的基本素养。3.3 完整CSS代码让页面有血有肉HTML搭好了现在写CSS让页面“活”起来。我按区块来讲解你可以一边敲一边理解每段代码的作用。全局重置与基础样式* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif; line-height: 1.6; color: #333; background-color: #f7f8fa; } .container { max-width: 960px; margin: 0 auto; padding: 0 20px; }font-family这一长串叫系统字体栈。意思是从左往右依次尝试使用苹果系统字体、苹方字体、微软雅黑……每台设备都从自己系统里能找到的字体里挑一个最合适的。好处非常实际不需要加载任何字体文件页面打开速度飞快而且视觉风格贴合操作系统原生观感。与之相对的糟糕做法是给中文页面用英文衬线字体中文渲染出来姿态各异观感十分业余。line-height: 1.6是正文比较舒服的行高比例文字不会挤成一团也不会稀疏得像在排版画报。#333作为正文主色比纯黑#000柔和得多长时间读起来不刺眼。背景用#f7f8fa这个极浅的灰色是为了让白色的卡片区域有区分度形成层次感。.container是整个页面内容宽度统一的关键。所有区块的内容都被它约束在max-width: 960px以内然后margin: 0 auto实现水平居中。这样做页面两边的留白自动协调不管窗口多宽内容都保持一致的舒适阅读宽度。头部导航样式.site-header { background-color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); position: sticky; top: 0; z-index: 100; } .site-header .container { display: flex; justify-content: space-between; align-items: center; height: 64px; } .logo { font-size: 24px; font-weight: 700; color: #2c6fbb; } .main-nav ul { display: flex; gap: 24px; list-style: none; } .main-nav a { text-decoration: none; color: #555; font-weight: 500; transition: color 0.2s ease; } .main-nav a:hover { color: #2c6fbb; }头部设置白底加一点点淡淡的阴影视觉上就把导航和下面的内容区分开了。position: sticky; top: 0让导航在页面往下滚动时始终吸在顶部这是用户体验的小细节。display: flex配合space-between让logo靠左、导航靠右垂直方向用align-items: center居中三行代码搞定导航双侧布局。导航链接默认颜色是灰色#555hover时变成品牌蓝色#2c6fbb并且加了transition做250毫秒的渐变过渡。鼠标移上去时颜色平滑变化而不是生硬地跳变这个细节对整体精致度影响很大成本却只是多写一行transition。关于我区域.about-section { padding: 80px 0; } .about-grid { display: flex; align-items: center; gap: 48px; } .avatar-wrapper img { width: 180px; height: 180px; border-radius: 50%; object-fit: cover; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); } .about-text h2 { font-size: 32px; margin-bottom: 12px; color: #222; } .about-text p { margin-bottom: 12px; color: #555; }头像用border-radius: 50%切成圆形object-fit: cover让图片在固定尺寸下自动裁剪居中不会拉伸变形。图片下方浅浅一层box-shadow制造“浮起来”的感觉。左右两栏用Flex布局align-items: center保证文字与图片垂直居中对齐视觉上更整齐。技能与作品卡片.skills-section { background-color: #fff; padding: 60px 0; } .skill-list { display: flex; flex-wrap: wrap; gap: 16px; list-style: none; margin-top: 24px; } .skill-list li { background-color: #eef4fb; color: #2c6fbb; padding: 8px 18px; border-radius: 20px; font-size: 14px; font-weight: 500; } .works-section { padding: 60px 0; } .card-list { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 24px; } .card { flex: 1 1 260px; max-width: 340px; background-color: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); transition: transform 0.2s ease, box-shadow 0.2s ease; } .card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); } .card img { width: 100%; height: 180px; object-fit: cover; display: block; } .card h3 { padding: 16px 20px 4px; font-size: 18px; } .card p { padding: 0 20px 20px; font-size: 14px; color: #777; }技能标签用圆角胶囊样式浅蓝底深蓝字整套配色和整体风格统一。卡片用flex: 1 1 260px控制基础宽度max-width: 340px防止拉伸过头。我把background-color: #fff、border-radius: 12px、box-shadow这三个属性组合起来模拟出“卡片悬浮在白纸上”的效果——这是现在界面设计里最常见的视觉语言之一。卡片hover时用translateY(-4px)让卡片向上浮起一点点同时阴影变深变扩散配合transition过渡效果整个交互反馈非常自然。这就是我前面说的“加分项”原理很简单但完成度立刻不一样。页脚与联系区域.contact-section { background-color: #fff; padding: 60px 0; } .site-footer { background-color: #222; color: #aaa; padding: 24px 0; text-align: center; font-size: 14px; }页脚用深色和前面所有浅色区块形成对比整页有了一种“收束感”。文字的浅灰#aaa在深色背景上不会太刺眼。整个页面的配色方案控制在主色蓝#2c6fbb、正文灰#333/#555、背景浅灰#f7f8fa、白色区块这四类颜色以内视觉统一性就有了。3.4 提交前的自查清单代码写完之后别急着提交按照这个清单过一遍在浏览器里打开index.html逐块检查页面是否正常显示。按F12打开开发者工具看Console有没有报错。虽然你还没写JavaScript但图片路径错误往往会在Console里留下记录顺着提示就能找到问题。拖动窗口改变宽度从宽屏一直拖到手机宽度。观察卡片是否会自动换行、导航是否不会挤成一团、文字是否溢出。点击导航里的每个链接确认都能跳转到对应区块。检查图片的alt文字。随便改一个图片的src路径让它加载失败页面上会显示你写的alt文字确认它们都合理。代码格式整洁。子元素统一缩进两个空格属性之间统一换行格式类名命名风格一致。代码是写给浏览器执行的但更是写给人看的——包括未来的你自己。4. 让作业从“完成”到“优秀”细节质感与加分技巧4.1 配色、字体与间距决定第一印象的三大要素页面的技术含量老师要打开代码才能看到但视觉第一印象在打开的一瞬间就形成了。很多时候两个同学的作业功能差不多分数却差了一档差距就出在视觉细节上。配色方面第一次作业最容易犯的错是颜色太多、太杂。红一块蓝一块绿一块像极了过期广告页。一个稳妥的办法是先选一个主色把它用在导航、标题、按钮这些需要强调的地方再选一个中性色系灰、白、浅灰作为底色和背景其他任何辅助色不超过一个。我用的主色#2c6fbb就是一个很典型的商务蓝配浅灰背景、白卡片整套页面稳得住了。想找好看的颜色去一些配色网站直接抄配色方案也行但抄完要会自己判断这些颜色之间搭不搭。字体方面正文和标题的字体权重要有区分。标题粗一些、大一些正文常规大小和粗细辅助说明文字再小一号、灰一点。一个页面里的字号层级控制在三个级别左右就够清晰了大标题28-36px、正文16px左右、辅助信息13-14px。层级明确页面就有节奏感读者扫一眼就知道哪些是重点。间距方面一个特别容易被忽视的细节是同样的间距要重复出现。比如卡片内部padding统一用20px区块和区块之间的纵向间距统一用60px卡片之间的间隔统一用24px。这些数值你定下来之后就在全局复用页面会呈现出一种内在的秩序感专业和业余的差别往往就在这种看不见的地方。4.2 不加JavaScript也能做的交互细节第一次作业限制不能写JavaScript但完全不意味着页面必须是静态的。CSS本身能实现的交互效果相当多用好了会让页面“活”起来。hover反馈是所有交互里最基础的。导航文字变色、卡片浮起带阴影、按钮按下时缩小一点都是几行代码的事。做法统一一点所有可交互元素都有一个hover效果用户就明确知道“这个东西是可以点的”。反过来整个页面hover毫无反应用户会觉得自己在浏览一张截图。transition动画是实现平滑过渡的关键属性。它的四个参数分别是要过渡的属性、持续时间、缓动函数、延迟时间。比如transition: all 0.3s ease虽然简单但写all性能不太好更规范的做法是明确指定要过渡的属性比如transition: transform 0.2s ease, box-shadow 0.2s ease。养成这个习惯以后做更复杂的效果时会省掉很多性能排查的麻烦。如果你还想更进一步可以尝试:focus伪类。键盘用户用Tab键聚焦到导航链接或按钮时给元素加一个明显的轮廓或者底色变化这会让你的作业在可访问性上明显领先别人一个身位。a:focus, button:focus { outline: 2px solid #2c6fbb; outline-offset: 2px; }一键搞定但很少有新人会主动做。4.3 用开发者工具实时调试写出精确CSS的核心方法很多新手写CSS靠“猜”——写一个属性刷新一下页面不对再改一个属性再刷新。这种改法效率低而且很难理解样式为什么不对。正确做法是大量使用浏览器自带的开发者工具DevTools。在页面上右键点击任何元素选择“检查”DevTools就会打开右侧的Styles面板会展示这个元素最终生效的所有CSS规则。想在预览效果不用回编辑器改代码再刷新浏览器——直接在DevTools里改属性值页面实时更新。改满意了再把正确的值抄回你的CSS文件里。这个工作流能帮你节省大量来回刷新的时间更重要的是你能直观看到每一条样式规则的作用过程。遇到样式不生效的问题同样打开DevTools看元素的Styles面板被覆盖的样式会显示删除线提示是哪个更高优先级的选择器覆盖了它浏览器自带样式会标“user agent stylesheet”。把这条链路捋清楚你就能指着屏幕说出“这个颜色之所以没生效是因为.card p的优先级打不过.intro .title”而不是瞎猜。5. 新人必踩的坑与排查路径我第一次写作业时的翻车实录说几个我在教学里反复见到的经典翻车现场也是我自己当年亲身踩过的坑。你要是提前看到这一节至少省下三天的折腾时间。图片不显示。这是出现频率最高的问题。排查路径是先看Console里的报错信息通常会告诉你图片资源加载失败。如果报的是404那就是路径写错了。注意images/avatar.jpg和./images/avatar.jpg以及../images/avatar.jpg的区别——前者是从当前文件所在目录出发的相对路径后者是相对于上一级目录。HTML在根目录时引用images下的图片不用加../。还有一个常见翻车点是文件名的大小写Avatar.jpg和avatar.jpg在Windows上可能傻傻分不清但提交到Linux服务器上就会直接404。养成习惯文件名统一用小写字母加连字符比如avatar-photo.jpg。CSS样式完全不生效。先检查link标签的href路径对不对再确认CSS文件确实保存了然后确认CSS文件里没有语法错误。一个常见的低级错误是少写了一个花括号导致后面所有样式全部失效。DevTools的Console里会直接报CSS语法错误注意看。还有浏览器缓存问题——你改了CSS但刷新页面还是老样子按Ctrl Shift R强制刷新Mac是Cmd Shift R绕过缓存加载最新文件。盒模型导致的宽度溢出。设置了width: 300px又加了padding: 20px结果卡片总宽度变成了340px把布局撑破了。这就是我前面反复强调的box-sizing: border-box没加导致的。在通配符选择器里统一加上一劳永逸。图片底部有一条空隙。图片默认是inline级别的元素它的底部会跟文字基线对齐所以图片和容器底部之间会多出几像素的空白。解决办法就是在CSS里给图片加display: block。几乎每个新手都会遇到这个问题但几乎没人知道原因知道以后就是一个习惯问题。margin重叠。相邻两个元素的垂直margin会发生重叠取两者中较大的那一个而不是相加。比如上方元素margin-bottom: 40px下方元素margin-top: 20px实际间距是40px而不是60px。这个现象叫“margin collapse”新手完全不知情以为自己在认真调间距却在和自己看不见的规则搏斗。解决办法布局间距尽量统一用margin-bottom从上往下推或者用Flex的gap从根本上避开这个问题。我把这些坑整理成了一张速查表方便你遇到问题时快速定位现象最常见的根因排查思路图片不显示路径错误或文件名大小写不一致看Console的404报错确认路径层级样式全没生效link路径错误或CSS语法错误检查href和CSS文件里的花括号样式部分不生效选择器优先级冲突DevTools看删除线调高权重或加类名页面宽度溢出没加box-sizing: border-box全局统一加border-box图片底部有缝隙img默认为inline元素给img加display: block两个元素的间距不对margin垂直重叠改用gap或只使用一个方向的marginhover效果突然卡顿transition写在:hover里transition写在元素默认状态上让进出都有过渡最后一条值得展开一下transition要写在元素的默认状态里而不是:hover状态里。如果写在:hover里鼠标移入时有过渡移出时效果瞬间消失非常生硬。写在默认状态里鼠标移入和移出都有平滑过渡这才是正确的写法。6. 一份“作业”完全可以成为你作品集的第0页我见过太多学前端的人对自己做的第一份作业不屑一顾觉得“太丑了等以后学好了再做漂亮的作品”。但实际上第一份作业恰恰是你整个学习路径上最重要的一份“版本记录”。我还记得自己当年的第一份作业一个简陋到只有标题和两段文字的个人介绍页背景色还是系统默认的白色连图片都没有。但现在回头看那个页面记录了我从完全不懂到第一次理解“标签”和“选择器”是什么的转折点。所以我的建议是做完这份作业之后别把它删了也别急着覆盖。把项目文件夹存好在Git里打好标签标注好“v1.0 - 我的第一份前端作业”。以后每隔几个月做一版新的个人主页放在不同的目录里。一年之后你再打开来看哪几个月的进步最大、哪个阶段开始懂得布局了、哪个阶段开始注重细节了全部一目了然。这个过程比任何课程进度表都更能给你继续学下去的信心。实际写代码的时候如果遇到哪一步想不明白就打开DevTools去拆别人网站的做法右键检查你看中的布局看它是怎么用Flex排列的用了哪些间距数值颜色是什么。拆个三五次你对CSS的理解会比闷头看十天教程都来得快。前端这个行当入门门槛确实不高但基本功扎不扎实写个三五页页面就能看出来。把这份作业当成你认真对待自己代码习惯的起点——语义化的标签、有规划的类名、统一的设计数值、该有的交互反馈、提交前逐项自查。这套工作方式无论你以后写业务页面还是自己做的个人项目都能受用很久。