Web前端开发技术项目教程课件 项目三 Web前端页面美化

项目三WEB前端页面美化WEB前端开发技术项目教程目录1认识CSS3Banner区域美化32导航菜单美化品牌旗舰区域美化4CONTENTS商场同款区域美化5购物中心区域美化6闪购区域美化4主题活动区域美化5网页底部区域美化6认识CSS31CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。1.1认识CSS3层叠样式表(英文全称：CascadingStyleSheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS3不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。1.1认识CSS行内式行内式是通过标签的style属性来设置元素的样式。行内式的基本语法格式为：<标签名style="属性1:属性值1;属性2:属性值2;…">内容</标签名>内嵌式内嵌式是将CSS代码集中写在HTML文档的<head>头部标签中，并且用<style>标签定义。内嵌式的基本语法格式为：<style>选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3}</style>链入式链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中。<link>标签将外部样式表文件链接到HTML文档中，其基本语法格式为：<linkhref="CSS文件的路径"type="text/css"rel="stylesheet">1.2选择器要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。HTML页面中的元素就是通过CSS选择器进行控制的。CSS中的选择器的种类非常多，并且在CSS3中也新增了一些选择器，使选择器的功能更强大，具体如下。选择器用法示例说明通用选择器表示选择所有元素**{}选择所有元素标签选择器表示根据标签选择元素元素名称a{}、body{}、p{}根据标签选择元素类选择器表示根据class的值选择元素.<类名>.beam{}根据class的值选择元素id选择器表示根据id的值选择元素#<id值>#logo{}根据id的值选择元素属性选择器表示根据属性选择元素[<条件>][href]{}、[attr="val"]{}根据属性选择元素并集选择器表示同时匹配多个选择器，取多个选择器的并集<选择器>,<选择器>em,strong{}同时匹配多个选择器，取多个选择器的并集后代选择器表示先匹配第2个选择器的元素，并且属于第1个选择器内<选择器><选择器>.asideli{}先匹配第2个选择器的元素，并且属于第1个选择器内子代选择器表示匹配第2个选择器，且为第1个选择器元素的后代<选择器>><选择器>.beam{}匹配第2个选择器，且为第1个选择器的元素的后代兄弟选择器表示匹配紧跟第1个选择器，并匹配第2个选择器内的元素，如紧跟p元素后的a元素<选择器>+<选择器>p+a{}匹配紧跟第1个选择器，并匹配第2个选择器内的元素，如紧跟p元素后的a元素1.3盒子模型所有HTML元素可以看作盒子。盒子模型就是把HTML页面中的元素视为一个矩形区域，即元素的盒子，封装周围的HTML元素，盒子由margin（外边距）、border（边框）、padding（内边距）和content（内容）4部分组成。盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。

盒子由margin（外边距）、border（边框）、padding（内边距）和content（内容）4部分组成，它们都表示简写属性，使用的方法相同。以margin为例在一个声明中设置所有外边距（上、右、下、左），具体如下。margin-top表示设置元素的上外边距。margin-right表示设置元素的右外边距。margin-bottom表示设置元素的下外边距。margin-left表示设置元素的左外边距。1.4浮动与定位在默认情况下，网页中的元素会按照从上到下或从左到右的顺序一一罗列。如果仅仅按照这种默认的方式进行布局，网页将会显得单调、混乱。为了使网页的布局更加丰富、合理，可以在CSS中对元素设置浮动和定位属性。在默认情况下，网页中的元素会按照从上到下或从左到右的顺序一一罗列。如果仅仅按照这种默认的方式进行布局，网页将会显得单调、混乱。为了使网页的布局更加丰富、合理，可以在CSS中对元素设置浮动和定位属性。CSS的浮动可以通过float属性进行设置，float的常用属性值如下。left：元素向左浮动。right：元素向右浮动。none：元素不浮动（默认值）。用于设置定位方式的常用属性值如下。static：静态定位（默认定位方式）。relative：相对定位，相对于其原文档流的位置进行定位。absolute：绝对定位，相当于static定位以外的第一个上级元素进行定位。fixed：固定定位，相对于浏览器窗口进行定位。用于设置元素具体位置的常用属性值如下。top：顶端偏移量，定义元素相对于其参照元素上边线的距离。bottom：底部偏移量，定义元素相对于其参照元素下边线的距离。left：左侧偏移量，定义元素相对于其参照元素左边线的距离。right：右侧偏移量，定义元素相对于其参照元素右边线的距离。1.5CSS3的背景设置属性名属性描述允许取值取值说明background-color设置背景色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之间background-image设置图片背景url(url)直接引用图片地址来设置图片作为对象背景background-repeat设置背景平铺重复方向repeat背景图像在纵向和横向上平铺no-repeat背景图像不平铺repeat-x背景图像在横向上平铺repeat-y背景图像在纵向平铺background-image设置图片背景url(url)直接引用图片地址来设置图片作为对象背景background-repeat设置背景平铺重复方向repeat背景图像在纵向和横向上平铺no-repeat背景图像不平铺repeat-x背景图像在横向上平铺repeat-y背景图像在纵向平铺background-attachment设置或检索背景图像是随对象内容滚动还是固定的scroll背景图像是随对象内容滚动fixed背景图像固定background-position设置或检索对象的背景图像位置，语法为length|length或者position|position35%80%或35%2.5cm或toprightlength：百分数|由浮点数字和单位标识符组成的长度值。position：top|center|bottom|left|center|rightbackground-size规定背景图像的尺寸length第一个值设置宽度，第二个值设置高度。一个值时，第二个值会被设置为"auto"percentage以父元素的百分比来设置背景图像的宽度和高度，用法同上cover背景图完全覆盖背景区域宽和高完全适应内容区域containbackground-position设置或检索对象的背景图像位置，语法为length|length或者position|position35%80%或35%2.5cm或toprightlength：百分数|由浮点数字和单位标识符组成的长度值。position：top|center|bottom|left|center|rightbackground-size规定背景图像的尺寸length第一个值设置宽度，第二个值设置高度。一个值时，第二个值会被设置为"auto"percentage以父元素的百分比来设置背景图像的宽度和高度，用法同上1.6CSS3的阴影和渐变CSS3阴影在CSS3中，阴影分为两种，text-shadow是对象的文本设置阴影，box-shadow是给对象实现图层阴影效果。这里我们先学习box-shadow，它的基本语法格式如下。参数类型取值说明投影方式此参数是一个可选值，如果不设值，其默认的投影方式是外阴影，设置阴影类型为“inset”时，起投影就是内阴影。x轴偏移量即阴影的水平偏移量，其值可以是正负值，如果值为正值，则阴影在对象的右边；反之，如果值为负值，则阴影在对象的左边。y轴偏移量即阴影的垂直偏移量，其值也可以是正负值，如果值为正值，则阴影在对象的底部；反之，如果值为负值，则阴影在对象的顶部。阴影模糊半径此参数为可选，但其值只能为正值，如果值为0,则表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊。阴影扩展半径此参数为可选，其值可以是正负值，如果值为正值，则整个阴影都延展扩大;反之,如果值为负值,则阴影缩小。阴影颜色参数为可选，如果不设定任何颜色，则浏览器会取默认色，但各浏览器的默认颜色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省略此参数。1.6CSS3的阴影和渐变CSS3渐变渐变是两种或多种颜色之间的平滑过渡。CSS3渐变属性主要包括线性渐变、径向渐变和重复渐变。（1）线性渐变线性渐变的基本语法格式：background-image:linear-gradient([<angle>|<side-or-corner>,]colorstop,colorstop[,colorstop]*)线性渐变linear-gradient的参数取值说明：线性渐变linear-gradient参数参数类型取值说明<angle>表示渐变的角度，角度数的取值范围是0~360deg。这个角度是以圆心为起点的角度，并以这个角度为发散方向进行渐变<side-or-corner>描述渐变线的起始点位置。它包含to和两个关键词：第1个指出水平位置leftorright，第2个指出垂直位置toporbottom。关键词的先后顺序无影响，且都是可选的colorstop用于设置颜色边界，color为边界的颜色，stop为该边界的位置，stop的值为像素数值或百分比数值，若为百分比且小于0%或大于100%则表示该边界位于可视区域外。两个colorstop之间的区域为颜色过渡区1.6CSS3的阴影和渐变径向渐变CSS3中的径向渐变通过“background-image:radial-gradient(参数值);”来设置，其基本语法格式如下：径向渐变radial-gradient的参数取值说明：background-image:radial-gradient(圆心坐标,渐变形状,渐变大小,colorstop,colorstop[,colorstop]*)参数类型取值取值说明圆心坐标可设置为x-offsety-offset，如10px20px；或使用预设值center（默认值）用于设置放射的圆形坐标渐变形状circle圆形ellipse椭圆形，默认值渐变大小closest-side或contain以距离圆心最近的边的距离作为渐变半径closest-corner以距离圆心最近的角的距离作为渐变半径farthest-side以距离圆心最远的边的距离作为渐变半径farthest-corner或cove以距离圆心最远的角的距离作为渐变半径1.6CSS3的阴影和渐变重复渐变重复渐变需要添加“repeating-”前缀，具体语法格式如下：/*线性重复渐变*/repeating-linear-gradient(起始角度,colorstop,colorstop[,colorstop]*)

/*径向重复渐变*/repeating-radial-gradient(圆心坐标,渐变形状，渐变大小,colorstop,colorstop[,colorstop]*)

1.7CSS3文本样式属性字体样式属性CSS3提供了丰富的文本样式属性，如字体、颜色、字号、阴影等效果。下面是几种常见的字体样式属性。属性功能允许取值描述font-size字号大小1em、5em等em表示相对于当前对象内文本的字体尺寸5pxpx表示像素，最常用，推荐使用font-family字体"微软雅黑"网页中常用的字体有宋体、微软雅黑、黑体等font-size字号大小1em、5em等em表示相对于当前对象内文本的字体尺寸font-weight字体粗细normal默认值，定义标准的字符bold定义粗体字符bolder定义更粗的字符lighter定义更细的字符100~900（100的整数倍）定义由细到粗的字符，其中400等同于normal，700等同于bold，值越大字体越粗font-style字体风格normal默认值，浏览器会显示标准的字体样式italic浏览器会显示斜体的字体样式oblique浏览器会显示倾斜的字体样式word-wrap长单词或URL自动换行normal只在允许的断字点换行（浏览器保持默认处理）break-word在长单词或URL地址内部进行换行1.7CSS3文本样式属性常用的文本外观属性属性功能允许取值描述color文本颜色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之间letter-spacing字间距normal,0.5em,30px用于定义字符与字符之间的空白，normal为默认值，其属性值可为不同单位的数值，允许使用负值word-spacing单词间距normal,0.5em,30px用于增加或减少单词间的空白（即字间隔）。默认值normal，其属性值可为不同单位的数值，允许使用负值line-height行间距5px,3em,150%用于定义行与行之间的距离，属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素pxtext-transform文本转换none不转换（默认值）capitalize首字母大写uppercase全部字符转换为大写lowercase全部字符转换为小写text-decoration文本装饰none没有装饰（正常文本默认值）underline设置文本下划线overline设置文本上划线line-through设置文本删除线text-align水平对齐方式left左对齐（默认值）right右对齐center居中对齐text-indent首行缩进2em,50px,30%用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值，建议使用em作为设置单位white-space空白符处理normal常规（默认值），文本中的空格、空行无效，满行（到达区域边界）后自动换行pre预格式化，按文档的书写格式保留空格、空行原样显示nowrap合并所有空白符为一个空白符，强制文本不能换行，除非遇到换行标记<br/>。内容超出元素的边界也不换行，若超出浏览器页面则会自动增加滚动条text-overflow标示对象内溢出文本clip修剪溢出文本，不显示省略标记“…”ellipsis用省略标记“…”标示被修剪文本，省略标记插入的位置是最后一个字符。需要结合overflow:hidden;使用1.8CSS3过渡、变形与动画CSS3过渡CSS3过渡过渡其实是一个简单的动画效果，它可以平滑地改变一个元素的CSS值，使元素从一个样式逐渐过渡到另一个样式。在实现CSS3过渡时，必须规定两项内容，应用过渡的CSS属性名称与规定效果的时长。transition属性是一个复合属性，主要包括property、duration、timing-function和delay等子属性。其基本语法格式如下所示：element{transition:propertydurationtiming-functiondelay}1.8CSS3过渡、变形与动画transform属性允许对元素应用2D转换，常见2D转换有倾斜、移动、旋转、缩放等。transform属性的默认值为none，适用于内联元素和块元素r，表示不进行变形。其基本语法格式为：transform：none|transform-functions元素变形原点是元素围绕着这个点进行变形或者旋转，默认的起始位置是元素的中心位置。transform-origin属性的值主要包括x-axis、y-axis、z-axis。transform-origin属性中的x-axis表示x轴偏移量；y-axis表示y轴偏移量；z-axis表示z轴偏移量。其基本语法如下所示。transform-origin:x-axisy-axisz-axis1.8CSS3过渡、变形与动画CSS3可以创建动画，它可以取代许多网页动画图像、Flash动画和JavaScript实现的效果。要创建CSS3动画，你需要了解@keyframes规则。@keyframes规则是创建动画，@keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。@keyframes属性可以设置多个关键帧，每个关键帧表示动画过程中的一个状态，多个关键帧就可以使动画十分绚丽。@keyframes规则中的animationname是当前动画的名称；keyframes-selector是关键帧选择器；css-styles当前关键帧的动画状态。其基本语法格式如下所示。@keyframesanimationname{keyframes-selector{css-styles}}导航菜单美化22.1创建CSS文件夹在购物街网站的目录下建立CSS文件夹，建立一个空的home.css文件，即将放入购物街首页美化设计的CSS代码。2.2导入CSS文件准备好css文件，需要将它们与购物车首页home.html建立联系，即在home.html文件中导入外部的css文件，一般放在头部，示例代码如下。<head> <metacharset="UTF-8"> <title></title> <linkrel="stylesheet"type="text/css"href="css/home.css"/> </head>2.3复合选择器的使用在导航菜单美化中，我们使用到了nav{}，navul{}，navulli{}，navullia{}，navulli:nth-child(1){}，navulli:nth-child(1)a{}，navul.li-spe.posit-1{}，navul.li-spe1{}等多个选择器。其中有通用选择器，类选择器，伪类选择器，以及复合选择器。2.4背景图像定位背景图像定位中我们要明确的几点：1.两个值前面一个是横向的定位，我们称为x轴方向定位。后面一个值是纵向的定位，我们称为y轴方向定位。如果只有一个值，那默认的就是x轴方向，这时y轴方向就默认的是上下居中对齐，也就是center。2.坐标轴的原点就是对应容器的左顶点。3.这个坐标的y轴箭头朝下，也就是右下方（容器内部）xy的值才都为正。4.xy值分别表示背景图片的左顶点相对于坐标原点（也就是容器的左顶点）的值。5.xy的值可以用百分比或者px来表示。6.xy也可以用“left、right、top、bottom、center”这五个对齐方式来表示，但注意：用“left、right、top、bottom、center”来表示的时候，应用的是对齐规则，而不是坐标规则。x为left是表示图片的左边和容器的左边对齐，为right的时候表示图片的右边和容器的右边对其，y为top的时候表示图片的顶部和容器的顶部对齐，为bottom时表示图片的底部和容器的底部对齐，xy等于center的时候表示居中对齐。7.xy用百分比或者px表示的时候，其值可以为负数。我们应用坐标规则就很容易理解负数表示的意义，x为负数时候表示图片左顶点在容器左顶点的左侧，y为负数时表示图片的左顶点在容器的左定点的上方。也就是向左和向上超出容器的范围。Banner区域美化33.1display属性display:none和visible:hidden都能把网页上某个元素隐藏起来。但两者有区别:display:none——不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。visible:hidden——使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。visibility:hidden——将元素隐藏，但是在网页中该占的位置还是占着。display:none----将元素的显示设为无，即在网页中不占任何的位置。3.2border-radius属性在CSS3以前，如果要制作圆角边框效果，首先在元素标签中加上4个空标签，然后在每个空标签中应用一个圆角的背景，接着对这几个应用了圆角的标签进行相应的定位，这个过程十分麻烦。CSS3中新增了border-radius

属性可以非常方便地实现圆角边框效果。除此之外，CSS3中新增了background-*属性和box-shadow属性分别设置背景和阴影效果。CSS3的圆角边框实际上是在矩形的4个角分别做内切圆，然后通过设置内切圆的半径来控制圆角的弧度。border-radius基本语法格式如下。border-radius:1~4length|%/1~4length|%3.2border-radius属性length用于设置对象的圆角半径长度，不可为负值，%表示可以写成百分比。order-radius属性的4个值是按照top-left、top-right、bottom-right和bottom-left的顺序来设置的，具体如下：如果省略top-right，则其与top-left相同，其参数都是先y轴然后x轴。如果省略bottom-left，则其与top-right相同。如果省略bottom-right，则与top-left相同。其基本语法格式为：border-top-left-radius: //左上角border-top-right-radius:<length><length> //右上角border-bottom-right-radius:<length><length>//右下角border-bottom-left-radius:<length>

<length>//左下角品牌旗舰区域美化44.1导航菜单制作【任务目标】完成品牌旗舰区域美化。【任务分析】我们要做出来的效果，是第一块区域为<ul>,类名为"content-1",如图3-13所示。<ul>下每个<li>显示一张广告图片<img>和一个<div>,<div>是显示在<img>图片之上，<div>包含一个<img>和两个<span>标签，<img>显示品牌Logo图片4.1cursor属性cursor属性规定要显示的光标的类型（形状）。该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状停止。值描述url需使用的自定义光标的URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由URL定义的可用光标。default默认光标（通常是一个箭头）auto默认。浏览器设置的光标。crosshair光标呈现为十字线。pointer光标呈现为指示链接的指针（一只手）move此光标指示某对象可被移动。e-resize此光标指示矩形框的边缘可被向右（东）移动。ne-resize此光标指示矩形框的边缘可被向上及向右移动（北/东）。nw-resize此光标指示矩形框的边缘可被向上及向左移动（北/西）。n-resize此光标指示矩形框的边缘可被向上（北）移动。se-resize此光标指示矩形框的边缘可被向下及向右移动（南/东）。sw-resize此光标指示矩形框的边缘可被向下及向左移动（南/西）。s-resize此光标指示矩形框的边缘可被向下移动（南）。w-resize此光标指示矩形框的边缘可被向左移动（西）。text此光标指示文本。wait此光标指示程序正忙（通常是一只表或沙漏）。help此光标指示可用的帮助（通常是一个问号或一个气球）。4.2justify-content属性justify-content用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。值描述flex-start默认值。项目位于容器的开头。flex-end项目位于容器的结尾。center项目位于容器的中心。space-between项目位于各行之间留有空白的容器内。space-around项目位于各行之前、之间、之后都留有空白的容器内。initial设置该属性为它的默认值。inherit从父元素继承该属性。商场同款区域美化55.1任务分析首先明确HTML文件中商场同款区域标签节点的层次结构及含义，如图所示。5.1任务分析商城同款内容区<div>，类名为"sale"，包含商场同款导航区域<ul>，类名为"sale-nav"和同款内容展示区<div>，类名为"sale-content"，导航"sale-nav"下包含3个菜单项<li>，同款内容展示区"sale-content"下包含3个具体同款内容展示区<div>，类名为"content1"5.2任务实现使用CSS设置网页样式，美化商场同款区域页面，从效果实现上大致分为了四个步骤。以上为第一步，首先将商场同款区域整体设置为宽高样式，对应本区域所使用的HTML标签，使用.sale选择器选择并设置；然后选择nav标签设置导航栏，可以看到，导航栏有三项，但样式相同，因此我们在这里设置了同样的样式。第二步，设置商品同款区分区与左侧样式。通过导航栏可以看到，商品同款区域通过鼠标放置到导航栏的“热卖品牌”、“新品推荐”、“明星同款”三个标签对此区域内容进行切换。在HTML源码中，此区域的主体类名为“content1”，因此我们在设置不同样式时，用到了伪类选择器.content1:nth-child(2)、.content1:nth-child(3)对“新品推荐”和“明星同款”后两个标签内容进行样式设置。此外，需要注意的是本部分代码中.content-img以及.content-img-spe等未使用伪类选择器所设置的样式均同时设置到了三个标签下的内容。第三步，设置区域右侧上部样式。经过前两步的编写，我们可以发现，整体content区域大致可以分为三个部分，左侧图片部分、右侧上部、右侧下部。左侧图片部分对于三个导航标签而言是相同的，上述部分代码编写了右侧上部的样式，这里我们用到的选择器是.contant-top，当然，在其之前的父元素选择器也是不可省略的。第四步，也是本部分的最后一步，设置右侧下部样式。右侧下部的样式我们用到了.contant-bottom选择器，在这里我们需要注意到的是在content1的样式编写中，右侧上部和右侧下部在“明星同款”标签下，与前两个标签的布局明显不同，如图3-26所示，因此，我们在第三步和第四步均单独设置了.contant-topli:nth-child(3)、.contant-bottomli:nth-child(3)即第三个标签“明星同款”的样式。购物中心区域美化66.1任务分析1.首先明确HTML文件中商场同款区域标签节点的层次结构及含义。2.商城同款内容区<div>，类名为"shopping"，包含商场同款导航区域<ul>，类名为"shopping-nav"和同款内容展示区<div>，类名为"shopping-content"，导航"shopping-nav"下包含5个菜单项<li>，购物中心内容展示区"shopping-content"下包含5个具体同款内容展示区<div>，类名为"content1"。6.2任务分析第一步购物中心区域美化效果的实现主要分为了四个部分。首先，第一部分，我们对购物中心导航区域整体.shopping-content进行了宽、高以及定位的设置。并且对购物中心区域导航部分.shopping-nav的五个标签进行了样式的设置。第二步第二步，我们对购物中心的主体区域进行了宽、高的设定，并且通过伪类选择器分别选择了其它四个标签下的主体.shopping区域并通过display属性设置了其行内框的样式为none，即此元素不会被显示。第三步第三步，设置.shopping-content1区域样式。作为.shopping区域的子元素，.shopping-content1是购物中心区域的最左侧部分如图3-28所示。在此部分中，共有三个小部分，它们分别是：.content1-list选择器所选择的商品类型部分，处于content1的最上方；.img-list所选择的位于商品类型部分下方的品牌图片区域；.ran选择器所选择的位于content1最下方的轮播区域。由于三部分中均有多个元素，因此我们用无序列表ul对其进行表示，并用li设置列表中元素的样式。位于本部分最后位置的选择器.shopping.shopping-img所选择的是.shopping-content1右侧图片的样式。第四步第四步，设置购物中心区域右侧商品展示区域。选择器.shopping-content2所选择和定位到的是如图3-29所示购物中心区域最右侧商品展示区域样式。该区域由四张图片排列而成，在这里编写和设置了该部分及其图片的宽、高、边框样式、浮动方式、外边距等。闪购区域美化76.1任务分析1.首先明确HTML文件中闪购区域标签节点的层次结构及含义。2.商城同款内容区<div>，类名为"flash"，闪购区域和之前的区域最大的区别是，他没有导航菜单<nav>以及<ul>，具有内容展示区<div>，类名为"flash-text"。6.2任务分析第一步首先，我们将闪购区域整体的宽、高在CSS中确定下来。在这里我们不难发现，出于对知识综合应用的考量，导航栏在“商场同款”与“购物中心”区域均进行了联系，闪购区域区别与上述两区域，取消了导航栏，因此我们就不需要对导航栏进行样式的编写。第二步第二步，对闪购区域左上方.flash-1区域进行样式设置。对该区域进行解构发现，该区域分为6部分。第三步第三步，设置中间图片及右侧部分样式。.flash-img2选择器选择定位了闪购区域上半部分中间图片并设置了其样式。.flash-img选择器表示了闪购区域上半部分最右侧的图片区域，值得注意的是，在此部分，我们设置了.img1-text的JS行为，即鼠标移动到图片时弹出文字，在这里我们只讨论其CSS样式的设置。.img1-text设置了文字的样式，.img1:nth-child(1)和.img1:nth-child(2)分别作为上方图片和下方图片的选择器。因文字本身具有链接功能，因此在本部分出现了.img1-texta，其中“a”代表了文字链接的样式。第四步最后，我们对如闪购区域最下方图片轮播区.flash-banner进行样式的编写。主题活动区域美化86.1任务分析1.首先明确HTML文件中主题活动区域标签节