mk体育,mk体育官网,MK体育APP,MK体育注册网站

　　旅游网站的景点推荐网页通常会运用大量图片，使网页变得更加生动活泼，更加引人入胜。本单元通过对旅游网站的旅游目的地推荐网页和景点推荐网页设计的探析与训练，重点学习HTML5中的图像标签、CSS的背景设置、图像透明度设置等，学会在网页中合理地插入图像，学会恰当应用图片设计景点推荐网页。

　　【效果展示】蚂蜂窝的推荐旅游目的地网页0301.html的浏览效果如图3-1所示。

　　蚂蜂窝的推荐旅游目的地网页0301.html从上至下包括4个组成部分，分别为链接图片和标题文字、搜索文本框、选项卡按钮、推荐旅游目的地的图片列表。

　　网页0301.html第一和第二组成部分的CSS代码定义如表3-5所示。

　　HTML和XHTML最引人注目的特征之一，就是能够在文档的文本中包括图像，既可以把图像作为文档的内在对象（内联图像），也可以将其作为一个可通过超链接下载的单独文档，或者作为文档的背景。合理地在文档内容中加入图像（静态的或者具有动画效果的图标、照片、说明、绘画等）时，会使文档变得更加生动活泼，更加引人入胜，而且看上去更加专业，更具信息性并易于浏览。还可以专门使一个图像成为超链接的可视引导图。然而，如果过度使用图像，文档就会变得支离破碎，而且无法阅读，用户在下载和查看该页面时，更会增加很多不必要的等待时间。

　　 img标签用于向网页中嵌入一幅图像。从技术上讲， img 标签并不会在网页中插入图像，而是从网页上链接图像。 img标签创建的是被引用图像的占位空间。 img 标签有两个必需的属性：src属性和alt属性。

　　 figure标签表示一段独立的流内容（图像、图表、照片、代码等），一般表示文档主体流内容中的一个独立单元， figure元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。使用 figcaption元素可以为 figure元素组添加标题。向文档中插入带有标题图像的示例代码如下：

　　 area 标签定义图像映射中的区域（图像映射是指带有可单击区域的图像）。

　　在CSS3之前，背景图片的尺寸是由图片的实际尺寸决定的。在CSS3中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。可以以像素或百分比规定尺寸，如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。

　　CSS允许应用纯色作为背景，可以使用background-color属性为元素设置背景色，这个属性接受任何合法的颜色值。以下这条规则把元素的背景设置为灰色：

　　可以为所有元素设置背景色，这包括一直到 em和 a等行内元素。background-color不能继承，其默认值是transparent。transparent有“透明”之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。

　　CSS也允许使用背景图像创建相当复杂的效果，要把图像放入背景，需要使用background-image属性，background-image属性的默认值是none，表示背景上没有放置任何图像。如果需要设置一个背景图像，必须为这个属性设置一个URL值，示例代码如下：

　　大多数背景都应用到 body元素，不过并不仅限于此。下面的示例代码为一个段落应用了一个背景，而不会对文档的其他部分应用背景：

　　甚至可以为行内元素设置背景图像，下面的示例代码为一个链接设置了背景图像：

　　background-image也不能继承，事实上，所有背景属性都不能继承。

　　如果需要在页面上对背景图像进行平铺，可以使用background-repeat属性。属性值repeat导致图像在水平、垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x和repeat-y分别导致图像只在水平或垂直方向上重复，no-repeat则不允许图像在任何方向上平铺。默认地，背景图像将从一个元素的左上角开始，请看下面的示例代码：

　　为background-position属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right和center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如100px或5cm，最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。

　　图像放置关键字最容易理解，其作用如其名称所表明的。例如，top right使图像放置在元素内边距区的右上角。根据规范，位置关键字可以按任何顺序出现，只要保证不超过两个关键字（一个对应水平方向，另一个对应垂直方向）。如果只出现一个关键字，则认为另一个关键字是center。所以，如果希望每个段落的中部上方出现一个图像，只需声明如下所示的代码：

　　百分数值的表现方式更为复杂。假设希望用百分数值将图像在其元素中居中，这很容易，示例代码如下：

　　这会导致图像适当放置，其中心与其元素的中心对齐。换句话说，百分数值同时应用于元素和图像。也就是说，图像中描述为50% 50%的点（中心点）与元素中描述为50% 50%的点（中心点）对齐。如果图像位于0% 0%，其左上角将放在元素内边距区的左上角。如果图像位置是100% 100%，会使图像的右下角放在右边距的右下角。

　　因此，如果想把一个图像放在水平方向2/3、垂直方向1/3处，其代码如下：

　　如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为50%。这一点与关键字类似。background-position的默认值是0% 0%，在功能上相当于top left。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺，除非设置了不同的位置值。

　　长度值解释的是元素内边距区左上角的偏移，偏移点是图像的左上角。例如，如果设置值为50px 100px，图像的左上角将在元素内边距区左上角向右50px、向下100px的位置上，对应的代码如下所示：

　　注意，这一点与百分数值不同，因为偏移只是从一个左上角到另一个左上角。也就是说，图像的左上角与background-position声明中指定的点对齐。

　　如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动，当文档滚动到超过图像的位置时，图像就会消失。可以通过background-attachment属性防止这种滚动，通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响，对应的代码如下：

　　background-attachment属性的默认值是scroll，也就是说，在默认的情况下，背景会随文档滚动。

　　通过CSS创建透明图像是很容易的，定义透明效果的CSS3属性是opacity。CSS的opacity属性是W3C CSS推荐标准的一部分。

　　将鼠标指针移动到图片上时，会改变图片的透明度，实现图像透明度的Hover效果。

　　在这个实例中，当指针移动到图像上时，我们希望图像是不透明的，对应的CSS是opacity=1，IE8及更早的浏览器：filter:alpha(opacity=100)。当鼠标指针移出图像后，图像会再次透明。

　　编写HTML代码和CSS代码，设计图3-3所示去哪儿旅行网的Touch版旅图网页0302.html。

　　去哪儿旅行网的Touch版旅图网页0302.html的主体结构为上、中、下结构，如图3-3所示。顶部内容包括主页链接按钮、标题文字、Logo图片和下载链接按钮等多个超链接，中部内容包括多行旅行图片，底部内容包括多个导航超链接和版权信息。

　　在本地硬盘的文件夹“03旅游景点推荐网页设计\0302”中创建网页0302.html。

　　编写HTML代码和CSS代码，设计图3-4所示携程旅行网的最佳旅游景区网页0303.html。

　　携程旅行网的最佳旅游景区网页0303.html的主体结构为上、下结构，如图3-4所示。顶部内容为标题图片，底部内容为最佳旅游景区的图片和景区简介。

　　在本地硬盘的文件夹“03旅游景点推荐网页设计\0303”中创建网页0303.html。

　　编写HTML代码和CSS代码，设计图3-5所示路趣网手机版的热点景点推荐网页0304.html。

　　网页0304.html通用CSS代码定义见本书提供的电子资源，主体结构的CSS代码如表3-23所示。

　　本单元通过对旅游网站的旅游目的地推荐网页和景点推荐网页设计的探析与三步训练，重点熟悉了HTML5中的图像标签、CSS的背景设置、图像透明度设置等，学会了在网页中合理地插入图像，学会了恰当应用图片设计景点推荐网页的方法。

　　本文仅用于学习和交流目的，不代表人邮教育社区观点。非商业转载请注明作译者、出处，并保留本文的原始链接。

　　本书中通过基础加案例的方式向同学们介绍了Photoshop在手机UI领域中的应用。全书中从UI的基础讲起，针对...

　　本书内容分为设计篇和开发篇，以企业全真项目和经典案例为载体，内容覆盖Photoshop在智能手机应用图标设计、...

　　本书通过精心设计的7个工作项目，全程贯彻“做中学”理念，先实践认知，后理论拓展，由浅入深，让读者逐步掌握A...

　　从跨平台的移动Web开发实际应用的角度理解HTML5和CSS3的新元素和新功能，合理选取教学内容。本书设置了8...

　　本书内容主要包括7 部分，第1 部分讲解搭建Android 开发环境的方法，第2 部分讲解在Android...

　　本书以真实购物网站为项目原型，以购物网站为载体，将购物网站的功能模块合理划分为8个教学单元：导航栏和信息提示设...