这门课解决什么问题

很多刚接触前端的人，会卡在同一个地方：HTML写好了，但页面丑得没法看；或者照着教程把CSS复制进去，却不知道每一行在干什么。这门课就是把“样式”这件事从最基础的地方拆开讲。它解决的工作场景是：你需要把一个普通网页的布局和交互样式做出来，不依赖任何现成的UI库。具体来说，它覆盖了HTML里怎么引入CSS文件、背景怎么设置、元素怎么定位（relative和absolute的区别）、内容超出容器怎么办（overflow）、鼠标悬停怎么触发样式变化（hover），以及JS怎么动态修改样式（cssText、className、currentStyle）。这些不是零散的知识点，而是前端入门时绕不开的底层能力。如果你以后要学Vue、React，或者做大数据可视化面板，这些基础都会反复用到。这门课没有花哨的案例，就是一个个小主题讲清楚，适合想踏踏实实补基础的人。

适合什么基础，先看哪几块

这门课适合已经认识HTML标签、但CSS和JS交互还比较薄弱的人。零基础也能看，但最好先能写一个简单的HTML页面，知道什么是标签、属性。如果你连

和都分不清，建议先补一点HTML基础再回来。资料里的内容顺序是经过设计的，建议你按这个顺序看：先看HTML中引用CSS的部分，搞懂link和style的区别，这是所有样式生效的前提；接着看background，这是给页面加颜色和图片最常用的属性；然后重点看relative和absolute，这是定位里最容易绕晕的，配合overflow一起理解父容器怎么裁剪内容；再看hover，这是交互的起点，几乎每个按钮都要用。之后进入JS部分，看cssText怎么一次性改多个样式，className怎么切换类名，以及currentStyle这种老式IE兼容写法。inline和block的兼容话题可以作为补充，不用一开始死磕，等遇到显示异常时再回来看。

学完能独立做什么，怎么配合练习

学完这块，你能独立写出一个带导航栏的静态页面，鼠标悬停有变化，点击按钮能切换样式，而且在不同浏览器里不会出现明显错位。更实际一点，你可以在一个商品列表页里，让鼠标移上去时卡片变色、图片放大；也可以做一个简单的选项卡，点击不同标签时，用className切换当前激活的样式。这些效果都不需要框架，纯CSS加几行JS就能实现。资料里的每个知识点都很短，几分钟到十几分钟，适合碎片时间看。但光看不练等于没学。建议你每看完一个知识点，就自己建一个HTML文件，把示例代码敲一遍，然后改几个参数，看看效果有什么不同。比如看完relative和absolute，就把父容器和子元素的定位值改一改，观察谁参照谁移动；看完cssText，就试着用JS给一个元素同时改颜色、字号、边框。遇到currentStyle，不要只记住写法，要在控制台里打印出来，理解它和getComputedStyle的区别。这样练完，你对CSS和JS的配合会有手感，后面学框架时也不会被基础问题绊住。

课程目录

课程目录13 集
  • 1 html当中如何引用css文件 (21:45).mp4
  • 2 background的问题 (08:37).mp4
  • 3 relative或absolute1 (13:49).mp4
  • 4 relative或absolute2 (04:31).mp4
  • 5 relative或absolute3 (05:40).mp4
  • 6 overflow (07:27).mp4
  • 7 hover (08:23).mp4
  • 8 改变cssText (11:17).mp4
  • 9 兼容的话题：inline和block1 (07:42).mp4
  • 10 兼容的话题：inline和block2 (57).mp4
  • 11 兼容的话题：inline和block3 (11:42).mp4
  • 12 兼容的话题：currentStyle (17:35).mp4
  • 13 className用法 (06:34).mp4