记得我第一次带前端小组作业的时候有个同学拿到“用HTML和CSS做一个静态页面”这个题目愣是坐了一下午没动笔不是不会写代码而是不知道这一页到底该放什么、做成什么样才算“用心”。后来他交上来的作业我看了技术点其实都覆盖了但版式像说明书颜色像涂鸦只能说完成了功能谈不上设计。今天这篇就围绕第二次作业里最常见的一类需求——用HTML搭结构、用CSS做美化讲讲我在批改类似作业和带人复现时总结的一套思路从拆题到实操再到排查问题一次讲透。如果你现在正对着“第二次作业HTML与CSS”这种题目发愁或者已经写完但总觉得页面“哪里不对”那这篇文章就是给你准备的。我会把一个典型的作业页面从需求分析、结构搭建、样式设计到最终验收完整走一遍中间会穿插我实际踩过的坑和后来总结出的检查清单。保证你看完不是只会复制代码而是能理解每一步为什么这么做。1. 作业需求分析与整体拆解1.1 先搞懂“第二次作业”到底考什么前端入门课里第二次作业往往是个分水岭。第一次作业通常只是让你认识标签写个带标题和段落的页面就算完事。到了第二次核心就变成两件事结构语义化和CSS盒模型。我见过太多人把第二次作业做成“第一次作业的加长版”——堆了二十个div样式全用font标签或者内联style页面确实能看但老师一眼就能看出你没理解这阶段的教学目标。这类作业的考核点通常不是“你写了多少行代码”而是HTML结构是否清晰是否用了语义化标签header、nav、main、section、footer而不是清一色的div。CSS是否通过外部样式表引入是否用到了类选择器和id选择器而不是全写在标签里。是否能体现出对盒模型的理解比如padding、margin、border有没有用对场景。页面是否具备基本的响应式意识哪怕只是设置了max-width和视口meta标签。如果你现在还没交作业我建议你把这个作为自检标准倒推回去把题目要求逐条圈出来旁边标注它对应考察哪个知识点。比如“给图片加边框”考的是盒模型和border属性“导航栏悬浮变色”考的是伪类选择器“内容居中”考的是margin auto或flex布局。1.2 把题目关键词翻译成技术方案很多同学拿到题目不动手是因为没把题目语言翻译成技术语言。这步其实特别机械我教学生第一步就是拿笔圈题干然后写一张“关键词→实现手段”的对照表。举个例子。题目说“页头要有网站名称和导航栏”你的转化就应该是header里放h1或div classlogo下面跟上navulli列表形式的导航CSS里用display: flex让它们横向排开。题目说“主体内容分三个栏目”你的转化就是main下分三个section或article每个区块用classcard之类统一样式。题目说“页面底部有联系方式”就是footer里放address或者普通p标签。这一步千万别跳。哪怕你脑子里已经知道怎么写也建议在纸上走一遍因为翻译的过程会暴露出你哪些地方没学过。比如你发现“图片圆角化”这个词你对应不上border-radius那就说明这个属性还没掌握赶紧去查。在这之后再给自己提几个加分项问题页面整体想用什么主色调导航栏是吸顶还是普通滚动栏目之间用留白还是用分割线手机上看会不会挤成一团这些问题不是作业硬性要求但答不答得出来直接区分了你的作业是“完成”还是“出色”。1.3 一次典型的作业迭代流程我自己做这类作业或者带人做一般会走四轮每轮有明确目标第一轮搭骨架。不写任何样式只用HTML把页面结构摆出来。这轮的标准是去掉CSS后页面依然能看出哪里是标题、哪里是导航、哪里是正文。第二轮铺基本样式。把字体、颜色、间距、背景这些全局属性先定下来目的是让页面从“能看”变“正常”。第三轮抠布局细节。处理对齐、居中、浮动、嵌套关系解决“块元素挤在一起”或者“图片和文字对不齐”这类问题。第四轮做收尾美化。圆角、阴影、过渡动画、伪元素装饰这些是让页面从“正常”变“漂亮”的环节。这四轮的顺序我建议你严格保持。我见过很多新手卡在第三轮往回改结构结果越改越乱。先搭骨架再美化出问题的时候你能准确判断是结构问题还是样式问题排查速度快很多。2. 页面布局方式与核心技术点2.1 标准流、浮动与定位先理解再选择第二次作业如果想做出层次感你得知道页面元素默认是怎么排列的——这就是标准流。在标准流里块级元素从上往下堆行内元素从左往右排。但真实页面不可能全靠标准流搞定。比如你做一张产品卡片图片左边、文字右边标准流做不到因为p标签是块级元素它会强行换行。这时候有三个解决办法浮动、flex布局、或者把元素设为inline-block。很多老教程还在教浮动主要原因是以前没有flex前端都是靠float clear来切版。但如果你现在才开始学我真心建议你把重心放在flex上。float当初的设计初衷是让文字环绕图片被拿来布局属于“赶鸭子上架”。而flex的属性命名直白比如justify-content: space-between就是两端对齐align-items: center就是垂直居中心智负担小很多。不过有几种场景浮动依然好使图片环绕文字、多栏列表的简单排列。你如果作业里正好有图文混排的模块用float反而比flex更自然。这时候别为了“新”而新工具是看场景选的。再说定位。第二次作业涉及定位的地方通常是导航栏固定到页面顶部、装饰角标固定在某个角落、或悬浮按钮。position: sticky是这几年特别好用的一个值——它像是relative和fixed的结合体元素滚动到某个位置后就卡住不动。设置记住三点父元素别设overflow: hidden会破功要给个top值兼容性方面现代浏览器都没问题。如果作业要求低版本浏览器也正常那你可能需要退回用fixed加监听滚动事件的JS方案。2.2 Flex布局的核心属性和实用口诀flex布局是第二次作业最容易出彩也最好上手的布局方案。它分为容器属性和项目属性两类我常用的容器属性就五个display: flex、flex-direction、justify-content、align-items、flex-wrap。新手最容易懵的是justify-content和align-items到底谁管水平谁管垂直。有个很土但好记的方法你把flex想象成一条马路flex-direction: row的时候车是横着开的justify-content管的是这条马路上车之间的分布比如靠左、靠右、等距align-items管的是车有没有开到马路两边去比如默认是拉伸填满改成center就上下居中了。一旦flex-direction变成column马路竖过来了这两个属性的管辖方向也跟着换所以口诀别死记“水平垂直”要记“主轴侧轴”。项目属性里flex简写属性是最值得研究的。它由三个值组成flex-grow放大比例、flex-shrink缩小比例、flex-basis基础大小。我举个场景页面上有三张栏目卡片你希望它们宽度一样、并排占满。你可以写.card { flex: 1 1 0; }1 1 0的意思是允许放大允许缩小初始宽度为0最终大家均分剩余空间。这个写法的好处是无论里面文字多少卡片宽度都一样。如果你写flex: 1其实等价于1 1 0%效果一样。但如果你写flex: auto等价于1 1 auto那就按内容撑开了卡片宽度可能不一致。我再补充一个常见坑justify-content: space-between在只有两个项目时会两边贴边中间很大一片空视觉上容易显得不平衡。这种时候可以考虑用gap属性加间距然后justify-content: center或者干脆左右分布不要用flex用auto margin更稳。gap是flex和grid都能用的属性设了它就不用再给每个子元素单独设margin了代码干净很多。2.3 CSS选择器与层叠规则别被“优先级”绊倒我做作业点评时发现第二次作业最容易被扣分的地方不是布局而是样式莫名不生效。新人写CSS最常见的问题是加了个类名样式却不起作用于是他们开始加!important——这其实是用错误手段掩盖错误判断。深挖一下样式不生效的原因不外乎三类选择器没匹配上、优先级不够、或者属性被后面的代码覆盖了。选择器没匹配上是手误比如HTML里写classcardCSS里写.carl敲错字母这种最好排查打开浏览器开发者工具看看元素上有没有你写的样式就知道。优先级不够是概念问题。行内样式 id选择器 类选择器 标签选择器。这个顺序只要你学过一次就不会忘但实际嵌套时会出岔子比如div .text { color: red }和.item { color: blue }打架前者因为带标签选择器权重反而低于后者最终显示蓝色。我建议新手养成习惯选择器尽量写简单能用类就不用id能不嵌套就别嵌套这样你就不需要跟优先级博弈了。属性被覆盖则是顺序问题。同名属性能不能生效看它在样式表里的先后位置。这也是为什么我要求作业里把代码按“重置样式→布局样式→组件样式→页面特有样式”分层排列不然你调试的时候根本找不到是哪条规则把颜色顶掉的。3. 实操过程与核心环节实现3.1 前半场搭HTML骨架别急着写样式我这次用一份模拟项目X的“个人兴趣展示页”作为例子因为它完美覆盖了第二次作业的几个典型模块导航、图文卡片、列表、页脚。这个题目的页面结构其实很常规实现步骤可以直接拿来当模板。第一步是写HTML。整个页面拆成五个大块header放站名加导航main里放一个介绍横幅加三个特色卡片section放一组列表形式的文章标题footer放版权信息。写的时候每开一个标签就想一下这里用div是不是真的合适还是用section更贴切。我把骨架代码简化一下方便你看结构!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title个人兴趣展示页/title link relstylesheet hrefstyle.css /head body header classsite-header div classlogo我的小站/div nav ul classnav-list lia href#intro首页/a/li lia href#hobby兴趣/a/li lia href#articles文章/a/li lia href#contact联系/a/li /ul /nav /header main section idintro classintro h1欢迎来到我的个人空间/h1 p这里记录我的一些兴趣和日常思考。/p /section section idhobby classhobby-section h2我的兴趣方向/h2 div classcard-list article classcard h3编程/h3 p喜欢研究前端技术正在学习HTML和CSS。/p /article article classcard h3摄影/h3 p偏好风景和城市街拍后期用轻量工具处理。/p /article article classcard h3阅读/h3 p偏爱科幻和纪实类作品最近在读几本短篇小说集。/p /article /div /section section idarticles classarticle-list h2近期随笔/h2 ul lia href#第一次独立完成网页设计的体会/a/li lia href#关于CSS布局学习的一点笔记/a/li lia href#我的拍照入门记录/a/li /ul /section section idcontact h2联系我/h2 p邮箱studentexample.com/p /section /main footer p© 2023 我的小站/p /footer /body /html这段骨架写完先别写CSS用浏览器直接打开。你会发现页面完全没有设计感但结构信息是完整的从上往下扫你能知道这是哪个站、有哪些栏目、每个栏目的标题是什么。这就是骨架阶段的目标。如果这个阶段你连段落都堆不清楚后面样式写再多也是空中楼阁。3.2 中场CSS变量与全局样式设定紧跟着骨架之后我想先跟你介绍一个小技巧那就是用CSS自定义属性也叫CSS变量来管理颜色和间距体系。这个技能我第一次接触时觉得“这不是编程里的变量吗”后来发现它在写页面样式时简直是救命工具——尤其是当你需要统一调整主题色时。CSS变量的用法很简单在:root选择器里定义然后在任何选择器里用var()引用。举个例子我在这个作业里定义了以下变量:root { --primary-color: #2c3e50; --accent-color: #e67e22; --background-color: #f7f5f0; --card-background: #ffffff; --text-color: #333333; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --radius: 10px; }这里每个变量名我建议学一下语义化命名方式不要用--blue、--width-100因为一旦需求变了名字和值的对应关系就会让人困惑。用--primary-color这种名字含义一目了然。有了变量写样式的时候就不需要满脑子记“主色是深灰蓝”“强调色是橙黄”直接写color: var(--primary-color)。这样还有一个额外的好处如果你想换主题色只改:root里的值全局都跟着变。我在好几次改需求时全靠这个省时间尤其是在好几页的站上做换肤变量体系可以让工作量从一小时变成一分钟。你可能会纠结第二次作业有必要用变量吗我的看法是如果作业只要求一页用不用其实无所谓但如果你想让代码看起来有条理、像一个正经人写的那就用。评分老师看到你在样式表统一了变量会认为你有工程化思维这在评判“优秀”档时是很醒目的加分点。3.3 中场核心布局样式一步步写接下来就是让页面从“骨架”变成“成品”的阶段我们一步步来。先处理全局基础样式比如清空默认边距、设置字体和行高* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; line-height: 1.6; color: var(--text-color); background-color: var(--background-color); }这段代码里box-sizing: border-box是最值得解释的。默认情况下元素的宽度只计算内容区padding和border会额外加在外面。也就是说如果你设一个width: 300px的盒子加上20px的padding和1px的border它实际占的宽度是342px。这在布局里会让你反复算尺寸加来加去。设成border-box之后宽度就是包括padding和border的总宽度内容区会自动压缩。我强烈建议在做作业时全局都设这个能省下大量数学计算。然后给容器设个限宽避免在超大屏幕上内容被拉得稀稀拉拉main { max-width: 960px; margin: 0 auto; padding: var(--space-lg); }margin: 0 auto是水平居中的经典写法。margin-left和margin-right都设为auto浏览器会自动把剩余空间平均分配到两侧。注意这里要求元素是块级且宽度确定不然auto没有意义。接下来是导航栏。我们让logo在左导航链接在右.site-header { background-color: var(--primary-color); color: #fff; padding: 0 var(--space-lg); display: flex; justify-content: space-between; align-items: center; min-height: 60px; } .nav-list { list-style: none; display: flex; gap: var(--space-md); } .nav-list a { color: #fff; text-decoration: none; padding: 6px 12px; border-radius: var(--radius); transition: background-color 0.3s ease; } .nav-list a:hover { background-color: var(--accent-color); }这块把flex的经典用法都练到了容器display: flex主轴两端对齐侧轴居中。gap代替了原来给每个li设margin的做法。transition加了悬浮过渡效果让链接背景色变化不那么突兀这是很基础的动效加分点。再来做三张卡片区域。这是整个作业的核心模块布局上用flex每张卡片加一点阴影和圆角来提升质感.card-list { display: flex; gap: var(--space-lg); margin-top: var(--space-lg); } .card { flex: 1; background-color: var(--card-background); border-radius: var(--radius); padding: var(--space-lg); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }容器的flex让三张卡片横排flex: 1让它们均分宽度。阴影和圆角让卡片看起来有层次。如果这里想要响应式效果可以在屏幕窄的时候把它们变成纵向堆叠方法是用媒体查询这个放到后面说。3.4 中场响应式初体验与媒体查询作业如果你只是随便做做响应式确实不是硬性要求。但我带的人里面几乎所有拿到“良好”以上评级的作业都做了这一条。媒体查询的代码很短性价比极高值得花二十分钟加上去。核心思路当屏幕宽度小于某个阈值时把flex横排改成纵向堆叠字体可能适当缩小。我们给卡片加上一截media (max-width: 600px) { .card-list { flex-direction: column; } .site-header { flex-direction: column; padding-top: var(--space-sm); } }这样手机窄屏下卡片不再挤成一排而是整齐地一列一列下来。导航栏在窄屏下如果还维持两端对齐logo和导航就会挤在一起改成纵向排列后更清爽。这个阈值600px是我个人的偏好你也可以用640、720之类。重要的是你要理解媒体查询里的断点选取应该基于内容何时开始“难看”而不是拍脑袋定死几个标准值。方法是把浏览器窗口从宽拖到窄一边拖一边观察在排版开始变差的位置记下宽度那就是合适的断点。3.5 后半场状态效果与细节美化作业提交前最后半小时我通常用来做三件小事给链接加hover态、给按钮加active态、给页面重要区域加过渡动画。这些细节单个看都不起眼但组合起来会让页面看起来“像是被人认真设计过”。比如文章列表的链接默认是带下划线的hover时换色卡片在鼠标悬停时有一点上浮效果。这些动效用CSS就能实现不需要碰JS.card:hover { transform: translateY(-4px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12); } .article-list a { color: var(--primary-color); text-decoration: underline; } .article-list a:hover { color: var(--accent-color); text-decoration: none; }transform: translateY(-4px)会让卡片整体向上移动4像素配合阴影加深就产生了“抬起来”的感觉。注意给.card预先加上transition不然这个位移是瞬时发生的看起来很生硬。我一般会写.card { transition: transform 0.3s ease, box-shadow 0.3s ease; }以前我只给transform加过渡阴影变化一瞬间就完成视觉上也不自然。后来统一把涉及变化的属性都写上去体验立刻好了。虽然这样做的代价是CSS多几行但用户感知到的流畅度提升是实打实的。4. 常见问题与排查技巧实录4.1 “为什么我的导航链接没有排成一行”这个问题九成是忘了给ul或li设置flex相关属性。只把display: flex写在.site-header上意味着只有logo和nav两个直接子元素按flex排nav里的ul还是默认的块级列表li还是纵向排列。正确做法是把flex设在.nav-list上或者给nav也设flex。还有个细节是ul默认带padding-left里面有项目符号即使横排了前面也会有小圆点。需要list-style: none去点。排查方法在开发者工具里选中.nav-list看它的display值如果显示block说明flex没设置成功。再检查是不是选择器写错了或没匹配上。这类问题往往是结构层级理解不到位建议写HTML时就把“谁是容器谁是项目”分清楚。4.2 “图片和文字死活对不齐”典型的图片垂直对齐问题。默认情况下图片是行内元素它的基线是和文字基线对齐的这就会导致图片下方留出几条像素的空白。解决办法有多种最省事的我给图片设置display: block让它脱离行内基线约束。但如果图片要跟文字同行更好的方案是给图片设vertical-align: middle或者用flex把图片和文字放进同一个容器再设align-items: center。我遇到很多同学卡在这是因为他们不确定“对不齐”指的是哪种对齐。建议你打开开发者工具Element面板选中图片你会发现图片底部有明显的间隙——这个间隙其实是行高造成的。所以如果设置line-height: 1或者给图片display: block问题就消失了。4.3 “背景颜色怎么填不满整个页面”有一种情况是你给某个section设了背景色但发现它只覆盖内容的高度下面全是白。这通常是因为子元素有margin产生外边距塌陷。父元素的高度不包含子元素的margin于是背景色盖不住。解决办法有几个给父元素设置overflow: hidden或padding来代替子元素的margin或者给父元素加display: flow-root。其中display: flow-root是我近几年用得最多的它创建了新的BFC子元素的margin不会再“逃”出去。讲一下原理可能更容易理解父子元素的上外边距会合并取两者中较大的一个而且这个合并后的margin会跑到父容器外面于是父容器看起来就“少了一段背景”。如果你设了padding打断合并问题就没了。4.4 “页脚跑到屏幕中间去了”这个通常是页面内容不够高加上没有用flex或grid做整体布局。一个最简单的修复是让body变成flex纵向布局页面主内容用flex: 1撑开把footer推到最底部body { min-height: 100vh; display: flex; flex-direction: column; } main { flex: 1; }min-height: 100vh保证页面高度至少一个视口flex: 1让main占据所有剩余空间。footer自然落到最底。这个方法在很多业务项目里都是标准做法值得背下来。如果你没设box-sizing: border-box可能出现100vh加上边距造成溢出的小bug这再次说明全局设置border-box的重要性。5. 提交前的自查清单与进阶建议5.1 格式化与缩进第一印象分我批改作业时会先看代码格式——说实话这是第一印象分。如果HTML结构混乱、缩进不统一、CSS属性和值之间没有空格我很难相信这个页面在功能层面做得很好因为维护成本太高了。建议在提交前用编辑器的自动格式化功能过一遍比如Visual Studio Code的格式化快捷键。同时检查一下有没有残留的调试代码比如临时的border: 1px solid red或者console.log。这些痕迹虽然不影响显示但给评分者的观感很差觉得你做事粗心。5.2 浏览器兼容性快速检查不要只在Chrome里打开觉得没问题就交。至少再开一遍Firefox和Edge如果有条件用手机浏览器看一眼。常见的兼容差异包括gap在flex里的支持情况现代浏览器没问题老版本Safari可能需要margin方案、aspect-ratio属性如果你的作业里用了。我一般会加一个简单的降级用flex写的时候连gap带margin或者只依赖margin。不追求完美兼容但要让核心内容不出错。如果你发现Safari里页面布局崩了优先检查flex的缩略写法。老Safari对flex: 1 1 0和flex: 1的解析有一些差异这时可以直接写三个值或者用flex-basis: 0%更稳妥。5.3 结构语义自查小表格我最后每次都做一轮“语义化标签自查”把关键标签和使用场景对一遍防止自己图省事用了一堆div。表格放下面你可以直接抄走对照使用。标签使用场景常见误用替代header页面顶部区域含站名和导航用div包一层再加classnav导航链接的容器用div或者ul裸奔main页面的主体内容区域多个section直接放在body下section主题内容分组通常带标题用div没有任何语义article独立的文章或卡片内容用div加classfooter页面底部信息区域用div加id这个表格不是强制规定比如一个纯装饰性容器用div是完全正确的但像导航、页头页脚这种有明确语义的区块用对应标签会让你的代码可读性上一个档次。老师查看代码的时候扫一眼你的标签运用基本就知道你学没学到位。5.4 内容宽度、字体大小、间距统一性提交前最后一步我建议把页面上所有字号和间距列出来看看是否成体系。很多人作业做出来花哨但细看每个区块的间距都不一样字号也是哪哪都不同观感就很乱。我自己的习惯是字号用一组等差数列16px正文、20px小节标题、24px区块标题、32px页面大标题。间距要么用之前定义的变量要么控制在4、8、16、24、32这几个档位。这样做的好处是页面看起来“有秩序感”。即使你不是设计科班出身只要遵循“间距成倍递增”原则页面就不会乱到哪去。6. 最终经验与延伸建议6.1 我踩过的几个坑提前帮你避雷我在刚开始做这类页面时犯过几个印象深刻的错误。一个是不看结构就开始写CSS结果样式写到一半发现标题层级全乱只能拆了重来。别的体验我不好形容但那次的感受就是“白干俩小时”。所以我现在坚持写页面永远先写HTML浏览器里确认结构没问题再碰CSS。第二个坑是滥用绝对定位。初学者一旦发现position: absolute可以把元素放到页面任意位置就会什么都用absolute。结果页面一拉窄所有元素都堆到一块儿因为absolute元素脱离了文档流不仅自己飘着还会覆盖其他内容。我的建议是第二次作业阶段你的定位方案90%应该用flex解决。当你发现某个元素需要“叠加在另一个元素上面”才考虑absolute加z-index。第三个坑是我以前总想着一个选择器干好多事比如写.card p a这种超长选择器。后来发现只要结构稍微一调整整条规则就失效了。现在我的习惯是给需要定制的标签都加上类名选择器长度尽量不超过两个层级。比如.card内部的所有样式都基于.card p、.card a来写不要在更外层去引入元素关系。6.2 这页作业写完下一步可以玩些什么如果这次作业你顺利交了而且评分还可以我建议你接下来尝试把这几个东西加进去给导航加一个小图标、做一个图片轮播纯CSS那种、给卡片加个阅读链接。这些需求会逼着你去学习新的CSS属性比如nth-child选择器、keyframes动画、伪元素::before和::after。我记得有个同学交完第二次作业后一次偶然机会把卡片hover效果从translateY改成了scale(1.02)再配合一个内阴影他说那个页面突然就有了高级的质感。其实就是一层很薄的技巧。前端这个东西有时候你离“好看”的距离不是学了多少属性而是有没有用对那一个。6.3 给“第二次作业”的最后一个建议完成比完美重要但“完成”的定义不是把代码跑起来而是把每个区块都打磨到自洽。你不需要做出多惊艳的效果但你要确保当你把鼠标划过每一个链接它会给你回应当窗口拉窄图片不会撑破容器当你滚动页面导航还在它该在的位置。这些小细节合在一起就是一份成熟作业的底色。回到开头那句话第二次作业你可能觉得它小、简单、不上档次。但你往后写任何页面用的还是这些基础语义化结构、盒模型、flex布局、选择器。如果这次能把底打扎实后面做复杂项目你绝对领先一步。