缺什么补什么:先把页面骨架和样式选择器理顺
这门课解决的是前端最底层的页面结构与样式排版问题。很多转岗或者后端补前端的读者,写脚本很顺,但一遇到原生页面布局就发懵:标签随便乱嵌套,用 div 包裹一切,或者写了一堆 class 却不知道选择器优先级怎么算。这往往是因为基本功漏了。这门课适合零基础或者只懂套用现成框架、想回头补原生页面结构的人。建议先看 HTML 部分的常用标签和图片、超连接和列表,重点啃表格与表单这两个大头。表格的水平和垂直合并单元格是容易写错的地方,表单里的各类输入元素则是后续做数据交互的视觉容器。看完 HTML 部分,你要能闭着眼睛把一个包含文本、图片、列表和表单的静态页面结构默写出来,而不是打开编辑器就发呆。
配套练习:别光看视频,得手敲页面
资料包里的视频线索只用来理解主题,真正消化得靠手敲。HTML 部分讲到了表格练习,这就给你指明了练习方向。看表单和表格章节时,暂停视频,自己照着写一个用户注册页:用表格控制版面,表单里放文本框、单选、复选和提交按钮,并且亲自试一次跨行跨列的单元格合并。进入 CSS 部分后,练习重点放在选择器上。给前面写好的注册页加样式,先用标签选择器统一字体,再用类选择器调输入框边距,最后用层叠和继承的思路去覆盖冲突的样式。别去抄现成的复杂模板,就老老实实给纯文本和表单加背景色、调内外边距。把样式写坏再修好,你才能记住浏览器到底是怎么解析这些规则的。
学完能独立做什么:独立产出静态原型页
看完这套教程,你应该能独立产出一张结构清晰、带基础样式的静态原型页。具体来说,拿到一份简单的线框图,你能拆解出哪里该用列表、哪里该用表格、哪里该放表单,并且用 CSS 把页面元素排版到合理的位置,不再满屏裸奔的默认黑体字。学完应能回答这几个问题:表单的各类元素分别在什么场景下使用?跨行和跨列的单元格属性写在哪一个标签上?多个 CSS 规则同时作用于一个元素时,优先级怎么判断?如果这几个问题答得磕磕巴巴,说明表格练习和样式入门那几块还得倒回去重敲。把这些基础打牢,后续再去学页面响应式布局或者脚本操作节点,才不会在结构层和样式层上反复摔跤。
课程目录
1-1 [HTML] 第一个html页面 (05:29) 1-2 [HTML] 常用标签 (07:56) 1-3 [HTML] 常用标签和图片 (15:14) 1-4 [HTML] 超连接和列表 (10:58) 1-5 [HTML] 表格 (06:26) 1-6 [HTML] sublime软件的用法 (04:47) 1-7 [HTML] 表格2 (05:07) 1-8 [HTML] 表格的属性 (03:32) 1-9 [HTML] 水平和垂直合并单元格 (04:58) 1-10 [HTML] 表单-文本框 (07:50) 1-11 [HTML] 表单表单元素1 (09:49) 1-12 [HTML] 表单表单元素2 (12:42) 1-13 [HTML] 完整表格 (04:29) 1-14 [HTML] 表格练习 (05:15) 2-1 [Css样式] css样式入门 (05:36) 2-2 [Css样式] css样式使用的三种方式 (14:32) 2-3 [Css样式] css三种样式的优先级 (04:34) 2-4 [Css样式] css基本选择器 (06:58) 2-5 [Css样式] 选择器的优先级 (02:52) 2-6 [Css样式] 层次选择器 (09:02) 2-7 [Css样式] 结构伪类选择器 (06:44) 2-8 [Css样式] 属性选择器 (06:47) 2-9 [Css样式] span标签 (02:29) 2-10 [Css样式] 字体样式 (08:17) 2-11 [Css样式] 文本样式 (05:10) 2-12 [Css样式] 超链接的伪样式 (06:28) 2-13 [Css样式] 列表和背景 (08:28) 2-14 [Css样式] 背景图片平铺和定位 (11:48) 2-15 [Css样式] 背景图片尺寸 (08:23) 2-16 [Css样式] 盒子模型边框 (12:21) 2-17 [Css样式] 盒子模型外边距 (06:27) 2-18 [Css样式] 盒子模型内边距 (04:36) 2-19 [Css样式] 文档流和display属性 (08:37) 2-20 [Css样式] 浮动 (09:33) 2-21 [Css样式] 练习聚美优品导航 (13:11) 2-22 [Css样式] 定位(相对定位) (07:13) 2-23 [Css样式] 定位(很定位) (06:31) 2-24 [Css样式] 定位z-index属性 (06:03)





