教案
序号:12
授课日期
课时数
4
章节名称
任务13阴影与渐变属性
教学内容
重点
box-shadow属性、线性渐变、径向渐变、Web字体图标。
难点
Web字体图标的使用。
教学目的与要求
掌握使用DIV+CSS布局的方法。
学会使用阴影——box-shadow属性、box-sizing属性。
学会使用渐变属性——线性渐变、径向渐变。
了解重复渐变。
教学方法
与手段
教师采用任务驱动法,使用教学PPT辅助授课。
教师操作演示,学生实训练习。
学生课前课后均可通过“浙江省高等学校在线开放课程共享平台”的配套微课学习。
作业及
思考题
完成课堂上未完成的习题,通过网络平台上交作业。
通过回帖的方式回答课上留下的思考题。
预习下一节内容。
讲授内容
课堂组织
第一学时
(任务13阴影与渐变属性
13.1box-shadow属性、13.2box-sizing属性、13.3线性渐变)
实操任务目标发布
实战演练——制作网站广告栏
图12-SEQ图\*ARABIC\r11“网站广告栏”网页
强化训练——制作旅游攻略网
图SEQ图\*ARABIC2“旅游攻略网”网页
实操任务目标发布
box-shadow属性
box-shadow属性:为盒子模型添加阴影效果
语法规则:box-shadow:像素值1像素值2像素值3像素值4颜色值
阴影类型;
子任务:
图SEQ图\*ARABIC3box-shadow属性图SEQ图\*ARABIC4多重阴影效果
box-sizing属性
box-sizing属性:定义盒子的宽度值(width)或高度值(height)是否包含元素的边框和内边距。
content-box:定义盒子的宽度值(width)或高度值(height)时,不包含元素的边框和内边距。
border-box:定义盒子的宽度值(width)或高度值(height)时,包含元素的边框和内边距。
图SEQ图\*ARABIC5box-sizing属性
线性渐变
线性渐变:起始颜色会沿着一条直线按顺序过渡到结束颜色
语法规则:background-image:linear-gradient(渐变角度,颜色值1起始位置,颜色值2起始位置,……,颜色值n起始位置);
渐变角度:取值范围是0~360deg,totop(从下到上,0deg),toleft(从右到左,270deg),toright(从左到右,90deg),tobottom(从上到下,180deg)。
起始位置:用于设置颜色边界,起始位置的值为像素数值或百分比数值。
图12-SEQ图\*ARABIC6线性渐变图12-SEQ图\*ARABIC7线性渐变效果
第二学时
(任务13阴影与渐变属性
13.4径向渐变、13.5重复渐变、13.6Web字体图标)
知识准备
径向渐变
径向渐变:起始颜色会从一个中心点开始,依据椭圆或圆形形状进行扩张渐变。
语法规则:background-image:radial-gradient(渐变形状圆心位置,颜色值1起始位置,颜色值2起始位置,……,颜色值n起始位置);
渐变形状:水平和垂直半径的像素值或百分比,circle或ellipse。
圆心位置:定义元素渐变的中心位置,atcenter、atleft/right、attop/bottom、at像素值/百分比。
起始位置:用于设置颜色边界,起始位置的值为像素数值或百分比数值。
图12-SEQ图\*ARABIC8径向渐变
重复渐变
重复渐变:让线性渐变或者径向渐变重复执行。
注意:只有当首尾两颜色位置不在0%或100%时,重复渐变才生效。
(1)重复线性渐变
background-image:repeating-linear-gradient(渐变角度,颜色值1起始位置,颜色值2起始位置,……,颜色值n起始位置);
图12-SEQ图\*ARABIC9重复线性渐变
(2)重复径向渐变
background-image:repeating-radial-gradient(渐变形状圆心位置,颜色值1起始位置,颜色值2起始位置,……,颜色值n起始位置);
图12-SEQ图\*ARABIC10重复径向渐变
Web文字图标
Web字体图标:替代图片图标,矢量。字体图标小,下载速度快。
图标工具:font-awesome,开源免费
使用方法:
第一步:在“/FortAwe