HTML5+CSS3移动Web开发实战 单元3 旅游景点推荐网页设计.pptxVIP

单元?3 旅游景点推荐网页设计;实例探析 任务3-1 探析蚂蜂窝的推荐旅游目的地网页 【效果展示】 蚂蜂窝的推荐旅游目的地网页0301.html的浏览效果如图3-1所示。 蚂蜂窝的推荐旅游目的地网页0301.html从上至下包括4个组成部分，其中，第一部分为链接图片和标题文字，第二部分为搜索文本框，第三部分为选项卡按钮，第四部分为推荐旅游目的地的图片列表。;【网页探析】 1．网页0301.html的HTML代码探析 网页0301.html的HTML代码如表3-1所示。;表3-1　网页0301.html的HTML代码;续表; 网页0301.html主体结构的HTML代码如表3-2所示。该网页主体结构包括4个组成部分，其中，第一部分使用header标签实现，第二部分使用section标签实现，第三分部使用nav标签实现，第四部分使用section标签实现。;表3-2　网页0301.html主体结构的HTML代码;2．网页0301.html的CSS代码探析 网页0301.html通用的CSS代码如表3-3所示。; 网页0301.html主体结构的CSS代码如表3-4所示。; 网页0301.html第一和第二部分的CSS代码如表3-5所示。; 网页0301.html第三部分的CSS代码如表3-6所示。;续表; 网页0301.html第四部分的CSS代码如表3-7所示。;续表;知识梳理 HTML和XHTML最引人注目的特征之一，就是能够在文档的文本中包括图像，既可以把图像作为文档的内在对象（内联图像），也可以将其作为一个可通过超链接下载的单独文档，或者作为文档的背景。合理地在文档内容中加入图像（静态的或者具有动画效果的图标、照片、说明、绘画等），会使文档变得更加生动活泼，更加引人入胜，而且看上去更加专业，更具信息性并易于浏览。还可以将一个图像作为超链接的可视引导图。然而，如果过度使用图像，文档就会变得支离破碎，而且无法阅读，用户在下载和查看该页面时，更会增加很多不必要的等待时间。;1．HTML5中常用的图像标签 （1）img标签 img标签用于向网页中嵌入一幅图像。从技术上讲，img 标签并不会在网页中插入图像，而是为网页链接图像。img标签创建的是被引用的图像的占位空间。img 标签有两个???需的属性：src属性和alt属性。 ;（2）figure标签和figcaption标签 figure标签表示一段独立的流内容（图像、图表、照片、代码等），一般表示文档主体流内容中的一个独立单元。figure元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。使用figcaption元素可以为figure元素组添加标题。;（3）area标签 area 标签用于定义图像映射的区域（图像映射是指图像带有可单击的区域）。 area元素总是嵌套在map标签中，img标签中的usemap属性与map元素的name属性相关联，创建图像与映射之间的联系。img中的usemap属性可引用map中的id或name属性（由浏览器决定），所以我们需要同时向map添加id和name两个属性。;2．CSS的背景设置 （1）CSS背景属性 在CSS3之前，背景图片的尺寸是由图片的实际尺寸决定的。在CSS3中，可以规定背景图片的尺寸。这就允许用户在不同的环境中重复使用背景图片。在CSS3中，可以以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。; background-origin属性用于规定背景图片的定位区域。背景图片可以放置于content-box、padding-box或border-box区域，示意图如图3-2所示。;（2）背景色 CSS允许应用纯色作为背景，可以使用background-color属性为元素设置背景色。这个属性接受任何合法的颜色值。 （3）背景图像 CSS也允许使用背景图像创建相当复杂的效果。要把图像放入背景，需要使用background-image属性。background-image属性的默认值是none，表示背景上没有放置任何图像。;（4）背景重复 如果需要在页面上对背景图像进行平铺，则可以使用background-repeat属性。属性值repeat导致图像在水平、垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x和repeat-y分别导致图像只在水平或垂直方向上重复，no-repeat则