Web前端开发任务驱动式教程(HTML5+CSS3+JavaScript)任务13-阴影与渐变属性课件_第1页
Web前端开发任务驱动式教程(HTML5+CSS3+JavaScript)任务13-阴影与渐变属性课件_第2页
Web前端开发任务驱动式教程(HTML5+CSS3+JavaScript)任务13-阴影与渐变属性课件_第3页
Web前端开发任务驱动式教程(HTML5+CSS3+JavaScript)任务13-阴影与渐变属性课件_第4页
Web前端开发任务驱动式教程(HTML5+CSS3+JavaScript)任务13-阴影与渐变属性课件_第5页
已阅读5页，还剩45页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

任务13阴影与渐变属性第五单元盒子模型任务13阴影与渐变属性第五单元盒子模型1学习目标径向渐变box-shadow属性box-sizing属性线性渐变掌握Web字体图标学习目标径向渐变box-shadow属性box-sizing2重复渐变了解:学习目标重复渐变了解:学习目标3任务目标实战演练——制作网站广告栏任务目标实战演练——制作网站广告栏4任务目标实战演练——制作旅游攻略网任务目标实战演练——制作旅游攻略网5知识准备1.box-shadow属性box-shadow属性：为盒子模型添加阴影效果语法规则：box-shadow：像素值1像素值2像素值3像素值4颜色值阴影类型；参数值说明像素值1必需。阴影的水平偏移量。正值阴影在右，负值阴影在左。像素值2必需。阴影的垂直偏移量。正值阴影在下，负值阴影在上。像素值3可选。阴影的模糊半径。只能为正值。值越大，阴影越模糊。像素值4可选。阴影的扩展半径。正值阴影扩大，负值阴影缩小。颜色值可选。阴影的颜色。阴影类型可选。外阴影(outset)或内阴影(inset)。知识准备1.box-shadow属性box-shadow属6知识准备示例：box-shadow属性<styletype="text/css">div{width:200px;height:200px;margin:10pxauto;border:1pxsolid#000;}#box{

box-shadow:5px5px10px2px#999;/*水平阴影位置，垂直阴影位置，阴影模糊半径，阴影扩展半径，阴影的颜色;*/}</style><body><divid="box"></div></body>box-shadow:5px5px10px2px#999,5px5px10px2px#999inset;知识准备示例：box-shadow属性<styletype7知识准备2.box-sizing属性box-sizing属性：定义盒子的宽度值（width）或高度值（height）是否包含元素的边框和内边距。content-box：定义盒子的宽度值（width）或高度值（height）时，不包含元素的边框和内边距。border-box：定义盒子的宽度值（width）或高度值（height）时，包含元素的边框和内边距。知识准备2.box-sizing属性box-sizing属8知识准备示例：box-sizing属性<styletype="text/css">div{width:230px;height:80px;margin:10pxauto;border:4pxsolid#000;padding:10px;}#box1{box-sizing:content-box;}#box2{

box-sizing:border-box;}</style><body><divid="box1">box1:content-box</div><divid="box2">box2:border-box</div></body>知识准备示例：box-sizing属性<styletype9知识准备3.线性渐变线性渐变：起始颜色会沿着一条直线按顺序过渡到结束颜色语法规则：background-image:linear-gradient(渐变角度,颜色值1起始位置,颜色值2起始位置,……,颜色值n起始位置);渐变角度：取值范围是0~360deg，totop（从下到上，0deg），toleft（从右到左，270deg）,toright（从左到右，90deg）,tobottom（从上到下，180deg）。起始位置：用于设置颜色边界，起始位置的值为像素数值或百分比数值。知识准备3.线性渐变线性渐变：起始颜色会沿着一条直线按顺序10知识准备示例：线性渐变<styletype="text/css">div{width:200px;height:200px;margin:10pxauto;border:1pxsolid#000;background-image:linear-gradient(toright,#F00,#0F0);}</style><body><div></div></body>background-image:linear-gradient(90deg,#F00,#0F050%,#00F80%);知识准备示例：线性渐变<styletype="text/c11知识准备4.径向渐变径向渐变：起始颜色会从一个中心点开始，依据椭圆或圆形形状进行扩张渐变。语法规则：background-image:radial-gradient(渐变形状圆心位置,颜色值1起始位置,颜色值2起始位置,……,颜色值n起始位置);渐变形状：水平和垂直半径的像素值或百分比，circle或ellipse。圆心位置：定义元素渐变的中心位置，atcenter、atleft/right、attop/bottom、at像素值/百分比。起始位置：用于设置颜色边界，起始位置的值为像素数值或百分比数值。知识准备4.径向渐变径向渐变：起始颜色会从一个中心点开始，12知识准备示例：径向渐变<styletype="text/css">div{width:200px;height:200px;margin:10pxauto;border:1pxsolid#000;background-image:radial-gradient(circleatcenter,#F0020%,#0F060%,#00F80%);}</style><body><div></div></body>知识准备示例：径向渐变<styletype="text/c13知识准备5.重复渐变重复渐变：让线性渐变或者径向渐变重复执行。注意：只有当首尾两颜色位置不在0%或100%时，重复渐变才生效。（1）重复线性渐变background-image:repeating-linear-gradient(渐变角度,颜色值1起始位置,颜色值2起始位置,……,颜色值n起始位置);（2）重复径向渐变

background-image:repeating-radial-gradient

(渐变形状圆心位置,颜色

值1起始位置,颜色值2起始位置,……,颜色值n起始位置);知识准备5.重复渐变重复渐变：让线性渐变或者径向渐变重复执14知识准备示例：重复线性渐变<styletype="text/css">div{width:200px;height:200px;margin:10pxauto;border:1pxsolid#000;

background-image:repeating-linear-gradient(90deg,#F00,#0F020%,#00F35%);}</style><body><div></div></body>知识准备示例：重复线性渐变<styletype="text15<styletype="text/css">div{width:200px;height:200px;margin:10pxauto;border:1pxsolid#000;

background-image:repeating-radial-gradient(circleat50%50%,#F00,#0F015%,#00F25%);}</style>知识准备示例：重复径向渐变<body><div></div></body><styletype="text/css">知识准备示例：16知识准备6.Web字体图标Web字体图标：替代图片图标，矢量。字体图标小，下载速度快。图标工具：font-awesome，开源免费使用方法：第一步：在“/FortAwesome/Font-Awesome”地址下载，解压。只需用到“css”文件夹（样式文件）和“fonts”文件夹（字体文件）。知识准备6.Web字体图标Web字体图标：替代图片图标，矢17知识准备6.Web字体图标使用方法：第二步：将字体文件夹“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/网页上查看。）知识准备6.Web字体图标使用方法：第二步：将字体文件夹“18<head><metacharset="utf-8"><title>web字体图标</title>

<linkhref="css/font-awesome.min.css"rel="stylesheet"type="text/css"><styletype="text/css">.fa-apple{font-size:3em;color:#F00;}</style></head>知识准备示例：web字体图标<body>

<iclass="fafa-apple"></i></body><head>知识准备示例：web字体图标<body>19实战演练案例描述：设计并制作网站广告栏，网页效果和布局图如下。制作网站广告栏实战演练案例描述：设计并制作网站广告栏，网页效果和布局图如下20强化训练案例描述：设计并制作旅游攻略网，网页效果和布局图如下。制作旅游攻略网强化训练案例描述：设计并制作旅游攻略网，网页效果和布局图如下21强化训练当光标移到导航上时，效果如图上所示。当光标移到内容块上时出现阴影效果，如图下所示。制作旅游攻略网强化训练当光标移到导航上时，效果如图上所示。22任务小结01box-shadow属性02box-sizing属性03线性渐变04径向渐变05重复渐变06Web字体图标任务小结01box-shadow属性02box-sizing23课后实训设计商城首页通道，如图1所示。当鼠标移动到列表项时，图标和文字变成白色，出现如图2所示的效果。（提示：用Web字体图标完成。）图1图2课后实训设计商城首页通道，如图1所示。当鼠标24谢谢观看谢谢观看25任务13阴影与渐变属性第五单元盒子模型任务13阴影与渐变属性第五单元盒子模型26学习目标径向渐变box-shadow属性box-sizing属性线性渐变掌握Web字体图标学习目标径向渐变box-shadow属性box-sizing27重复渐变了解:学习目标重复渐变了解:学习目标28任务目标实战演练——制作网站广告栏任务目标实战演练——制作网站广告栏29任务目标实战演练——制作旅游攻略网任务目标实战演练——制作旅游攻略网30知识准备1.box-shadow属性box-shadow属性：为盒子模型添加阴影效果语法规则：box-shadow：像素值1像素值2像素值3像素值4颜色值阴影类型；参数值说明像素值1必需。阴影的水平偏移量。正值阴影在右，负值阴影在左。像素值2必需。阴影的垂直偏移量。正值阴影在下，负值阴影在上。像素值3可选。阴影的模糊半径。只能为正值。值越大，阴影越模糊。像素值4可选。阴影的扩展半径。正值阴影扩大，负值阴影缩小。颜色值可选。阴影的颜色。阴影类型可选。外阴影(outset)或内阴影(inset)。知识准备1.box-shadow属性box-shadow属31知识准备示例：box-shadow属性<styletype="text/css">div{width:200px;height:200px;margin:10pxauto;border:1pxsolid#000;}#box{

box-shadow:5px5px10px2px#999;/*水平阴影位置，垂直阴影位置，阴影模糊半径，阴影扩展半径，阴影的颜色;*/}</style><body><divid="box"></div></body>box-shadow:5px5px10px2px#999,5px5px10px2px#999inset;知识准备示例：box-shadow属性<styletype32知识准备2.box-sizing属性box-sizing属性：定义盒子的宽度值（width）或高度值（height）是否包含元素的边框和内边距。content-box：定义盒子的宽度值（width）或高度值（height）时，不包含元素的边框和内边距。border-box：定义盒子的宽度值（width）或高度值（height）时，包含元素的边框和内边距。知识准备2.box-sizing属性box-sizing属33知识准备示例：box-sizing属性<styletype="text/css">div{width:230px;height:80px;margin:10pxauto;border:4pxsolid#000;padding:10px;}#box1{box-sizing:content-box;}#box2{

box-sizing:border-box;}</style><body><divid="box1">box1:content-box</div><divid="box2">box2:border-box</div></body>知识准备示例：box-sizing属性<styletype34知识准备3.线性渐变线性渐变：起始颜色会沿着一条直线按顺序过渡到结束颜色语法规则：background-image:linear-gradient(渐变角度,颜色值1起始位置,颜色值2起始位置,……,颜色值n起始位置);渐变角度：取值范围是0~360deg，totop（从下到上，0deg），toleft（从右到左，270deg）,toright（从左到右，90deg）,tobottom（从上到下，180deg）。起始位置：用于设置颜色边界，起始位置的值为像素数值或百分比数值。知识准备3.线性渐变线性渐变：起始颜色会沿着一条直线按顺序35知识准备示例：线性渐变<styletype="text/css">div{width:200px;height:200px;margin:10pxauto;border:1pxsolid#000;background-image:linear-gradient(toright,#F00,#0F0);}</style><body><div></div></body>background-image:linear-gradient(90deg,#F00,#0F050%,#00F80%);知识准备示例：线性渐变<styletype="text/c36知识准备4.径向渐变径向渐变：起始颜色会从一个中心点开始，依据椭圆或圆形形状进行扩张渐变。语法规则：background-image:radial-gradient(渐变形状圆心位置,颜色值1起始位置,颜色值2起始位置,……,颜色值n起始位置);渐变形状：水平和垂直半径的像素值或百分比，circle或ellipse。圆心位置：定义元素渐变的中心位置，atcenter、atleft/right、attop/bottom、at像素值/百分比。起始位置：用于设置颜色边界，起始位置的值为像素数值或百分比数值。知识准备4.径向渐变径向渐变：起始颜色会从一个中心点开始，37知识准备示例：径向渐变<styletype="text/css">div{width:200px;height:200px;margin:10pxauto;border:1pxsolid#000;background-image:radial-gradient(circleatcenter,#F0020%,#0F060%,#00F80%);}</style><body><div></div></body>知识准备示例：径向渐变<styletype="text/c38知识准备5.重复渐变重复渐变：让线性渐变或者径向渐变重复执行。注意：只有当首尾两颜色位置不在0%或100%时，重复渐变才生效。（1）重复线性渐变background-image:repeating-linear-gradient(渐变角度,颜色值1起始位置,颜色值2起始位置,……,颜色值n起始位置);（2）重复径向渐变

background-image:repeating-radial-gradient

(渐变形状圆心位置,颜色

值1起始位置,颜色值2起始位置,……,颜色值n起始位置);知识准备5.重复渐变重复渐变：让线性渐变或者径向渐变重复执39知识准备示例：重复线性渐变<styletype="text/css">div{width:200px;height:200px;margin:10pxauto;border:1pxsolid#000;

background-image:repeating-linear-gradient(90deg,#F00,#0F020%,#00F35%);}</style><body><div></div></body>知识准备示例：重复线性渐变<styletype="text40<styletype="text/css">div{width:200px;height:200px;margin:10pxauto;border:1pxsolid#000;

background-image:repeating-radial-gradient(circleat50%50%,#F00,#0F015%,#00F25%);}</style>知识准备示例：重复径向渐变<body><div></div></body><styletype="text/css">知识准备示例：41知识准备6.Web字体图标Web字体图标：替代图片图标，矢量。字体图标小，下载速度快。图标工具：font-awesome，开源免费使用方法：第一步：在“/FortAwesome/Font-Awesome”地址下载，解压。只需用到“css”文件夹（样式文件）和“fonts”文件夹（字体文件）。知识准备6.Web字体图标Web字体图标：替代图片图标，矢42知识准备6.Web字体图标使用方法：第二步：将字体文件夹“fonts”和css文件“font-awesome.min.css

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论