课程一《pc+移动开发班》总课时:45个课时
独一无二的特色:全程以知识点结合案例讲解,让你吃透每个知识点

第一章:HTML常用标签

语言是什么 、Web前端开发语言、 HTML超文本标记语言 、 网页主体结构 、常用标签、超链接(a标签)、Img图片标签

案例:路径练习(页面插入图片)

第二章:盒子模型(2个课时)

初探Div盒子模型 、css样式、 简单css样式、盒子模型Border边框讲解、盒子模型外边距

盒子模型内边距、盒子模型占位计算、ul无序列表、ol有序列表、dl定义列表、补充知识(css)

案例一:border绘制三角形 案例二:腾讯新闻 案例三:图片展示效果 作业:新闻列表

第三章:样式初始化及display+外边距合并

样式初始化、元素类型转换、 内联元素对于以下属性特殊化、块级元素和内联元素的具体应用

控制元素水平方向居中、盒子模型外边距合并原则

案例一:天猫产品列表 案例二:选项卡新闻列表

第四章:元素选择符+背景(2个课时)

HTML命名规范 、 行业命名规范、 选择器初级 、background背景样式

案例一:左侧菜单 案例二:新闻潮流排行榜

第五章:css样式(Font+Text)+特殊符号

font字体样式、text文本样式、特殊符号、css样式查询表

案例一:复杂版图片展示 案例二:亲润官方商城左侧菜单

第六章:选择器高级及a伪类(2个课时)

第七章:选择器高级应用&样式优先级 常用css3

选择器优先级、样式的多种形式 、样式优先级排序、常用css3

案例一:圆角的具体应用 案例二:美女介绍 作业:左侧定位导航

第八章:浮动(2个课时)

浮动概况、浮动的一般情况 、 浮动的特殊情况 、 浮动对文字的影响

float浮动后的特征 和 inlink-block 特征对比、清除浮动、清除浮动的多种办法、min-width的运用

案例一:新浪导航 案例二:微信导航 案例三:护肤产品列表

第九章:定位(2个课时)

position定位概况、static 、相对定位 relative、绝对定位 absolute、固定定位、z-index 层的位置关系

案例一:一周热榜 案例二:右侧悬浮QQ 案例三:左右切换轮播特效 案例四:腾讯课堂左侧菜单

第十章:vertical-align img特征 cursor opacity(2个课时)

img特征、 vertical-align 垂直对齐方式、cursor指针样式、opacity透明度

案例一:竖直图片列表 案例二:选项卡产品展示 案例三:图片列表展示 作业:产品详细介绍

第十一章:表单

form表单 、form中的控件

案例一:商城登录界面制作

第十二章:表格(2个课时)

table表格结构 、table样式重置、table的默认特征、table单元格合并、display:table的特征

案例一:VIp课程表制作 案例二:收货地址

第十三章:frameset框架

iframe内联框架、frameset框架集、frame子框架、自适应框架实例

案例一:作业展示框架 案例二:简单版网站展示效果 案例三:框架中的框架

第十四章:阿里图标+css高级应用

CSS继承指的是、css重用、组件化开发:网页中不同功能模块,写入不同的css文件、ico网站logo、阿里图标

案例一:天猫顶部菜导航 案例二:天猫左侧二级菜单

第十五章:ps工具常用技巧(2个课时)

安装PS、菜单栏介绍、工具栏工具名称及快捷键 、蒙版,链接图层,图层分组、图层右键菜单、混合模式、菜单栏详细讲解

第十六章:项目实战(6个课时)

每期的项目实战都会不一样,每期都是以企业标准来讲解开发项目实战

项目实战一:咖啡网站 项目实战二:风味小厨

第十七章:终结篇:网站上线(空间,域名)

如何购买空间和域名,网站上传工具ftp使用,最终实现网站上线

移动网站开发内容

第一章:HTML5简介、HTML5新增标签

CSS选择器回顾、结构选择器、关联选择器、属性选择器新增、伪类新增、

第二章:css3新增选择器

结构选择器:
:nth-child(n) 父元素下的第n个子元素
:nth-child(odd)奇数子元素(同nth-child(2n-1))
:nth-child(even)偶数子元素(同nth-child(2n))
:nth-child(an+b)公式
:nth-last-child(n) 倒数第n个子元素
:nth-of-type(n) 父元素下的第n个指定类型的子元素
:nth-last-of-type 父元素下的数第n个指定类型的子元素
:first-child 选择父元素下的第一个子元素
:last-child 选择父元素下的最后一个子元素
:only-child 选择父元素下唯一的子元素
:only-of-type选择父元素下指定类型的唯一子元素
:root 选择文档的根目录,返回html

属性选择器:
:E[attr] 属性名,不确定具体属性值
:E[attr="value"] 指定属性名,并指定其对应属性值
:E[attr ~="value"] 指定属性名,其具有多个属性值空格隔开,并包含value值
:E[attr ^= "value"] 指定属性名,属性值以value开头
:E[attr $="value"] 指定属性名,属性值以value结束
:E[attr *="value"] 指定了属性名,属性值中包含了value
:E[attr |= "value"] 指定属性名,属性值以value-开头

UI伪类选择器:
:enabled 选择启用状态元素
:disabled 选择禁用状态元素
:checked 选择被选中的input元素(单选按钮或复选框)
:default 选择默认元素
:valid、invalid 根据输入验证选择有效或无效的input元素
:in-range、out-of-range 选择指定范围之内或者之外受限的元素
:required、optional 根据是否允许
:required属性选择input元素

动态伪类选择器:
:link 选择链接元素
:visited 选择用户以访问的元素
:hover 鼠标悬停其上的元素
:active 鼠标点击时触发的事件
:focus 当前获取焦点的元素

其他伪类选择器:
:not(<选择器>) 对括号内选择器的选择取反
:lang(<目标语言>) 基于lang全局属性的元素
:target url片段标识符指向的元素
:empty选择内容为空的元素
:selection 鼠标光标选择元素内容

第四章:背景

background-size:背景尺寸
background:url() 0 0,url() 0 100%;多背景
background-origin 背景区域定位
background-clip 背景绘制区域 颜色渐变
background-image:linear-gradient()线性渐变
background-image:radial-gradient()径向性渐变

第五章:文本属性

color:rgba();
text-overflow:是否使用一个省略标记(...)标示对象内文本的溢出(单行文本溢出、多行文本溢出)
text-align:文本的对齐方式
text-transform:文字的大小写
text-decoration:文本的装饰线,复合属性
text-shadow:文本阴影
text-fill-color:文字填充颜色
text-stroke:复合属性。设置文字的描边
tab-size:制表符的长度
word-wrap:当前行超过指定容器的边界时是否断开转行
word-break:规定自动换行的处理方法

第六章:弹性盒模型

box布局设置给父元素属性:
display:box/display:inline-box;
box-orient 定义盒模型的布局方向
box-direction 元素排列顺序
box-pack 对盒子富裕的空间进行管理
box-align 在垂直方向上对元素的位置进行管理

设置给子元素
box-ordinal-group 设置元素的具体位置
box-flex 定义盒子的弹性空间

flex布局设置给父元素属性:
flex-direction属性决定显示的方向(即项目的排列方向)
flex-wrapflex-wrap属性定义,如果一行排不下,如何换行。
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
justify-content属性定义了项目在水平方向的对齐方式。
align-items属性定义项目在竖直方向上如何对齐。
align-content属性定义了多行的对齐方式。如果项目只在一行,该属性不起作用。

设置给子元素:
order 属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。可为负值
flex-grow 属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
flex-shrink 属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
flex-basis 属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空 间。它的默认值为auto,即项目的本来大小。
flex 属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
align-self 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的 align-items属性,如果没有父元素,则等同于stretch。

第七章:怪异盒模型(box-sizing)

box-sizing 盒模型解析模式

content-box 标准盒模型(和css2一样的计算) width/height=border+padding+content

border-box 怪异盒模型 width/height与设置的值一样 ,content减小 3、2D变换、3D变换

第八章:盒子阴影、倒影

box-shadow 阴影 box-reflect 倒影

第九章:2D+3D变换

2D变换
ransform:rotate() 旋转函数 (deg) deg 度数
skew(X,Y) 倾斜函数 (deg)
skewX()
skewY()
scale(X,Y) 缩放函数 (正数、负数和小数)
scaleX()
scaleY()
translate(X,Y) 位移函数(px)
translateX()
translateY()
matrix(a,b,c,d,e,f) 矩阵函数

3D变换
transform-style(preserve-3d) 建立3D空间
perspective 视镜
perspective- origin 视镜基点
x:left/center/right/length/%
y:top/center/bottom/length/%
transform 新增函数
rotateZ()
translateZ()
scaleZ()translate3d(x,y,z)
backface-visibility: hidden;

第十章:动画过渡

transition:property duration timing-function delay;
transition-property:过渡属性的名称
transition-duration:过渡属性花费的时间
transition-timing-function:过渡效果速度曲线(贝塞尔曲线详解)
transition-delay:过渡效果延迟时间
过渡完成事件:transitionend

第十一章:自定义动画

animation-name: 动画名称
animation-duration: 动画执行时间
animation-timing-function: 动画速度曲线(贝塞尔曲线详解)
animation-delay:动画效果延迟时间
animation-iteration-count: 动画执行次数
animation-direction:动画执行方向
animation-play-state:动画执行状态
animation-fill-mode:动画执行过程效果是否可见
@keyframes:规定动画关键帧
from{} to{}
0%{} 100%{}
动画事件:animationstart/animationiteration/animationend

第十二章:布局

分栏布局
column-width栏目宽度
column-count栏目列数
column-gap栏目距离
column-rule栏目间隔线

响应式布局:媒体类型
*all 所有媒体
braille 盲文触觉设备
embossed 盲文打印机
*print 手持设备
projection 打印预览
*screen 彩屏设备
speech '听觉'类似的媒体类型
tty 不适用像素的设备
tv 电视

关键字
and
not关键字是用来排除某种制定的媒体类型
only用来定某种特定的媒体类型

样式引入 @media screen----些处内容重点太多,暂保密

第十三章:智能表单及表单验证反馈

input表单type属性值:
type = "email" 限制用户输入必须为Email类型
type="url" 限制用户输入必须为URL类型
type="date" 限制用户输入必须为日期类型
type="datetime" 显示完整日期 含时区
type="datetime-local" 显示完整日期 不含时区
type="time" 限制用户输入必须为时间类型
type="month" 限制用户输入必须为月类型
type="week" 限制用户输入必须为周类型
type="number" 限制用户输入必须为数字类型
type="range" 生成一个滑动条
type="search" 具有搜索意义的表单results="n"属性
type="color" 生成一个颜色选择表单
type="tel" 显示电话号码

新增属性:
equired: required 内容不能为空
placeholder: 表单提示信息
autofocus:自动聚焦
pattern: 正则表达式 输入的内容必须匹配到指定正则范围
autocomplete:是否保存用户输入值默认为on,关闭提示选择 off
formaction: 在submit里定义提交地址
datalist: 输入框选择列表配合list使用 list值为datalist的id值

表单验证反馈:
Invalid事件 validity对象(valid查看验证是否通过)
input.addEventListener('invalid',fn,false)
阻止默认验证:ev.preventDefault()
formnovalidate属性 : 关闭验证
oText.addEventListener("invalid",fn1,false);
ev.preventDefault()
valueMissing : 输入值为空时
typeMismatch : 控件值与预期类型不匹配
patternMismatch : 输入值不满足pattern正则
customError 不符合自定义验证
setCustomValidity();
自定义验证
tooLong : 超过maxLength最大限制
rangeUnderflow : 验证的range最小值
rangeOverflow:验证的range最大值
stepMismatch: 验证range 的当前值 是否符合min、max及step的规则
output: 计算或脚本输出

项目实战:做一个完整手机网站布局(swiper.js+iscroll.js)(5节课)