【雅恩老师】单元3--图文展示网页设计

单元3图文展示网页设计✎请简要概括什么是CSS的层叠性、继承性和重要性。请简述什么是CSS的优先级，并做出总结。提问（1）CSS层叠性是指当有相同权重的样式存在时，会根据这些CSS样式的前后顺序来决定，处于最后面的CSS样式会被应用。（2）CSS的继承性是指具有继承性的CSS样式可以被应用于某个特定HTML标签及其后代。（3）CSS重要性是指在同一组属性设置中标有“!important”的样式优先级最大，将会覆盖其他属性设置。CSS优先级即是指CSS样式在浏览器中被解析的权重不同。CSS优先级进行总结，具体如下：（1）权值越大越优先；（2）当权值相等时，后出现的样式表设置要优于先出现的样式表设置；（3）创作者的规则高于浏览者：即网页编写者设置的CSS样式的优先权高于浏览器所设置的默认样式；（4）继承的CSS样式权值小于后来指定的CSS样式；（5）在同一组属性设置中标有“!important”规则的优先级最大；作业点评✎掌握CSS3精灵技术和使用CSS3实现动画效果21HTML图像标签的使用3掌握CSS3背景设置、阴影、渐变、圆角边框、过渡和变形学习目标掌握✎•传智书城1页面展示：购物网站通常会以图文混排的方式展示商品信息，本项目将实现一个名为传智书城的网上书城页面，当鼠标悬停到某个商品上时，会出现商品的价格等信息。鼠标悬停商品效果2技术要点：①HTML5常用图像标签②CSS背景设置③CSS阴影和渐变项目3-1-项目描述✎•img标签–img标签用于定义网页中的图像，语法格式如下所示：imgsrc=图片路径alt=图片无法显示时显示的文字/src和alt是img标签必需的属性。•figure标签和figcaption标签案例代码（详见教材demo3-1）–当需要在网页中添加一个插图时，就可以使用figure标签来实现。figurefigcaption一只呆萌的小鸡/figcaptionp拍摄者：papi拍摄时间：2016年2月/pimgsrc=images/demo3-1/chicken.pngalt=抱歉您的图片不能显示/figure标注插图前导知识-HTML5常用图像标签✎–CSS用于背景设置的常用属性如下所示。属性名属性描述background-color设置背景色。background-image设置图片背景。background-repeat设置背景平铺重复方向。background-attachment设置或检索背景图像是随对象内容滚动还是固定的。background-position设置或检索对象的背景图像位置，语法为length|length或者position|positionbackground-size规定背景图像的尺寸。red，green，blue预定义的颜色值。#FF0000，#FF6600，#29D794十六进制颜色值，也是最常用的定义颜色的方式。rgba(255,0,0,0.5)或rgba(100%,0%,0%,0.5)r：红色值；g：绿色值；b：蓝色值，rgb的取值可以是正整数也可以是百分数。a：透明度，取值0~1之间。url(url)直接引用图片地址来设置图片作为对象背景。repeat背景图像在纵向和横向上平铺。no-repeat背景图像不平铺。repeat-x背景图像在横向上平铺。repeat-y背景图像在纵向平铺。Scroll：背景图像是随对象内容滚动。Fixed：背景图像固定。length：百分数|由浮点数字和单位标识符组成的长度值。如：35%80%或35%2.5cmposition：top|center|bottom|left|center|right。length第一个值设置宽度，第二个值设置高度。一个值时，第二个值会被设置为auto。percentage以父元素的百分比来设置背景图像的宽度和高度，用法同上。cover背景图完全覆盖背景区域。contain宽和高完全适应内容区域。前导知识-CSS背景设置✎–用backgroung进行设置。•CSS背景设置的复合写法选择器{background:background-color||background-image||background-repeat||background-attachment||background-position}如使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。默认值为：transparentnonerepeatscroll0%0%。前导知识-CSS背景设置✎•盒阴影对象选择器{box-shadow:投影方式||X轴偏移量||Y轴偏移量||阴影模糊半径||阴影扩展半径||阴影颜色}此参数是一个可选值，如果不设值，其默认的投影方式是外阴影，设置阴影类型为“inset”时，其投影就是内阴影。是指阴影水平偏移量其值可以是正负值，如果值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边。是指阴影的垂直偏移量，其值也可以是正负值，如果为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部。此参数是可选，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊。此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小。此参数可选，如果不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省略此参数。前导知识-CSS阴影和渐变✎案例代码详见教材demo3-2前导知识-CSS阴影和渐变✎•CSS3渐变线性渐变径向渐变前导知识-CSS阴影和渐变✎•线性渐变案例代码（详见教材demo3-3）background-image:linear-gradient([angle|side-or-corner,]colorstop,colorstop[,colorstop]*);表示渐变的角度，角度数的取值范围是0~365deg。这个角度是以圆心为起点的角度，并以这个角度为发散方向进行渐变。通过关键词来确定渐变的方向。默认值为top（从上向下），取值范围是[left,right,top,bottom,center,topright,topleft,bottomleft,bottomright,leftcenter,rightcenter]。注意：IE10只能取[left,top]，Chrome则没有[center,leftcenter,rightcenter]。用于设置颜色边界，color为边界的颜色，stop为该边界的位置，stop的值为像素数值或百分比数值，若为百分比且小于0%或大于100%则表示该边界位于可视区域外。两个colorstop之间的区域为颜色过渡区。前导知识-CSS阴影和渐变✎•径向渐变案例代码（详见教材demo3-4）background-image:radial-gradient(圆心坐标,渐变形状渐变大小,colorstop,colorstop[,colorstop]*);用于设置放射的圆形坐标，可设置为形如10px20px的x-offsety-offset，或使用预设值center（默认值）。circle：圆形。ellipse：椭圆形，默认值。closest-side或contain:以距离圆心最近的边的距离作为渐变半径。closest-corner:以距离圆心最近的角的距离作为渐变半径。farthest-side:以距离圆心最远的边的距离作为渐变半径。farthest-corner或cove:以距离圆心最远的角的距离作为渐变半径。前导知识-CSS阴影和渐变✎•多学一招：重复渐变/*线性重复渐变*/repeating-linear-gradient(起始角度,colorstop,colorstop[,colorstop]*)/*径向重复渐变*/repeating-radial-gradient(圆心坐标,渐变形状渐变大小,colorstop,colorstop[,colorstop]*)–了解了线性渐变和径向渐变的使用方法后，接下介绍一下重复渐变。对以上两种渐变方式都是适用的，只需在两个属性前添加“repeating-“,具体语法格式如下：前导知识-CSS阴影和渐变✎该传智书城页面由header部分和两个商品模块构成。1页面结构：•传智书城项目3-1-项目分析✎案例代码（详见教材代码实现）2实现细节：①header部分使用header标签中嵌套img标签引入图片；两个大的商品模块由类名为items的div标签构成，在div.items中使用多个类名为item的div标签组成多个商品块。②商品信息中qq图标为gif格式的图片，为了控制不同的文本样式，图书价格信息需要在div中嵌套i标签。③在热销教材和精品套系两个模块使用了渐变色。④为每个图书商品添加阴影，当鼠标悬停在每个商品上面时，显示价格等信息的div层，该层是半透明的效果，使用“background-color:rgba(88,166,240,0.8);”来实现。⑤rgb表示RedGreenBule3色，rgba前三个参数表示三色的值混合，最后一个参数0.8则是指的透明度，1或100%表示不透明。•传智书城项目3-1-项目分析✎1页面展示：①与项目3-1的传智书城页面相比，本项目结合CSS3的一些新特性，如圆角、过渡、变形等对购物页面进行了一系列的优化，完成一个多肉植物的购物商城页面。•多肉商城2技术要点：①CSS3圆角边框②CSS3过渡（CSS3transitions）③CSS3变形（CSS3transform）项目3-2-项目描述✎–CSS3的圆角边框实际上是在矩形的四个角分别做内切圆，然后通过设置内切圆的半径来控制圆角的弧度。•border-radius属性–CSS3的圆角边框使用border-radius属性来实现，基本语法如下所示：border-radius:1-4length|%/1-4length|%;length用于设置对象的圆角半径长度，不可为负值。如果“/”前后的值都存在，那么“/”前面的值设置其水平半径，“/”后面值设置其垂直半径。如果没有“/”，则表示水平和垂直半径相等。另外其四个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设置。如果省略bottom-left，则与top-right相同，如果省略bottom-right，则与top-left相同，如果省略top-right，则与top-left相同。前导知识-CSS3圆角边框✎–border-radius是一种缩写的方式，其实border-radius和border属性一样，还可以把各个角单独拆分出来，也就是以下四种写法：•其他写法border-top-left-radius:lengthlength//左上角border-top-right-radius:lengthlength//右上角border-bottom-right-radius:lengthlength//右下角border-bottom-left-radius:lengthlength//左下角他们的参数都是先y轴然后x轴案例代码（详见教材demo3-5）CSS3圆角边框的属性可以完成很多不同的图形效果前导知识-CSS3圆角边框✎–CSS3的过渡就是平滑的改变一个元素的CSS值，使元素从一个样式逐渐过渡到另一个样式。•CSS3transitions–CSS3过渡使用transition属性来定义，transition属性的基本语法如下所示：transition:propertydurationtiming-functiondelay;要实现这样的效果，必须规定两项内容：（1）规定应用过渡的CSS属性名称。（2）规定效果的