基本信息
文件名称:Web前端开发任务驱动式教程(HTML5+CSS3+JavaScript)(第2版)(微课版) 教案 第12讲次 任务13 阴影与渐变属性.docx
文件大小:2.2 MB
总页数:11 页
更新时间:2025-05-27
总字数:约3.05千字
文档摘要

教案

序号: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