任务10盒子模型及应用;学习目标;;任务目标;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;实战演练;强化训练;任务小结;课后实训;;任务11元素的浮动;学习目标;;任务目标;任务目标;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;实战演练;强化训练;任务小结;课后实训;;任务12元素的定位;学习目标;;任务目标;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;实战演练;强化训练;任务小结;课后实训;;任务13阴影与渐变属性;学习目标;;任务目标;任务目标;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;styletype=text/css

div{

width:200px;

height:200px;

margin:10pxauto;

border:1pxsolid#000;

background-image:repeating-radial-gradient(circleat50%50%,#F00,#0F015%,#00F25%);

}

/style;知识准备;知识准备;head

metacharset=utf-8

titleweb字体图标/title

linkhref=css/font-awesome.min.cssrel=stylesheettype=text/css

styletype=text/css

.fa-apple{

font-size:3em;

color:#F00;

}

/style

/head;实战演练;强化训练;强化训练;任务小结;课后实训;;任务14过渡与变形属性;学习目标;任务目标;知识准备;知识准备;styletype=text/css

.box{

width:60px;

height:60px;

border:70pxsolid#0F0;

transition:3s;/*transition属性写在初始状态的样式中*/

}

.box:hover{

border-radius:50%;

}

/style;知识准备;知识准备;styletype=text/css

body{

margin:30px;

background-color:#E9E9E9;

font-family:微软雅黑;}

div{

width:294px;

padding:10px10px20px10px;

border:1pxsolid#BFBFBF;

background-color:white;

box-shadow:2px2px3px#aaaaaa;}

.rotate_left{

float:left;

transform:rotate(7deg);/*顺时针旋转7度*/}

.rotate_right{

float:left;

transform:rotate(-8deg);/*逆时针旋转8度*/}

/style;实战演练;强化训练;任务小结;课后实训;;任务15表单与input元素;学习目标;;任务目标;知识准备;autocomplete属性：控制表单自动完成功能的开启和关闭

novalidate属性：规定当提交表单时不对其进行验证;知识准备;知识准备;知识准备;实战演练;强化训练;任务小结;课后实训;;任务16其他表单元素与

表单验证;学习目标;;任务目标;任务目标;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备;知识准备