本套课程主要讲解的是前端开发必备基础知识：HTML/HTML5+CSS/CSS3+Photoshop，通过运用所学知识，开发一套完整的PC端静态页面，让"切图"

*   第一章 HTML/HTML5/

  *   浏览器介绍/

    *   认识网页

    *   常见浏览器

    *   浏览器内核

    *   web标准

  *   HTML基本结构/

    *   HTML初识

    *   HTML骨架

    *   我的第一个页面及其标签简介

    *   猪八戒版骨架记忆法

  *   HTML常用标签/

    *   什么是标签及其分类

    *   标签嵌套和并列关系

    *   简单小测验

    *   开发工具sublime

    *   sublime生成html骨架

    *   doctype文档类型

    *   字符集简介

    *   标签的语义化及其标题标签

    *   段落标签和水平线标签

    *   课堂案例-新闻页面

    *   换行和div span标签

    *   文本格式化标签

    *   标签属性

    *   图像标签

    *   链接标签

    *   锚点定位

    *   base标签

    *   特殊字符

    *   注释标签

  *   相对路径/

    *   相对路径(一)

    *   相对路径(二)

  *   列表/

    *   无序列表的使用

    *   无序列表注意事项

    *   有序列表

    *   四大名著案例

    *   自定义列表

    *   第一天HTML总结

  *   表格/

    *   认识表格

    *   表格的注意事项

    *   表格属性

    *   表头标签

    *   表格结构

    *   浏览器审查HTML标签元素

    *   表格标题标签

    *   合并单元格

    *   合并单元格复习

  *   表单和表单控件/

    *   表单的作用

    *   文本框和密码框

    *   单选按钮和复选按钮

    *   默认选中表单属性

    *   input按钮组

    *   最多字符数和文本值

    *   label标签

    *   文本域

    *   下拉菜单

    *   表单域

  *   HTML5 新增标签和属性/

    *   html5 文档类型和字符集

    *   查看手册及其新增标签

    *   datalist标签

    *   fieldset元素

    *   HTML5 新增input 表单(一)

    *   HTML5 新增input 表单(二)

    *   新增占位符焦点多选属性

    *   autocomplete属性

    *   内容不能为空和获得焦点属性

    *   表单综合案例-学生档案

    *   embed引入网上视频

    *   播放音频audio

    *   播放视频video

*   第二章 CSS/CSS3/

  *   CSS介绍/

    *   CSS产生的原因

    *   CSS网页的美容师

    *   体会CSS样式

    *   CSS样式规则

  *   font字体/

    *   字体样式字号和字体

    *   字体字号常用技巧

    *   unicode字体

    *   CSS注释

    *   字体加粗

    *   字体倾斜

    *   字体综合设定

  *   CSS基本选择器/

    *   调试工具chrome使用

    *   标签选择器

    *   体会类选择器

    *   CSS命名规范

    *   谷歌课堂案例

    *   多类名选择器

    *   ID选择器

    *   id选择器和类选择器的区别

    *   通配符选择器

    *   链接伪类选择器的使用

    *   链接伪类的简写方式

    *   结构伪类选择器(一)

    *   结构伪类选择器(二)

    *   结构伪类选择器(三)

    *   目标伪类选择器

  *   CSS外观样式及应用/

    *   CSS颜色

    *   行高对齐和首行缩进

    *   字间距和单词间距

    *   颜色半透明

    *   文字阴影初识

    *   sublime快捷方式

    *   综合案例(一)

    *   综合案例(二)

    *   综合案例(三)

  *   CSS样式表/

    *   内部样式表

    *   行内样式表

    *   外部样式表

    *   三种样式表总结

  *   标签显示模式/

    *   块级标签显示模式

    *   行内标签显示模式

    *   行内块元素

    *   显示模式转换

  *   CSS复合选择器/

    *   交集选择器

    *   并集选择器

    *   后代选择器

    *   子元素选择器

    *   课堂练习-测试选择器

    *   属性选择器(一)

    *   属性选择器(二)

    *   伪元素选择器(一)

    *   伪元素选择器(二)

    *   CSS书写规范

  *   CSS背景及应用/

    *   背景颜色图片及其平铺

    *   背景位置（一）

    *   背景位置(二)

    *   魔兽背景图片

    *   背景附着(固定)

    *   背景简写

    *   背景半透明

    *   背景缩放（一）

    *   背景缩放（二）

    *   多背景图片

    *   凹凸文字效果

    *   王者荣耀导航栏（一）

    *   王者荣耀导航栏(二)

  *   CSS三大特性/

    *   CSS层叠性

    *   CSS继承性

    *   CSS优先级

    *   权重叠加

    *   继承的权重为0

    *   css权重6道精华题

    *   优先级总结

  *   CSS盒模型及应用/

    *   看透网页布局本质

    *   认识盒子模型组成

    *   盒子边框

    *   边框综合写法(一)

    *   边框综合写法(二)

    *   合并细线表格

    *   圆角矩形

    *   盒子内边距

    *   fireworks测量工具

    *   新浪导航(一)

    *   新浪导航栏（二）

    *   外边距以及盒子居中对齐

    *   文字盒子居中图片和背景区别

    *   清除内外边距

    *   行内元素上下内外边距的问题

    *   外边距合并(一)

    *   外边距合并(二)

    *   盒子的计算尺寸

    *   学会计算盒子尺寸(重点)

    *   padding不影响盒子大小的情况

    *   搜索趣图（一）分析

    *   搜索趣图(二)大盒子

    *   搜索趣图(三)标题

    *   搜索趣图(四)

    *   搜索趣图(五)

    *   盒子模型布局稳定性

    *   CSS3 盒模型

    *   盒子阴影

    *   水晶图片案例

  *   浮动及应用/

    *   文档流介绍

    *   浮动是用来做文字环绕效果的

    *   体会浮动

    *   浮动就是漂浮的意思

    *   浮动首先需要添加标准流父级

    *   浮动特性对齐父盒子

    *   浮动特性盒子排列

    *   浮动影响盒子显示模式

    *   浮动总结

    *   版心和布局流程

    *   一列固定宽度且居中

    *   两列左窄右宽型

    *   通栏平均分布型

  *   清除浮动/

    *   清除浮动的本质

    *   额外标签法

    *   父级添加overflow方法

    *   after伪元素清除浮动

    *   双伪元素清除浮动

  *   photoshop基本操作/

    *   学习photoshop目的

    *   ps界面简介

    *   ps基本操作

    *   移动工具和缩放变形

    *   水果自行车案例

    *   图层的基本操作

    *   图层编组操作

    *   图层的移动位置

    *   图层合并和透明

    *   矩形椭圆选区工具

    *   颜色填充-米奇效果

    *   多边形套索工具

    *   磁性套索工具

    *   魔棒工具

    *   选区布尔运算

    *   梦幻星球案例

    *   钢笔工具

    *   文字工具和吸管工具

    *   切图方法1-手动划片

    *   切图方法2-利用图层切图

    *   清除全部切片和辅助线的方法

    *   切图方法3-辅助线切图

    *   切图方法4-等份数划分法

    *   cutterman插件安装

    *   cutterman插件使用

  *   学成网案例上/

    *   学成网准备工作

    *   学成网案例分析

    *   学成网头部开始

    *   调整头部的宽度

    *   logo和navbar部分开始

    *   logo和navbar结束

    *   search开始

    *   search结束

    *   个人中心制作

    *   banner制作开始

    *   给banner添加背景图片

    *   侧边栏结构搭建

    *   侧边栏制作结束

    *   小课表上

    *   小课表中

    *   小课表下

    *   精品推荐上

    *   精品推荐下

  *   CSS四种定位及应用/

    *   为什么学习定位

    *   定位属性

    *   静态定位(1)

    *   相对定位

    *   绝对定位脱标

    *   父级没有定位

    *   父级有定位

    *   何为子绝父相

    *   定位练习-哈根达斯

    *   绝对定位水平垂直居中

    *   淘宝焦点图分析

    *   淘宝轮播图上

    *   淘宝轮播图中

    *   淘宝轮播图下

    *   淘宝轮播图权重问题

    *   固定定位

    *   仿新浪固定头部和广告

    *   叠加次序

    *   定位总结

    *   固定绝对定位模式转换

  *   学成网案例下/

    *   display和visibility使用

    *   鼠标经过显示二维码

    *   overflow属性

    *   学成在线页面修复工作

    *   小圆点制作上

    *   小圆点制作下

    *   精品推荐大模块头部开始

    *   精品推荐大模块头部结束

    *   精品推荐大模块主体开始

    *   精品推荐大模块li结束

    *   精品推荐大模块结束

    *   底部制作清除浮动

    *   底部左侧开始

    *   底部左侧完成

    *   底部右侧完成

  *   CSS溢出文字隐藏/

    *   鼠标样式

    *   取消轮廓线

    *   防止拖拽文本域

    *   行内块和文字对齐

    *   去除图片底测缝隙

    *   word-break

    *   white-space

    *   超出的部分省略号显示

  *   CSS精灵技术/

    *   CSS精灵技术产生的背景

    *   css精灵技术的本质

    *   css精灵技术的使用

    *   拼出自己的名字

    *   王者荣耀导航栏

    *   PS制作精灵图

    *   运用制作精灵图

  *   字体图标/

    *   字体图标的优点

    *   svg格式上传转换字体格式

    *   下载字体图标

    *   复制需要的字体文件

    *   字体图标html文件使用

    *   追加新图标字体的方法

  *   滑动门技术及应用/

    *   滑动门技术原因

    *   滑动门实现原理

    *   滑动门技术实现

    *   微信导航栏（一）

    *   微信导航栏（二）

    *   伪元素的本质

    *   鼠标经过显示边框

    *   认识过渡效果

    *   仿照小米效果

  *   CSS3新增2D和3D属性及应用/

    *   2D变形-移动

    *   定位的盒子居中对齐完美写法

    *   2D变形-缩放

    *   2D变形-旋转

    *   设置变形中心点

    *   旋转的楚乔传

    *   2D变形-倾斜

    *   左手法则

    *   rotateXYZ

    *   体会透视

    *   3D变形-移动

    *   translate3d

    *   开门大吉上

    *   开门大吉下

    *   翻转的图片上

    *   翻转的图片下

    *   体会动画

    *   多组动画

    *   奔跑的小车

    *   无缝滚动上

    *   无缝滚动下

  *   CSS3伸缩布局及应用/

    *   传统布局三等份

    *   伸缩布局三等份

    *   伸缩布局固定宽度

    *   伸缩布局排列方式

    *   携程网准备工作

    *   携程网头部

    *   携程网nav部分上

    *   携程网nav部分中

    *   携程网nav部分下

    *   携程网导航结束

    *   携程网over

    *   justify-content属性

    *   align-items属性

    *   flex-wrap属性

    *   align-content属性

    *   order属性

  *   BFC/

    *   认识BFC

    *   块级元素具有BFC条件

    *   块级元素触发BFC的属性

    *   BFC作用-清除内部浮动

    *   BFC作用-解决外边距合并

    *   BFC作用及其总结

  *   CSS补充知识/

    *   渐进增强和优雅降级

    *   浏览器前缀

    *   背景渐变上

    *   背景渐变下

    *   CSS W3C 统一的验证工具

    *   CSS 压缩工具

    *   认识 preserve-3d

    *   旋转轮播图结构制作

    *   旋转轮播图上

    *   旋转轮播图下

  *   CSS布局案例/

    *   靶心的制作

    *   圣杯布局和双飞翼布局

  *   CSS3小黄人案例/

    *   小黄人制作思路

    *   小黄人的结构制作

    *   小黄人头发的制作

    *   小黄人胳臂的制作

    *   小黄人的腿脚

    *   小黄人眼睛框的制作

    *   眼睛和嘴巴的制作

    *   裤子的制作

    *   小黄人肩带的制作

    *   头发和眼睛的动画制作

  *   文本溢出/

    *   单行文本溢出隐藏显示省略号

    *   webkit的css扩展方法实现多行文本溢出隐藏，显示省略号

    *   多行文本溢出隐藏，显示省略号的通用方法

  *   盒子水平和垂直居中/

    *   垂直居中的三种方法

    *   水平居中的四种方法

*   第三章 京东电商项目/

  *   京东网页头部和顶部实现/

    *   京东项目介绍

    *   京东项目目录准备

    *   京东项目添加ico图标

    *   自己制作ico图标

    *   三大标签优化

    *   火狐浏览器截图

    *   京东项目头部制作

    *   京东项目快速导航栏1

    *   京东项目快速导航栏2

    *   京东项目快速导航栏3

    *   下载京东字体图标

    *   使用京东字体图标

    *   手机京东部分制作

    *   logo的制作

    *   搜索框制作上

    *   搜索框制作下-追加字体图标

    *   购物车模块制作

    *   热点关键词的制作

    *   小导航栏上

    *   小导航栏下

    *   超级日部分制作

    *   页面底部服务开始

    *   底部服务中

    *   底部服务下

    *   帮助模块左侧制作

    *   帮助模块右侧制作

    *   版权模块上

    *   版权模块结束

  *   京东网页中间部分实现/

    *   中间分类部分的准备工作

    *   中间分类部分模块划分

    *   左侧分类上

    *   左侧分类下

    *   中间banner部分上

    *   京东轮播图布局

    *   右侧盒子模块划分

    *   登录模块制作上

    *   登录模块制作头像部分

    *   登录模块福利会员制作

    *   促销公告制作

    *   促销公告小红线的做法

    *   促销广告部分结束

    *   服务扩展模块li的制作

    *   服务扩展模块完成

    *   广告特效结构制作

    *   广告特效部分制作

    *   京东项目动态功能预展示

*   阶段作业 前端开发基础-第1套试卷/

  *   试卷