Web前端开发任务驱动式教程（HTML5+CSS3+JavaScript）（第2版）（微课版） 教案 第12讲次 任务13 阴影与渐变属性

教案序号：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，开源免费使用方法：第一步：在“/FortAwesome/Font-Awesome”地址下载，解压。只需用到“css”文件夹（样式文件）和“fonts”文件夹（字体文件）。第二步：将字体文件夹“fonts”和css文件“font-awesome.min.css”拷贝到站点目录下。注意：“font-awesome.min.css”文件必须要放在css文件夹中。第三步：使用web字体图标。在网页中链接引入font-awesome.min.css文件，使用<i>标签定义字体图标，并通过class属性定义不同的字体，例如“<iclass=’fafa-apple’></i>”。（每个图标都有相应的class，可以在http://fontawesome.io/icons/网页上查看。）图12-SEQ图\*ARABIC11文件夹目录图12-SEQ图\*ARABIC12复制并粘贴文件图12-SEQ图\*ARABIC13Web字体图标第三学时实战演练——制作网站广告栏案例描述：设计并制作旅游景点推荐网banner。图12-SEQ图\*ARABIC14“网页广告栏”网页图12-SEQ图\*ARABIC15“网页广告栏”的网页布局第四学时强化训练——制作旅游攻略网案例描述：设计并制作旅游攻略网，网页效果和布局图如下。图12-SEQ图\*ARABIC16“旅游攻略网”网页图12-SEQ图\*ARABIC17“旅游攻略网”的网页布局当光标移到导航上时，效果如图上所示。当光标移到内容块上时出现阴影效果，如图下所示图12-SEQ图\*ARABIC18鼠标指针移至导航栏时的超链接样式图12-SEQ图\*ARABIC19鼠标移至内容块时的效果课后实训设计商城首页通道，如图1所示。当鼠标移动到列表项时，图标和文字变成白色，出现如图2所示的效果。（提示：用Web字体图标完成。）图12-SEQ图\*A