主题
学成在线（一）
本页对应 学成在线，共 8 段视频，约 1 小时 28 分。
学习目标
- 能独立完成 banner 区域左侧 left 侧导航的 HTML 结构搭建，使用
ul > li > a组织导航项，并通过浏览器效果验证结构层级正确。 - 能将导航链接
a转换为可设置宽高的元素，完成高度、行高、左右内边距、悬停背景色与文字颜色设置，并验证鼠标点击热区覆盖整行。 - 能在导航项内使用小图标盒子并通过 Flex 两端对齐实现文字居左、图标居右，验证图标位于链接右侧且随链接悬停变色。
- 能搭建右侧 right 标题与 content 内容区盒子，完成背景色、圆角、内边距、标题字号颜色及内容区间距设置，验证页面效果与参考图一致。
- 能使用
dl > dt + dd完成课程表内容布局，设置标题加粗、说明文字颜色、局部文字高亮、下边框及模块间距，验证多组课程信息排列整齐。 - 能完成“全部课程”链接按钮和“精品推荐”大盒子，使用块级链接、圆角、居中、悬停变色/阴影及多类名复用版心样式，验证按钮可点击且推荐模块水平居中。
知识点
先看结构：为什么用 ul>li>a
为什么需要：侧导航是一组可点击的分类入口，既要语义清楚，又要保证整行都能点。
怎么想：转写稿强调“li 包 A”，A 包住文字，这样鼠标放在这一行的任意位置都能触发链接；结构先搭大盒子，再填内容。
怎么做：保留笔记结构：
html
<div class="left">
<ul>
<li><a href="#">前端开发</a></li>
<li><a href="#">后端开发</a></li>
<li><a href="#">移动开发</a></li>
<li><a href="#">人工智能</a></li>
<li><a href="#">商业预测</a></li>
<li><a href="#">云计算&大数据</a></li>
<li><a href="#">运维&测试</a></li>
<li><a href="#">UI设计</a></li>
<li><a href="#">产品</a></li>
</ul>
</div>易错点：不要只给 li 设高度就以为能点；A 默认是行内元素，点击范围小。转写稿反复提醒：先把 .banner .left 这个父级写全，避免后面 left/right 继承混乱。
父容器 .banner .left：先把盒子量准
为什么需要：侧导航有半透明底色、固定宽高和内边距，先把父盒子做对，里面的 A 才有稳定参照。
怎么想：先写宽、高、背景色，再看位置；转写稿说“先画盒子，再填内容”。
怎么做：保留笔记 CSS：
css
/* 侧导航 */
.banner .left {
padding: 3px 20px;
width: 191px;
height: 420px;
background-color: rgba(0,0,0,0.42);
}易错点：padding: 3px 20px 是上下 3、左右 20；不要写成只给上。转写稿里量到首项约 49、其余 46，最终取 46，上方 3px 用父级 padding-top 处理，底部剩余 3px 可不管，避免总高超出。
让 A 变成可点击的整行
为什么需要：A 是行内元素，默认没有可设置的高度，整行点击热区不够。
怎么想：转写稿的推导是：A 要“这么大才对”，所以转成块级并给高；高度取 46，行高 46 让文字垂直居中。
怎么做：保留笔记样式：
css
.banner .left a {
/* 块级：宽度是父级的100% */
display: block;
height: 46px;
background: url(../images/right.png) no-repeat right center;
line-height: 46px;
font-size: 16px;
color: #fff;
}转写稿还强调 A 左右各 20 的内边距来扩大点击范围，可补为 padding: 0 20px;；笔记把左右 20 放在 .left 上，两者都能让文字内缩，但 A 的点击热区不同，实际以笔记代码为主、按转写稿理解即可。
易错点：不要用 margin 代替 padding。转写稿解释：给 A margin，盒子会移动，左侧区域可能点不到；给 padding，文字内缩但 A 的范围还在。也不要给 49，否则累计会超出。
悬停：背景图和文字颜色
为什么需要：鼠标经过要有反馈，提示当前项可点。
怎么想：默认右侧小箭头图，hover 换成另一张图，同时文字变蓝。
怎么做：保留：
css
.banner .left a:hover {
background-image: url(../images/right-hover.png);
color: #00a4ff;
}易错点：背景颜色和文字颜色别写反；hover 只换 background-image，不要误写成 background-color。本节没有独立图片标签，图片资源保留在 CSS 的 url 中。
转写稿补充：小箭头与调试
为什么需要：右侧小箭头要跟着整行 hover 变色，后续还要换字体图标。
怎么想：转写稿做法是把 i 放在 A 里面，A 用 flex 两端对齐，让文字在左、箭头在右；i 默认倾斜，可先 font-style: normal。
怎么做：转写稿示例思路为：
html
<a href="#">前端开发<i>></i></a>css
.banner .left a {
display: flex;
justify-content: space-between;
}
.banner .left a i {
font-style: normal;
}易错点：i 放 A 外，hover 时箭头不联动；字体图标需要盒子，别用伪元素替代。调试时转写稿提醒：先看左侧结构，再看样式是否被划掉，遵循“上看层叠、下看继承”；点标签右边完全没样式，99% 是类名写错。
先看效果与结构
课程表在 banner 右侧，是一个蓝色卡片里套白色内容区的结构。布局思路仍然遵循转写稿里反复强调的顺序：先大后小、先上后下、先画盒子再填内容。先确定 .right 大盒子，再放标题 h3，最后用 .content 白色盒子承载课程列表。这样想的好处是：宽高、背景色、圆角先稳定，后面填内容时不会一边写内容一边猜盒子位置。
原始笔记结构如下：
html
<div class="right">
<h3>我的课程表</h3>
<div class="content">1</div>
</div>原始样式如下：
css
/* 课程表 */
.banner .right {
margin-top: 60px;
width: 218px;
height: 305px;
background-color: #209dd5;
border-radius: 10px;
}
.banner .right h3 {
margin-left: 14px;
height: 48px;
line-height: 48px;
font-size: 15px;
color: #fff;
font-weight: 400;
}
.banner .right .content {
padding: 14px;
height: 257px;
background-color: #fff;
border-radius: 10px;
}右侧大盒子：先定位置和外观
为什么需要先写 .right？因为它是课程表的外壳，决定整块在 banner 中的位置、尺寸和蓝色背景。怎么想：它和左侧导航是兄弟关系，所以选择器写成 .banner .right，避免和页面其他 right 冲突。怎么做：给 margin-top: 60px 让它下移，宽 218px、高 305px，背景 #209dd5，圆角 10px。易错点：类名不要只写 .right，否则容易受继承或同名类影响；高度要记住，后面标题 48px 加内容区 257px 正好是 305px。
标题 h3：高度、行高和字重
为什么标题要单独设？因为 h3 默认有外边距和加粗，直接放进去会贴边、字重也不符合设计。怎么想：标题在蓝底上，白字、15px、不加粗；用高度和行高让文字垂直居中。怎么做：height: 48px; line-height: 48px;，左边距 14px，font-weight: 400 去掉默认加粗。易错点：只写 line-height 不写 height 也可以居中，但这里高度参与总高计算；h3 默认 margin 要留意，必要时重置。
内容区 content：白底卡片盖在蓝底上
为什么需要 .content？因为课程表下半部分是白色卡片，蓝底只露出标题区域。怎么想：先给 .content 白底、圆角、内边距，再用高度控制它和标题拼满大盒子。怎么做：padding: 14px; height: 257px; background:#fff; border-radius:10px;。这里 257px 要理解为含 padding 的盒子高度，项目里通常有 box-sizing: border-box；转写稿也强调过“有宽高再给 padding，是往里减”。易错点：如果没有 border-box，257px 再加上下 28px 就会撑高溢出，调试时先在开发者工具看盒模型。
课程项用 DL/DT/DD 填充
转写稿里 content 内部用 dl 包 dt 和 dd 做课程项：dt 是课程名，14px、加粗 700；dd 是说明，12px、灰色 #7d7d7d；“正在学习”用 span 包起来设蓝色 #00A4FF。每个 dl 加下边框和 margin-bottom 做分隔。为什么这样？盒与盒之间用 margin，盒内文字距离用 padding。易错点：复制课程项时复制的是整个 dl，不要只复制 dt 或 dd；颜色不要写到父级导致所有文字都变蓝。
底部链接与调试
“全部课程”是链接，a 默认是行内元素，直接给宽高无效，所以要 display:block，高 32px、行高 32px、文字居中，背景 #00A4FF，圆角取高度一半 16px，形成胶囊按钮；悬停可换深色背景。易错点：胶囊圆角不是 50%，50% 会变椭圆。调试时按转写稿的方法：先看左侧结构，再看盒模型；“上看层叠，下看继承”；点标签右边完全没样式，优先检查类名是否写错。
先看课程表条目的语义结构
为什么需要：banner 右侧的课程表不是零散文字，而是“课程名 + 学习状态 + 当前章节”成组出现。用 dl 包住一组 dt、dd，语义上就是“标题—说明”的列表，比一堆 div 更容易维护。转写稿里反复说“先搭大盒子再填内容”，这里也应先把每条课程当成一个 dl 条目。
怎么想：一个课程对应一个 dl；dt 放课程名，dd 放“正在学习-章节”。dd 里“正在学习”是状态词，用 span 单独包起来，后面的章节名用 strong 表示强调但样式上可弱化。
怎么做：
html
<dl>
<dt>数据可视化课程</dt>
<dd><span>正在学习</span>-<strong>echarts使用步骤</strong></dd>
</dl>
<dl>
<dt>Vue3医疗项目课程 </dt>
<dd><span>正在学习</span>-<strong>认识组合式API</strong></dd>
</dl>
<dl>
<dt>React核心技术课程</dt>
<dd><span>正在学习</span>-<strong>rudex配合TS使用</strong></dd>
</dl>易错点：dt、dd 必须放在 dl 里面，不要写成孤立的 dt、dd；转写稿里说的“滴D/DR”就是口误，对应的是 dd 和 dl，写代码时别跟着口误写错标签。
容器与分隔线
为什么需要：三条课程如果直接堆在一起，视觉上分不清边界。给每个 dl 加下边框和下外边距，可以让每条课程形成独立行组。
怎么想：分隔线属于“每条课程整体”，不是属于某一行文字，所以边框应给 dl，不是给 dt 或 dd。转写稿也提到“盒子和盒子之间用 margin，盒子里面的字用 padding”，这里 dl 之间用 margin-bottom 更合适。
怎么做：
css
.banner .right dl {
margin-bottom: 12px;
border-bottom: 1px solid #e0e0e0;
}易错点：选择器要限定在 .banner .right 下，避免影响页面其他 dl；如果发现分隔线贴着文字太近，先检查 dl 的 margin-bottom 和内部 dd 的 margin-bottom，不要盲目加 padding。
标题与说明文字层级
为什么需要：课程名是主信息，章节是辅助信息，字号和字重要有层级，否则用户扫读时抓不到重点。
怎么想：dt 用 14px、700 加粗、20px 行高；dd 用 12px、16px 行高。dd 里的 strong 虽然语义强调，但视觉上不应比课程名更抢眼，所以把 strong 的字重降为 400，并给灰色。
怎么做：
css
.banner .right dt {
margin-bottom: 8px;
font-size: 14px;
line-height: 20px;
font-weight: 700;
}
.banner .right dd {
margin-bottom: 8px;
font-size: 12px;
line-height: 16px;
}
.banner .right dd strong {
color: #7d7d7d;
font-weight: 400;
}易错点：dt 默认就有加粗，但仍建议显式写 font-weight: 700；strong 默认加粗，若不写 font-weight: 400，章节名会过重。转写稿里“加粗 700”“DD 12 像素”就是这部分调试依据。
状态词高亮
为什么需要：“正在学习”是状态提示，需要和课程名区分。用 span 单独包起来，才能只改这一小段颜色。
怎么想：不要给整个 dd 变蓝，否则章节名也会变蓝；应精确选择 .banner .right dd span。
怎么做：
css
.banner .right dd span {
color: #00a4ff;
}易错点：如果“正在学习”没变蓝，先检查 HTML 里有没有 span，再检查选择器是不是写成了 dd span 却层级不对。转写稿里说“正在学习套一个 span，给蓝色”，就是这一步。
复制条目与调试顺序
为什么需要：三条课程结构相同，调好一条后复制最稳，避免重复写错标签。
怎么想：先调好第一个 dl 的 dt、dd、span、strong，确认字号、颜色、间距、边框都正确，再复制整个 dl 两份。转写稿强调“复制的是 DL，不要复制错”，这里同样适用。
怎么做：先保存并刷新，检查第一条课程的下边框、8px 间距、蓝色状态词；确认后再复制两条并替换文字。若文字贴边，检查外层 .right 内容容器是否已有内边距；若分隔线位置不对，检查 border-bottom 是否误给到 dd。
易错点：不要只复制 dt 或 dd 导致结构残缺；不要为了省事把三条课程塞进一个 dl，本节笔记的写法是每条课程一个 dl。调试时先看结构，再看样式，和转写稿里“先看左边结构，再看右边样式”的顺序一致。
先确认结构与选择器：它首先是链接
为什么需要：这个“全部课程”不是普通文字，而是可点击跳转的入口，所以 HTML 用 <a> 而不是 <span> 或 <div>。本节笔记只聚焦这个链接本身，外层沿用已有的 .banner .right 结构。
怎么想：先看它在 banner 右侧内容模块中的位置，再确认样式作用域。笔记用 .banner .right a 选中链接；转写稿里也提醒“不要直接写 A，要写 content 里面的 A”，本质是防止选择器范围过大，误伤右侧其他链接。
怎么做：保留笔记结构：
html
<a href="#">全部课程</a>样式仍从 .banner .right a 进入，先保证选择器能命中目标链接。
易错点：.banner .right a 会选中 .right 下所有 a。如果右侧还有其他链接，要核对是否被一起改样式；调试时点开元素，看右侧样式是否命中，若完全没样式，优先检查类名和层级是否写错。
块级化与尺寸：A 默认没有宽高
为什么需要：a 是行内元素，直接给 height: 32px 往往不按预期撑开。转写稿里明确说“A 有没有大小？怎么办？转换成块级”，所以要先解决显示模式。
怎么想：这个按钮要横向撑满父容器、形成一整块可点击区域，宽度不必单独写，块级元素默认和父亲一样宽；高度按笔记给 32px。因此先写 display: block，再给高度和背景色。
怎么做：
css
.banner .right a {
display: block;
height: 32px;
background-color: #00a4ff;
text-align: center;
line-height: 32px;
font-size: 14px;
color: #fff;
border-radius: 15px;
}易错点：只写 height 不写 display: block，高度可能不生效；把 background-color 写成 color，会出现“背景怎么不出来”的典型问题。调试时先看盒子是否撑开，再看背景和文字颜色是否写反。
文字居中与胶囊圆角：高度、行高、圆角要配套
为什么需要：按钮文字要水平居中、垂直居中，视觉上才像完整按钮；圆角要形成胶囊感，不能写成大圆或椭圆。
怎么想：水平居中用 text-align: center；垂直居中用 line-height 等于高度，笔记高度 32px，所以行高也写 32px。圆角笔记给 15px，转写稿按“高度一半”推导是 16px，两者视觉接近，本节以笔记 15px 为准。
怎么做：字号 14px、文字白色 #fff，背景 #00a4ff，圆角 15px，都放在同一个选择器里。保存后看三件事：文字是否居中、按钮是否撑满、圆角是否接近胶囊。
易错点：不要随手写 border-radius: 50%，50% 是按宽高比例算的，容易变成椭圆；胶囊型应参考高度的一半。行高不等于高度时，文字会偏上或偏下。
交互态与调试：hover 是可选增强，先保证基础样式
为什么需要：转写稿演示了鼠标移入换背景色、加阴影，让用户知道这里可点击；但笔记核心代码没有 hover，所以要先保证基础按钮正确，再按需增强。
怎么想：先调基础态：块级、高度、背景、文字、圆角。基础态没问题后，再加 :hover 换一个稍深或稍浅的背景色；阴影可用 box-shadow，但不要为了效果影响可读性。
怎么做：在笔记代码基础上可追加类似交互（非笔记原有核心代码，按转写稿思路补充）：
css
.banner .right a:hover {
background-color: #008fd6;
}调试顺序：先看结构是否命中，再看盒子是否撑开，再看文字是否居中，最后看 hover 是否生效。
易错点：hover 不生效先检查选择器层级和拼写；背景色和文字颜色别写反；加阴影后若按钮发灰，检查阴影透明度和颜色。转写稿强调“先画盒子再填内容”，这里同样适用：先把链接盒子调正确，再追求交互效果。
先看效果，再拆盒子
拿到这个效果图，不要急着写标签。按课上反复强调的布局总纲：先画好盒子，再往盒子里填内容。先分析结构——精品推荐整体是一条白色横条，宽度和版心一致；横条里面明显分三块：左边的标题“精品推荐”、中间一串兴趣标签、右边的“修改兴趣”。三块内容排在同一行，所以外层一个大盒子，里面放三个小盒子即可。
对应的 HTML 结构是：大盒子 .recommend 里放 h3 标题、ul > li > a 的标签列表，以及一个 a.modify 链接（“修改兴趣”能点击，所以用链接）。
html
<!-- 精品推荐 -->
<div class="recommend wrapper">
<h3>精品推荐</h3>
<ul>
<li><a href="#">HTML</a></li>
</ul>
<a href="#" class="modify">修改兴趣</a>
</div>易错点：不要一上来就把 h3、ul、a 全部写完再调样式，那样盒子位置一乱就无从下手。正确顺序是先写大盒子，量宽高、给背景色，确认位置正确，再逐个添加里面的小盒子。
命名：用 recommend，不要用 box1、box2
为什么需要：类名是写给人看的，自己回头看代码、同事接手项目，都要靠类名认模块。课上同学把盒子命名成 box、box1、box11，虽然“有规律”，但过两天自己都分不清哪个 box 是哪个区域。
怎么想：模块里装什么，类名就叫什么。不确定单词就打开有道翻译，直接查“推荐”，得到 recommend，就用它。
怎么做：外层盒子类名写 recommend，以后遇到新闻模块就查 news、广告模块查 banner/ad，直译即可。公司里一般还有命名规范文档，进公司按文档来。
易错点：不要纠结“单词没背过就写不出网页”，单词是在写案例的过程中记住的，容易忘的记到纸质笔记本上反复看。
一个盒子挂两个类名：recommend + wrapper
为什么需要：这个盒子宽度要是版心 1200px、还要水平居中，而这两句代码在 .wrapper 里已经写过了。再抄一遍既啰嗦又容易写错。
怎么想：一个盒子可以有多个类名，写了几个名字，就同时拥有这几套样式。
怎么做：<div class="recommend wrapper">，wrapper 负责 width: 1200px; margin: 0 auto 把盒子拉到中间，recommend 负责这个模块自己的样式。中间必须用空格隔开。
易错点：写成 class="recommendwrapper" 就连成一个词了，页面上根本找不到这个类，盒子不会居中；也不要再写第二个 class 属性。
先搭大盒子：宽高、背景色、阴影
盒子结构定了，先只做外层。宽度交给 wrapper；高度用像素大厨量出来是 60px；背景白色；它和上面的 banner 之间有一小段距离，笔记代码里给的是 margin-top: 11px。三块内容要在一行，所以加 display: flex；再给 line-height: 60px 让文字垂直居中，padding: 0 20px 让内容与左右边缘留出空隙。最后复制一条阴影，让白条有立体感。
css
/* 精品推荐 */
.recommend {
display: flex;
margin-top: 11px;
padding: 0 20px;
height: 60px;
background-color: #fff;
box-shadow: 0px 1px 2px 0px rgba(211, 211, 211, 0.5);
line-height: 60px;
}调试过程：课上写完发现盒子是通栏的、没在中间，原因是只写了 recommend，忘了挂 wrapper；还有一次改完样式页面没反应，是忘了保存。所以每写一小步就保存、刷新、看效果，确认无误再往下写。
易错点：
- banner 写完后先折叠起来，精品推荐是 banner 的兄弟盒子，要写在 banner 外面，别不小心写进 banner 里面造成继承干扰；
- 高度一定要量，不要凭感觉写；
- 阴影可以直接复制，能复制的就不要手写，抄错一个参数反而更麻烦；
- 多类名之间只敲一个空格就够，不要连写。
课件图示
代码示例
示例一：banner 左侧侧导航（11-banner区域-侧导航）
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>banner 左侧侧导航</title>
<style>
/* 基础重置 */
* { margin: 0; padding: 0; }
li { list-style: none; }
a { text-decoration: none; }
/* 演示用：banner 大盒子，left / right 左右排布 */
.banner {
display: flex;
width: 1200px;
height: 420px;
margin: 0 auto;
background-color: #f5f5f5;
}
/* 侧导航 */
.banner .left {
padding: 3px 20px;
width: 191px;
height: 420px;
background-color: rgba(0, 0, 0, 0.42);
}
.banner .left a {
/* 块级：宽度是父级的100% */
display: block;
height: 46px;
background: url(../images/right.png) no-repeat right center;
line-height: 46px;
font-size: 16px;
color: #fff;
}
.banner .left a:hover {
background-image: url(../images/right-hover.png);
color: #00a4ff;
}
</style>
</head>
<body>
<div class="banner">
<div class="left">
<ul>
<li><a href="#">前端开发</a></li>
<li><a href="#">后端开发</a></li>
<li><a href="#">移动开发</a></li>
<li><a href="#">人工智能</a></li>
<li><a href="#">商业预测</a></li>
<li><a href="#">云计算&大数据</a></li>
<li><a href="#">运维&测试</a></li>
<li><a href="#">UI设计</a></li>
<li><a href="#">产品</a></li>
</ul>
</div>
</div>
</body>
</html>要点解释
display: block是这段的核心：a默认是行内元素，没有高度，必须转成块级元素才能设置height: 46px；转成块级后宽度自动等于父级的 100%，所以不用再写 width。li不给宽高：li的高度是靠里面的a撑开的（“孩子能撑开父亲”），这是本案例刻意训练的点。padding: 3px 20px写在.left上：上 3px 是量出来的首项留白（49px 与 46px 的差值），左右 20px 让文字和右侧箭头内缩。如果改成给a加margin，鼠标经过时可点击区域不包含 margin，点击范围会缩水——所以要用 padding。background: url(...) no-repeat right center：一条简写同时定位箭头到右侧、垂直居中。hover 时只写background-image，不要写background:简写，否则会把no-repeat、right center一起重置掉。- 易错点：
../images/right.png是相对 CSS 文件的路径，图片缺失时箭头不显示，但盒子布局不受影响，别误判成“样式写错了”。
示例二：banner 右侧课程表（12/13/14-课程表布局、内容、全部课程）
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>banner 右侧课程表</title>
<style>
* { margin: 0; padding: 0; }
a { text-decoration: none; }
/* 演示用：banner 大盒子，right 靠右 */
.banner {
display: flex;
justify-content: flex-end;
width: 1200px;
height: 420px;
margin: 0 auto;
background-color: #f5f5f5;
}
/* 课程表 */
.banner .right {
margin-top: 60px;
width: 218px;
height: 305px;
background-color: #209dd5;
border-radius: 10px;
}
.banner .right h3 {
margin-left: 14px;
height: 48px;
line-height: 48px;
font-size: 15px;
color: #fff;
font-weight: 400;
}
.banner .right .content {
padding: 14px;
height: 257px;
background-color: #fff;
border-radius: 10px;
}
.banner .right dl {
margin-bottom: 12px;
border-bottom: 1px solid #e0e0e0;
}
.banner .right dt {
margin-bottom: 8px;
font-size: 14px;
line-height: 20px;
font-weight: 700;
}
.banner .right dd {
margin-bottom: 8px;
font-size: 12px;
line-height: 16px;
}
.banner .right dd span {
color: #00a4ff;
}
.banner .right dd strong {
color: #7d7d7d;
font-weight: 400;
}
.banner .right a {
display: block;
height: 32px;
background-color: #00a4ff;
text-align: center;
line-height: 32px;
font-size: 14px;
color: #fff;
border-radius: 15px;
}
</style>
</head>
<body>
<div class="banner">
<div class="right">
<h3>我的课程表</h3>
<div class="content">
<dl>
<dt>数据可视化课程</dt>
<dd><span>正在学习</span>-<strong>echarts使用步骤</strong></dd>
</dl>
<dl>
<dt>Vue3医疗项目课程</dt>
<dd><span>正在学习</span>-<strong>认识组合式API</strong></dd>
</dl>
<dl>
<dt>React核心技术课程</dt>
<dd><span>正在学习</span>-<strong>rudex配合TS使用</strong></dd>
</dl>
<a href="#">全部课程</a>
</div>
</div>
</div>
</body>
</html>要点解释
- 两段式结构：
.right负责蓝色底 + 圆角，.content是白色卡片 + 更小的圆角，用“白盒子盖在蓝盒子上”做出效果，而不是分别给上下两块上色。 h3的height: 48px; line-height: 48px：单行文字垂直居中的标准写法；font-weight: 400去掉标题默认加粗，否则会和设计稿不符。dl / dt / dd的分工：dl加border-bottom做分割线，margin-bottom: 12px拉开三个模块；dt加粗（700），dd小一号；两者各自的margin-bottom: 8px控制行与行的距离。span只包“正在学习”三个字，所以只有它变蓝；strong必须写font-weight: 400去粗，否则“echarts使用步骤”会是粗体灰字。a必须display: block：a是行内元素，不转块级，height: 32px直接失效。border-radius: 15px是胶囊圆角，标准算法是高度的一半（32 / 2 = 16），笔记里写 15 也可以。- 易错点：
.content写了height: 257px又写padding: 14px，因为没有box-sizing: border-box，盒子实际高度会变大；这是笔记中的原始写法，量尺寸时要心里有数。
示例三：精品推荐（15-精品推荐-区域布局，多类名）
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>精品推荐</title>
<style>
* { margin: 0; padding: 0; }
li { list-style: none; }
a { text-decoration: none; }
/* 版心：控制页面整体布局宽度并水平居中 */
.wrapper {
width: 1200px;
margin: 0 auto;
}
/* 精品推荐 */
.recommend {
display: flex;
margin-top: 11px;
padding: 0 20px;
height: 60px;
background-color: #fff;
box-shadow: 0px 1px 2px 0px rgba(211, 211, 211, 0.5);
line-height: 60px;
}
</style>
</head>
<body>
<!-- 精品推荐 -->
<div class="recommend wrapper">
<h3>精品推荐</h3>
<ul>
<li><a href="#">HTML</a></li>
</ul>
<a href="#" class="modify">修改兴趣</a>
</div>
</body>
</html>要点解释
- 一个盒子两个类名：
class="recommend wrapper"，中间必须有空格。写成class="recommendwrapper"浏览器会当成一个根本不存在的类名，两条样式全部失效——这是本段最大的易错点。 - 职责分离：
.wrapper只管版心（width: 1200px; margin: 0 auto），.recommend只管本模块（高度、白底、阴影、flex）。这样后面的模块也能直接复用wrapper，不用重复写宽和居中。 display: flex让h3、ul、a三个子元素排到一行；配合line-height: 60px让文字在 60px 高的条里垂直居中。padding: 0 20px给内容左右留白；margin-top: 11px与上面的 banner 拉开距离（兄弟盒子之间的间距用 margin）。box-shadow: 0px 1px 2px 0px rgba(...)四个值依次是：x 偏移、y 偏移、模糊半径、颜色，做出一点立体感。- 易错点：
h3、ul的具体字体样式笔记未给出，此处保持浏览器默认，只做了* { margin: 0; padding: 0 }和li { list-style: none }的重置，避免出现列表符号和默认外边距。
常见错误
现象：
a设了margin-left，文字看起来右移了，但鼠标移到左侧空白处无法点击。
原因：margin改变盒子位置，不扩大a的点击区域。
修法：给a用padding: 0 20px，必要时配合display: block/display: flex扩大可点击范围。现象：侧导航每项高度写 49px，最后整体超出或底部距离不对。
原因：首项/末项测量值特殊，直接逐项写 49px 导致累计误差。
修法：统一每项height: 46px，顶部 3px 用父级padding-top: 3px处理，底部剩余 3px 不强行补。现象：课程表内容贴边，或白色 content 盒子高度/圆角不协调。
原因：只给了 content 宽高，没有处理内边距；圆角直接照抄父级。
修法：content 设height: 257px、白底、较小圆角，并用padding: 14px让内部 dl 不贴边。现象：课程表多个
dl之间距离不对，下边框位置也不对。
原因：把间距/边框加在dd或内容上，没有按模块边界处理。
修法：模块间距给dl的margin-bottom，下边框给dl的border-bottom；dt/dd只处理自身文字和上下间距。现象：精品推荐盒子没有居中，或
recommend样式不生效。
原因：多类名之间漏空格，写成class="recommendwrapper"。
修法：写成class="recommend wrapper"，一个空格分隔；确保wrapper已有版心宽度和居中样式。现象：样式明明写了却不生效，调试工具右侧没有对应样式。
原因：类名拼写错误、选择器层级不对，或样式被层叠覆盖。
修法：先看结构是否错位；再点选元素看右侧样式，上看层叠划掉项，下看继承来源；类名优先复制，避免手写错。
练习
改错：侧导航
a当前写成margin-left: 20px; margin-right: 20px;，导致点击区域不完整。请改为更合适的写法，并说明原因。手写关键 CSS：让
.banner .left顶部有 3px 距离，内部每个a高 46px、行高 46px、左右内边距 20px，并实现 hover 时背景变深、文字变蓝。课程表结构练习：用
dl > dt + dd写出一条课程记录，并补出dt加粗、dd灰色、dd span蓝色、dl下边框和模块间距的关键样式。精品推荐模块：写出大盒子的类名组合，使其同时具备版心居中和推荐模块自身样式；再写出标题、列表、修改兴趣三块横向排列的关键 flex 设置。
调试题：页面中某个盒子设置了
padding但视觉上没变化。请按“先结构、后样式；上看层叠、下看继承”的顺序写出排查步骤。
原视频对照
| # | 视频 | 时长 |
|---|---|---|
| 1 | 复习反馈和今日内容 | 26:31 |
| 2 | 左侧left模块制作 | 13:13 |
| 3 | 左侧模块制作完成 | 08:43 |
| 4 | 右侧标题部分 | 10:54 |
| 5 | 右侧content制作 | 06:50 |
| 6 | 右侧content里面的dl布局完成 | 08:17 |
| 7 | 右侧content链接制作 | 05:58 |
| 8 | 精品推荐模块大盒子搭建 | 08:22 |
小结
- 布局先定大盒子，再拆小盒子；按先大后小、先左后右、先上后下推进。
- 每个盒子先看宽高、背景色、位置，确认外形正确后再填内容。
- 需要整块可点击时，用
a包内容，并优先用padding扩大点击区域。 - 背景图适合装饰性、少更换的小图；产品图、广告图、常换图优先用插入图片。
- 模块命名优先语义化，能用公司规范就用规范；多类名必须用空格分隔。
- 课程表这类模块要分清模块边界：
dl管模块间距和边框，dt/dd管内部文字层级。 - 调试时先确认 HTML 结构，再查样式来源；类名错误和层叠覆盖是最常见问题。
- 当天综合案例优先独立复写，再处理作业；能脱离代码还原效果，才算真正掌握。