课程试听
第一章 HTML/HTML5
1-1 浏览器介绍
- 认识网页
- 常见浏览器
- 浏览器内核
- web标准
1-2 HTML基本结构
- HTML初识
- HTML骨架
- 我的第一个页面及其标签简介
- 猪八戒版骨架记忆法
1-3 HTML常用标签
- 什么是标签及其分类
- 标签嵌套和并列关系
- 简单小测验
- 开发工具sublime
- sublime生成html骨架
- doctype文档类型
- 字符集简介
- 标签的语义化及其标题标签
- 段落标签和水平线标签
- 课堂案例-新闻页面
- 换行和div span标签
- 文本格式化标签
- 标签属性
- 图像标签
- 链接标签
- 锚点定位
- base标签
- 特殊字符
- 注释标签
1-4 相对路径
- 相对路径(一)
- 相对路径(二)
1-5 列表
- 无序列表的使用
- 无序列表注意事项
- 有序列表
- 四大名著案例
- 自定义列表
- 第一天HTML总结
1-6 表格
- 认识表格
- 表格的注意事项
- 表格属性
- 表头标签
- 表格结构
- 浏览器审查HTML标签元素
- 表格标题标签
- 合并单元格
- 合并单元格复习
1-7 表单和表单控件
- 表单的作用
- 文本框和密码框
- 单选按钮和复选按钮
- 默认选中表单属性
- input按钮组
- 最多字符数和文本值
- label标签
- 文本域
- 下拉菜单
- 表单域
1-8 HTML5 新增标签和属性
- html5 文档类型和字符集
- 查看手册及其新增标签
- datalist标签
- fieldset元素
- HTML5 新增input 表单(一)
- HTML5 新增input 表单(二)
- 新增占位符焦点多选属性
- autocomplete属性
- 内容不能为空和获得焦点属性
- 表单综合案例-学生档案
- embed引入网上视频
- 播放音频audio
- 播放视频video
第二章 CSS/CSS3
2-1 CSS介绍
- CSS产生的原因
- CSS网页的美容师
- 体会CSS样式
- CSS样式规则
2-2 font字体
- 字体样式字号和字体
- 字体字号常用技巧
- unicode字体
- CSS注释
- 字体加粗
- 字体倾斜
- 字体综合设定
2-3 CSS基本选择器
- 调试工具chrome使用
- 标签选择器
- 体会类选择器
- CSS命名规范
- 谷歌课堂案例
- 多类名选择器
- ID选择器
- id选择器和类选择器的区别
- 通配符选择器
- 链接伪类选择器的使用
- 链接伪类的简写方式
- 结构伪类选择器(一)
- 结构伪类选择器(二)
- 结构伪类选择器(三)
- 目标伪类选择器
2-4 CSS外观样式及应用
- CSS颜色
- 行高对齐和首行缩进
- 字间距和单词间距
- 颜色半透明
- 文字阴影初识
- sublime快捷方式
- 综合案例(一)
- 综合案例(二)
- 综合案例(三)
2-5 CSS样式表
- 内部样式表
- 行内样式表
- 外部样式表
- 三种样式表总结
2-6 标签显示模式
- 块级标签显示模式
- 行内标签显示模式
- 行内块元素
- 显示模式转换
2-7 CSS复合选择器
- 交集选择器
- 并集选择器
- 后代选择器
- 子元素选择器
- 课堂练习-测试选择器
- 属性选择器(一)
- 属性选择器(二)
- 伪元素选择器(一)
- 伪元素选择器(二)
- CSS书写规范
2-8 CSS背景及应用
- 背景颜色图片及其平铺
- 背景位置（一）
- 背景位置(二)
- 魔兽背景图片
- 背景附着(固定)
- 背景简写
- 背景半透明
- 背景缩放（一）
- 背景缩放（二）
- 多背景图片
- 凹凸文字效果
- 王者荣耀导航栏（一）
- 王者荣耀导航栏(二)
2-9 CSS三大特性
- CSS层叠性
- CSS继承性
- CSS优先级
- 权重叠加
- 继承的权重为0
- css权重6道精华题
- 优先级总结
2-10 CSS盒模型及应用
- 看透网页布局本质
- 认识盒子模型组成
- 盒子边框
- 边框综合写法(一)
- 边框综合写法(二)
- 合并细线表格
- 圆角矩形
- 盒子内边距
- fireworks测量工具
- 新浪导航(一)
- 新浪导航栏（二）
- 外边距以及盒子居中对齐
- 文字盒子居中图片和背景区别
- 清除内外边距
- 行内元素上下内外边距的问题
- 外边距合并(一)
- 外边距合并(二)
- 盒子的计算尺寸
- 学会计算盒子尺寸(重点)
- padding不影响盒子大小的情况
- 搜索趣图（一）分析
- 搜索趣图(二)大盒子
- 搜索趣图(三)标题
- 搜索趣图(四)
- 搜索趣图(五)
- 盒子模型布局稳定性
- CSS3 盒模型
- 盒子阴影
- 水晶图片案例
2-11 浮动及应用
- 文档流介绍
- 浮动是用来做文字环绕效果的
- 体会浮动
- 浮动就是漂浮的意思
- 浮动首先需要添加标准流父级
- 浮动特性对齐父盒子
- 浮动特性盒子排列
- 浮动影响盒子显示模式
- 浮动总结
- 版心和布局流程
- 一列固定宽度且居中
- 两列左窄右宽型
- 通栏平均分布型
2-12 清除浮动
- 清除浮动的本质
- 额外标签法
- 父级添加overflow方法
- after伪元素清除浮动
- 双伪元素清除浮动
2-13 photoshop基本操作
- 学习photoshop目的
- ps界面简介
- ps基本操作
- 移动工具和缩放变形
- 水果自行车案例
- 图层的基本操作
- 图层编组操作
- 图层的移动位置
- 图层合并和透明
- 矩形椭圆选区工具
- 颜色填充-米奇效果
- 多边形套索工具
- 磁性套索工具
- 魔棒工具
- 选区布尔运算
- 梦幻星球案例
- 钢笔工具
- 文字工具和吸管工具
- 切图方法1-手动划片
- 切图方法2-利用图层切图
- 清除全部切片和辅助线的方法
- 切图方法3-辅助线切图
- 切图方法4-等份数划分法
- cutterman插件安装
- cutterman插件使用
2-14 学成网案例上
- 学成网准备工作
- 学成网案例分析
- 学成网头部开始
- 调整头部的宽度
- logo和navbar部分开始
- logo和navbar结束
- search开始
- search结束
- 个人中心制作
- banner制作开始
- 给banner添加背景图片
- 侧边栏结构搭建
- 侧边栏制作结束
- 小课表上
- 小课表中
- 小课表下
- 精品推荐上
- 精品推荐下
2-15 CSS四种定位及应用
- 为什么学习定位
- 定位属性
- 静态定位(1)
- 相对定位
- 绝对定位脱标
- 父级没有定位
- 父级有定位
- 何为子绝父相
- 定位练习-哈根达斯
- 绝对定位水平垂直居中
- 淘宝焦点图分析
- 淘宝轮播图上
- 淘宝轮播图中
- 淘宝轮播图下
- 淘宝轮播图权重问题
- 固定定位
- 仿新浪固定头部和广告
- 叠加次序
- 定位总结
- 固定绝对定位模式转换
2-16 学成网案例下
- display和visibility使用
- 鼠标经过显示二维码
- overflow属性
- 学成在线页面修复工作
- 小圆点制作上
- 小圆点制作下
- 精品推荐大模块头部开始
- 精品推荐大模块头部结束
- 精品推荐大模块主体开始
- 精品推荐大模块li结束
- 精品推荐大模块结束
- 底部制作清除浮动
- 底部左侧开始
- 底部左侧完成
- 底部右侧完成
2-17 CSS溢出文字隐藏
- 鼠标样式
- 取消轮廓线
- 防止拖拽文本域
- 行内块和文字对齐
- 去除图片底测缝隙
- word-break
- white-space
- 超出的部分省略号显示
2-18 CSS精灵技术
- CSS精灵技术产生的背景
- css精灵技术的本质
- css精灵技术的使用
- 拼出自己的名字
- 王者荣耀导航栏
- PS制作精灵图
- 运用制作精灵图
2-19 字体图标
- 字体图标的优点
- svg格式上传转换字体格式
- 下载字体图标
- 复制需要的字体文件
- 字体图标html文件使用
- 追加新图标字体的方法
2-20 滑动门技术及应用
- 滑动门技术原因
- 滑动门实现原理
- 滑动门技术实现
- 微信导航栏（一）
- 微信导航栏（二）
- 伪元素的本质
- 鼠标经过显示边框
- 认识过渡效果
- 仿照小米效果
2-21 CSS3新增2D和3D属性及应用
- 2D变形-移动
- 定位的盒子居中对齐完美写法
- 2D变形-缩放
- 2D变形-旋转
- 设置变形中心点
- 旋转的楚乔传
- 2D变形-倾斜
- 左手法则
- rotateXYZ
- 体会透视
- 3D变形-移动
- translate3d
- 开门大吉上
- 开门大吉下
- 翻转的图片上
- 翻转的图片下
- 体会动画
- 多组动画
- 奔跑的小车
- 无缝滚动上
- 无缝滚动下
2-22 CSS3伸缩布局及应用
- 传统布局三等份
- 伸缩布局三等份
- 伸缩布局固定宽度
- 伸缩布局排列方式
- 携程网准备工作
- 携程网头部
- 携程网nav部分上
- 携程网nav部分中
- 携程网nav部分下
- 携程网导航结束
- 携程网over
- justify-content属性
- align-items属性
- flex-wrap属性
- align-content属性
- order属性
2-23 BFC
- 认识BFC
- 块级元素具有BFC条件
- 块级元素触发BFC的属性
- BFC作用-清除内部浮动
- BFC作用-解决外边距合并
- BFC作用及其总结
2-24 CSS补充知识
- 渐进增强和优雅降级
- 浏览器前缀
- 背景渐变上
- 背景渐变下
- CSS W3C 统一的验证工具
- CSS 压缩工具
- 认识 preserve-3d
- 旋转轮播图结构制作
- 旋转轮播图上
- 旋转轮播图下
2-25 CSS布局案例
- 靶心的制作
- 圣杯布局和双飞翼布局
2-26 CSS3小黄人案例
- 小黄人制作思路
- 小黄人的结构制作
- 小黄人头发的制作
- 小黄人胳臂的制作
- 小黄人的腿脚
- 小黄人眼睛框的制作
- 眼睛和嘴巴的制作
- 裤子的制作
- 小黄人肩带的制作
- 头发和眼睛的动画制作
2-27 文本溢出
- 单行文本溢出隐藏显示省略号
- webkit的css扩展方法实现多行文本溢出隐藏，显示省略号
- 多行文本溢出隐藏，显示省略号的通用方法
2-28 盒子水平和垂直居中
- 垂直居中的三种方法
- 水平居中的四种方法
第三章 京东电商项目
3-1 京东网页头部和顶部实现
- 京东项目介绍
- 京东项目目录准备
- 京东项目添加ico图标
- 自己制作ico图标
- 三大标签优化
- 火狐浏览器截图
- 京东项目头部制作
- 京东项目快速导航栏1
- 京东项目快速导航栏2
- 京东项目快速导航栏3
- 下载京东字体图标
- 使用京东字体图标
- 手机京东部分制作
- logo的制作
- 搜索框制作上
- 搜索框制作下-追加字体图标
- 购物车模块制作
- 热点关键词的制作
- 小导航栏上
- 小导航栏下
- 超级日部分制作
- 页面底部服务开始
- 底部服务中
- 底部服务下
- 帮助模块左侧制作
- 帮助模块右侧制作
- 版权模块上
- 版权模块结束
3-2 京东网页中间部分实现
- 中间分类部分的准备工作
- 中间分类部分模块划分
- 左侧分类上
- 左侧分类下
- 中间banner部分上
- 京东轮播图布局
- 右侧盒子模块划分
- 登录模块制作上
- 登录模块制作头像部分
- 登录模块福利会员制作
- 促销公告制作
- 促销公告小红线的做法
- 促销广告部分结束
- 服务扩展模块li的制作
- 服务扩展模块完成
- 广告特效结构制作
- 广告特效部分制作
- 京东项目动态功能预展示