第 4 课：HTML基础

• 熟悉HTML 常见的标签
• 使用 Emmet 提高码字效率

🐱 练习实践

第 6 课：CSS基础与选择器

• HTML 中引入 CSS 的方式
• CSS 中 @import 的使用
• 了解 id 选择、类选择器
• 认识伪类、伪元素

🐱 熟悉CSS选择器

第 7 课：CSS 基础样式

• 用 CSS 画画
• 边框border的使用
• 鼠标的hover状态
• 美化表格的样式
• 使用 inline-block 制作导航条
• 结合前面的知识制作简单页面

第 8 课：盒模型&字体图标

• iconfont 字体图标
• 制作精灵图

第 9 课：浮动与定位

• 通知条
• 多层级导航栏

第 10 课：BFC &边距合并& 浏览器兼容

• 风景列表

第 11 课：CSS布局&居中&媒体查询

• 两栏布局
• 三栏布局
• 大段文字在容器内水平居中
• 固定宽度的元素水平居中
• 并列三个按钮，在父容器内水平居中
• 图片在容器内水平垂直居中
• 固定宽高的块在浏览器窗口水平垂直居中
• 不定宽高的块在浏览器窗口水平垂直居
• 对话框在屏幕内水平垂直居中
• 使用transform来绘制一个消息框

第 13 课：写企业站静态页面

🐱 页面预览地址

第 24 课：DOM元素及操作

• 使用 JS 改变 DOM元素的样式

第 25 课：事件

• 了解事件冒泡
• 阻止事件冒泡

第 26 课：CSS动画 & JS 动画

实现3D翻转效果的登录框

第 28 课：ajax

使用 AJAX 向后台发送和请求数据

第 30 课：简单的音乐播放器

🎶 播放器链接

第 32 课：jQuery选择器

用 jQuery 实现 Tab 切换功能

第 37 课：懒加载和瀑布流布局

懒加载和瀑布流布局的新闻页面

第 38 课：实现一款响应式大屏 Webapp

🎵 功能更丰富的音乐播放器

第 43 课：面向对象实战之轮播

通过实践理解面向对象编程的思想
图片轮播组件

第 44 课：Promise 的用法

CSS 练习：像素级模仿百度首页搜索框

🐱 预览地址

CSS 练习：用浮动来实现各种布局

🐱 预览地址