项目一HTML5+CSS3网页布局与美化主讲：陈倩htmlh5imgjavascriptwebcsscolorhr任务三古迹页面制作
目录任务情境任务目标任务描述任务实施学习资源考核评价课后拓展1+X考证练习htmlh5imgjavascriptwebcolorhr
任务情境民族民俗风情是广西悠久历史文化的重要组成部分，它神秘的风采和诱人的魅力吸引了越来越多的旅游者。近年来，广西已逐步发展出具有当地特色的旅游精品路线，包括南国边关揽胜游、壮乡文化风情游、瑶苗侗乡采风游、千年灵渠寻古游、宁明花山崖画探奇游、百色小平足迹游等等。这些民俗旅游专线项目都取得了较好的经济效益和社会效益。本次专题任务是制作广西少数民族文化资源网中二级页“古迹”网页，使我们充分认识广西自身民俗资源，促进广西旅游业的快速发展。
工作任务单工作任务单任务要求根据效果图完成古迹页面的制作甲方提供的设计图如右图所示评判标准1.能够进行正确的页面布局分析2.能够进行正确的切图3.网站文件命名正确4.代码编写符合标准5.样式编写正确，能够达到参考效果1+X技能考核标准能正确选择HTML标签和CSS样式完成页面制作技能大赛考核要求制作的页面需具有交互设计，并符合W3C的HTML和CSS标准作品提交要求站点文件夹评判标准1.能够进行正确的页面布局分析2.能够进行正确的切图3.网站文件命名正确4.代码编写符合标准5.样式编写正确，能够达到参考效果
任务目标任务目标能够利用浮动布局方法对页面进行布局能正确掌握背景图片样式的设置能正确选择html标签和CSS样式完成页面制作能够提高沟通协作能力，增强工匠精神和专业素质
任务描述网页布局是网页制作过程中非常重要的技术环节,也是网页制作过程中难度较大的一个部分。如何正确合理地进行网页布局，无论是对于网页内容的合理呈现还是对于提升网页整体的美观程度都是非常重要的。浮动布局作为当下网页制作中重要的一种布局技术，在实际应用中被广泛采纳。本任务，我们将通过制作广西少数民族文化资源网中古迹网页对浮动布局的原理及应用方法进行更为深入的学习和巩固。
任务实施图1结构布局分图古迹页面分为页面头部、页面主体和页面尾部三大部分。其中，页面头部和页面尾部与任务二节日页面相似，页面主体包含新闻聚焦和古迹简介两个栏目，新闻聚焦栏目主要通过列表的形式展示与名胜古迹相关的新闻，古迹简介栏目用于展示名胜古迹信息。布局结构分析页面切图HTML布局+css美化
任务实施图2页面切图切片效果布局结构分析页面切图HTML布局+css美化
创建页面、链接样式创建页面主体结构和样式美化创建页面头部制作新闻聚焦栏目步骤一步骤二步骤三步骤四构建HTML标准流布局+CSS页面美化操作步骤制作古迹简介栏目步骤五制作页面尾部步骤六任务实施布局结构分析页面切图HTML布局+css美化
学习资源CSS3过渡效果transform变形属性常见transform变形属性（2D转换）值描述none定义不进行转换。rotate(angle)定义元素在二维空间的旋转，在参数中规定角度。scale(x,y)定义元素在二维空间的缩放和翻转。translate(x,y)定义元素在二维空间的偏移。transform属性，可用于元素的变形，可实现元素的旋转、缩放、移动、倾斜等变形效果。语法如下:transform:none|transform-functions;其中，none:默认值，不设置元素变形;transform-functions:设置一个或多个变形函数。变形函数主要包括旋转rotate()、缩放scale()、移动translate()等，设置多个变形函数时，用空格间隔。
学习资源CSS3过渡效果transform变形属性元素的旋转，rotate()函数语法如下:rotate(angle)其中，angle表示旋转的角度，为带有角度单位标识符的数值，角度单位是deg。值为正时,表示顺时针旋转；值为负时，表示逆时针旋转。设置当鼠标放到无序列表项目上时的CSS样式。顺时针旋转30度，背景颜色为橙色，文字颜色为白色。代码如下:li:hover{transform:rotate(30deg);background-color:orange;color:white;}当把鼠标放到导航栏项目上时，栏目会旋转一定的角度，网页效果如图所示：
学习资源CSS3过渡效果transform变形属性元素的缩放和翻转，scale()函数语法如下:scale(x,y)其中，x:表示元素在水平方向上的缩放倍数。y:表示元素在垂直方向上的缩放倍数。x、y的值可以为整数、负数、小数。当取值的绝对值大于1时,表示放大;绝对值小于1时，表示缩小。当取值为负数时，元素会被翻