第10章旅游网站框架网页设计()
网页设计-框架(详解)
11.3 嵌入式框架Iframe
• 嵌入式框架（标签为<iframe>）也是框架的一种形式。它与普通框 架的区别在于，它可以嵌入在网页中的任意部分，比如可以在表格 中插入嵌入式框架。正是由于这一特点，使得嵌入式框架使用广泛。 本节将结合具体实例，学习如何创建嵌入式框架，以及设置嵌入式 框架的属性。
框架
• 框架是网页中常使用的效果。使用框架，可以在同一浏览窗口中显 示多个不同的文件。最Байду номын сангаас见的用法是将窗口的左侧或上侧的区域设 置为目录区，用于显示文件的目录或导航条。而将右边一块面积较 大的区域设置为页面的主体区域。通过在文件目录和文件内容之间 建立的超级链接，用户单击目录区中的文件目录，文件内容将在主 体区域内显示，用这种方法便于用户继续浏览其他的网页文件。
• 应用嵌入式框架的网页效果如图11.27所示，单击左边的导航文字， 右边的内容会发生改变，这实际上是由两个页面组成。下面就以该 网页为例来学习嵌入式框架的使用。具体操作步骤如下：
11.4 框架布局实例
• 框架结构是网络课程中经常用到的布局方式。本节就来介绍框架结 构网络课程的页面布局。完成后的网页效果如图11.38所示。
• 本章将介绍关于框架的基本知识，并结合具体实例讲解在 Dreamweaver CS3中如何创建、使用框架，设置框架属性，利用框架 进行布局。
11.1 关于框架
• 下面的实例显示了一个使用框架的网页，如图11.1所示。这是由三 个框架组成的框架布局，一个框架横放在顶部，其中包含 Web 站点 的Logo和一些常用按钮；左侧较窄的框架包含导航条；右侧的框架 占据了页面的大部分，其中包含主要内容。这些框架中的每一个都 显示单独的 HTML 文档。
旅游网站设计
Web网页设计报告2012 年 12 月01 日目录一引言 (2)1.1网站建设概述 (2)1.2规划思路 (3)二网站总体分析与设计 (3)2.1系统的功能结构 (3)2.2 系统的功能特点 (4)2.3 页面设计 (4)三各个功能模块的实现 (4)3.1 信息记录 (4)3.2 信息浏览功能 (5)3.3具体实现 (6)四总结 (8)一引言新的世纪，互联网进入一个崭新的阶段，信息化的发展带动其它产业的发展，各行业都将与它进行更深入的融合和渗透。
，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。
为了适应知识经济社会的需要，促进学习与交流。
网上交流和协作的功能比较普遍；技术管理和资源管理受到重视。
随着互联网的普及和发展，必将有越来越多的企业及个人在英特网上拥有自己的网站。
网站建设成为企业形象宣传、产品展示推广、客户沟通的最新最快捷的桥梁；成为个人展示自我，与世界交流的重要平台。
越来越多的人已开始从对互联网的认知阶段进入到认同和行动阶段。
Internet上发布信息主要是通过网站来实现的，获取信息也是要在Internet“海洋”中按照一定的检索方式将所需要的信息从网站上下载下来。
因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。
为了更好的协作，更多的与外界交流新的信息，和他人共享信息，特构建旅游网站。
1.1网站建设概述此次设计的项目是构建一个九寨沟旅游网站，有个人信息记录系统,网站主要实现旅游信息查询系统部分,使访问者可查询旅游有关的信息。
1.2规划思路网站的基本风格是简洁明快的界面、实用的旅游讯息和个性化的社区。
网页设计的构思是：(1)主页上有标志物，能让浏览者一眼就知道是主页。
(2)用到CSS模板制作网页，这样子的网页比较有一致性。
(3) 各个页面上都有漂浮物，运用JavaScript实现动态效果。
旅游网站策划方案
旅游网站策划方案一、客户需求分析：互联网正在慢慢地改变生活，这已经不仅仅是概念的演绎，在生活工作的各个方面，都留下了互联网的印记。
旅游业也不例外，据统计，网上旅游业销售额已经占到全球电子商务销售额的20%以上。
随着假日旅游、自助旅游、各种主题旅游的兴起，旅游网站也焕发着春天般的气息，一个好的网站对旅游资源的宣传和游客出行计划都有着积极的意义，让游客们有备而来、尽兴而归。
通过网站开展相关旅游资源的电子商务整合和旅游资源的管理都将会是旅游业不可回避的现实。
二、网站功能和内容：1、网站功能：前台实现功能（1）新用户注册（2）密码修改功能（3）分类信息搜索后台实现功能（1）用户注册信息管理（2）分类信息管理1）旅游企业的旅游产品能够通过互联网得到广泛的、全面的宣传，让尽可能多的旅游企业、旅游者了解和熟知旅游企业的产品以及产品特色，旅游企业服务。
2）能够通过互联网寻到新的合作伙伴，拓宽市场销售渠道。
3）能够通过网站和客户之间达成直接交流，收集客户意见。
4）能够为企业的旅游产品提供直接销售的空间，旅游企业通过互联网宣传企业产品的过程中能够直接接收到网上的游客订单。
5）能够关心旅游企业在具体业务过程中提供便利、快捷、实惠的信息；互联网能够充分体现网络优势，关心企业实现散客网上成团，即使散客不成团企业需要独立操作时。
2.栏目架构三、系统功能：本公司开发人员拥有丰富的大型网站开发经验，在网站建设方面拥有丰厚的底蕴和积累，在旅游综合信息建设、旅游电子商务预订、旅游B2B电子商务平台建设方面均有自己独特完整的解决方案。
该系统主要包括：新闻发布系统、旅游线路发布及预订系统、游客出游意向询价系统、在线散客拼团系统、电子杂志订阅分发系统、电子邮件营销系统、在线市场调查系统、统计系统、动态栏目更新、专业旅游论坛系统、后台管理及权限分配等。
系统采用Browse/Server模式，既用户端采用浏览器方式。
下面简单介绍各子系统功能：1、新闻发布系统多栏目：可依据需要建立数个新闻栏目。
旅游网站设计正文
旅游网站设计与建立——鑫鑫旅行网系别：专业：年级：姓名：指导教师：摘要本文就旅游网站的设计与建立，以软件工程的方法对全过程进行了分析与研究，本文的主要工作集中在：1.对WEB页进行概述，主要是对旅游网站的历史和发展作了回顾，并对WEB 页的定义和特性进行阐述，并对网站设计过程中使用的工具和技术简单的介绍.2.对网站建设中提及的术语进行简单解释，并对网站的由来和发展进行讨论。
3.对自己设计的网站从设计理念到制作的过程进行详细分析.4.使用Dreamweaver+Flash+photoshop 等软件的设计方式进行解析。
5.就网站的设计与制作提出自己的观点以及建议。
关键词：网站；设计工具；设计方案；创意；风格引言随着Internet的蓬勃发展，人类已经意识到了网络的巨大用途。
网络的实时性、无区域性成为吸引全世界人类的巨大诱惑力。
如今Internet国际互联网已在我国普及，越来越多的社会团体、企事业单位，在互联网上建立自己的网站。
社会的发展和科学的进步，上网成为越来越多人们的选择。
随着国民经济的发展,旅游业也迅速的发展起来,它增进了中国人民同世界各国人民交往的友谊,而且促进了中国的对外开放,开辟了新的就业门路,对于提高民族素质等都有积极作用。
因此我们应大力发展旅游行业,更应该利用网络这个传播工具来扩展它的影响力和传播速度及范围,来共享资源。
网络发展前景无限，及早与网络结合，与信息时代同步，与高科技汇合，定会给社会各行各业的发展注入新鲜的活力。
站在网络时代的前夜，我们清晰地听到了网络时代的宣言：谁掌握了网络，谁就掌握了未来。
第1章绪论1.1系统开发背景目前，随着科技的发展，时代的进步。
传统的地图与广告已经远远不能满足人们的信息需求，在当今这个年代，人们更愿意的是从网络获得信息，快速而庞大的信息量是其他途径所不能媲美的，而现代旅游网站的产生必定能给人们带来无限的便捷，它是现代旅游人士所迫切需求的。
自互联网Internet成为一种革命性的大众媒体以来，其发展速度之快令人惊叹。
web旅游网站课程设计
web旅游网站课程设计一、课程目标知识目标：1. 学生能理解并掌握Web旅游网站的基本结构及其功能模块。
2. 学生能掌握HTML、CSS等网页设计基础知识，并运用到旅游网站的制作中。
3. 学生了解旅游网站设计中的用户体验和界面设计原则。
技能目标：1. 学生能够独立进行旅游网站的需求分析，编写网站设计方案。
2. 学生能够运用网页设计工具，完成旅游网站静态页面的设计与制作。
3. 学生能够运用适当的编程语言实现旅游网站的动态功能，如搜索、预订等。
情感态度价值观目标：1. 学生培养对旅游网站设计工作的兴趣和热情，增强对网络信息技术的认识和应用。
2. 学生在团队协作中学会沟通、分享和合作，培养良好的团队精神。
3. 学生通过学习旅游网站设计，提高对国家旅游资源的关注和保护意识。
课程性质：本课程为信息技术课程，结合了网页设计、编程和旅游相关知识，注重实践性和应用性。
学生特点：学生为八年级学生，具备一定的信息技术基础，对网络应用有较高的兴趣，喜欢探索新事物。
教学要求：课程要求学生在掌握基本理论知识的基础上，注重实践操作，通过团队协作完成一个具有实际应用价值的Web旅游网站项目。
教师需关注学生的学习进度，提供个性化指导，确保学生达到预期学习成果。
二、教学内容1. 网页设计基础知识：HTML、CSS基本语法，网页结构及布局。
- 教材章节：第一章 网页设计与制作基础- 内容列举：HTML标签、属性，CSS选择器、盒模型，响应式布局。
2. 旅游网站结构及功能模块分析：网站导航、景点介绍、在线预订、用户评论等模块。
- 教材章节：第二章 网站结构及功能模块- 内容列举：旅游网站常见功能模块及其实现方法，用户体验设计原则。
3. 网页设计工具使用：如Dreamweaver、Photoshop等。
- 教材章节：第三章 网页设计工具- 内容列举：工具的基本操作、快捷键，简单网页效果制作。
4. 网站编程基础：JavaScript、PHP等编程语言实现网站动态功能。
旅游网站的网页设计网页设计,旅游网站
旅游网站的网页设计网页设计,旅游网站华东交通大学理工学院课程设计报告书所属课程名称网页设计与制作课程设计题目网站首页分院电信分院专业班级学号学生姓名指导教师程志平xx年 1月 4日目录第一章绪论 ........................................................ .. 11、网站设计的目 . (1)2、网站的主题 (1)3、网站规划 (1)第二章网页整体设计 (2)1、创建HTML (2)2、创建CSS 文件 (2)第三章网页详细设计 (3)1、头部的和导航栏设计 . (3)2、布局页面——左边栏 . (4)3、布局页面——中间 . (6)4、布局页面——右边 . (8)5、布局页面——下部 . (11)第四章课程设计心得 (13)1、充分发挥动手能力 . (13)2、在设计过程中不断提高网页设计水平 (13)3、不足之处 (13)第五章__ (14)第一章绪论1、网站设计的目本学期通过对《网页设计与制作》的学习，让我了解到了如何让设计网页，以及一些基础的网页设计的知识和对Dreamweaver 软件的基础应用，学习到了运用一些基本的网页设计工具和原则来制作和美观网页。
比如PS ，背景图片，文字，超链接，布局，框架，多媒体等等。
通过这次设计，进一步的提高了我的网站设计能力和动手能力，更加全面的巩固了我在课堂上学到的知识，掌握了网站设计的一些方法和步骤，了解了网站的基本结构，熟悉了规范和标准。
2、网站的主题主题：某企业网站首页3、网站规划我设计网页的布局，整体上我借鉴了一些公企业网站，我才用了其中的一些布局，分块。
而我主要采用了布局模式，div+css来设计，背景图片，然后再插入超链接，图片等等，这样就形成了整个网页的布局设第二章网页整体设计1、创建HTML首先打开DW 软件建立一个站点，我取名为未命名站点2，如下图2-1图2-1将网站建好后把网页源代码，css 文件，图片等放在相应的目录下。
旅游网站的设计和实现毕业论文
三、阅读的主要参考文献
[1]涛，2003：《电子商务建设与管理》东北财经大学
[10] 侯炳辉,世峰.信息管理系统[J]信息管理系统分析，2004.5:254-562
[11] 学明.饭店客房管理[M] 旅游2000.10.1.6
4．毕业设计(论文)应完成的主要任务
（1）查阅文献，提出研究方案，2014年11月1日前完成开题报告。
（2）2014年12月1日前完成系统需求分析、系统设计等。
结论39
参考文献41
附录42
系统部分代码清单42
任务书
系专业班级
学生指导教师/职称
1．毕业设计(论文)题目：《旅游的设计与实现》
2．毕业设计(论文)起止时间：2014年9月1日～2015年6月1日
3．毕业设计(论文)所需资料及原始数据（指导教师选定部分）
[1] 方睿，ቤተ መጻሕፍቲ ባይዱ四九.网络数据库原理及应用[M].:大学，2005
[12]王勇,2009:《ASP动态设计完整实例详解》电子工业
四、国外现状和发展趋势
在我国，伴随着经济体制改革，旅游业在近二十多年的发展中取得了巨大的成绩，为经济发展和改善人民生活发挥了巨大作用。我国旅游起步于20世纪80年代，尽管起步晚，但发展较快。改革开放前，旅游业以外事接待为主，没有形成产业模式，境旅游多以疗养、公派为主，而国外更是对中国旅游一无所知。1988年中央提出国家、地方部门、集体、个人一齐上，自力更生与利用外资一齐上的旅游建设方针，揭开了旅游产业发展的序幕。1986年国务院正式确立旅游业的国民经济地位。1992年中央明确提出旅游业是第三产业新兴序列的第一位。1998年中央经济工作会议提出旅游业作为经济新的增长点。此后，国家把旅游列入国债项目，并及时开行了数百列旅游专列。中央的支持为旅游业打下坚实基础。因此，在“八五”计划时期，我国旅游业开始进入发展高潮，可以称此阶段为我国旅游“第一个春天”；此后我国旅游业一直稳步发展，即使在2001年世界旅游业整体负增长的大环境下，仍然是进行着减速增长；2002年中国旅游业是整体回升，四项旅游经济指标增速均超过10%，特别是在2006年，其中的两项指标更是创历史新高。总之，我国旅游一从无到有，从小到大，产业形象日益鲜明，规模不断壮大，逐步成为国民经济中发展最快的行业之一。伴随着“十七大”的召开和2008年奥运会的举行，旅游业已迎来“第二个春天”了。
关于旅行社网站项目网页布局的设计思路
关于旅⾏社⽹站项⽬⽹页布局的设计思路⽤HTML5和CSS3构建Web页⾯创建项⽬1.创建index.html⽂件 添加html5基本格式2.创建img和css两个⽬录3.创建css⽂件存放在css⽬录中，并在html5⽂件中加⼊css⽹站结构参考⼀些同类型的⽹站，了解⼀下⼤致结构，这次要做的⽹站是⼀个旅⾏社的⽹站，经过参考，⾸页上选择了3个模块 <header>header</header> 头部 包括Logo+导航 <nav> 标签定义导航链接的部分<section>section</section> 主体<footer>footer</footer> 尾部第⼀个页⾯：主页头部logo 采⽤的是h1标签 ⼀般为了让搜索引擎更好的抓取关键字，我们建议⼀个页⾯只有⼀个h1 ⽽且是最重要的关键词放在⾥⾯，在⾸页上，最重要的关键词就是旅⾏社的名称，当然如果其他页⾯，⽐如新闻⽹站的单个新闻最重要的应该是新闻标题 ⽹站的名称就其次了css隐藏⽂字的⽅法 text-indext:-9999在建站的过程中 ⼀般⼈喜欢把⽹站名称⽤h1来表⽰ 但是从美观的考虑，要⽤logo图⽚来替代h1这种情况下需要隐藏h1内的这段⽂字，但⼜不能对搜索引擎不友好，否则就失去了定义h1标签的意义<!-- 头部导航 --><header id="header"><div class="center"><h1 class="logo">瓢城旅⾏社</h1><nav class="link"><ul><h2 class="none">⽹站导航</h2><li class="active"><a href="飘城旅⾏社门户.html">⾸页</a></li><li><a href="旅游咨询.html">旅游资讯</a></li><li><a href="机票订购.html">机票订购</a></li><li><a href="风景欣赏.html">风景欣赏</a></li><li><a href="公司简介.html">公司简介</a></li></ul></nav></div></header>@charset "utf-8";body,h1,ul {margin: 0;padding: 0;}ul {list-style: outside none none;}a {text-decoration: none;}#nav {width: 100%;height: 70px;background-color: #333;}#nav .center {width: 1263px;height: 70px;margin: 0 auto;}#nav .logo {width: 240px;height: 70px;background-image: url(../img/logo.png);text-indent: -9999px;float: left;}#nav .link {width: 650px;height: 70px;line-height: 70px;color: #eee;float: right;}#nav .link li {width: 120px;text-align: center;float: left;}#nav .link a {color: #eee;display: block;}#nav .link a:hover,#nav .active a {background-color: #000;}搜索区在header的下⾯ 设计⼀块搜索区，从表⾯上来分析，就是插⼊⼀张背景⼤图，然后居中⼀个搜索条<!-- 搜索框 --><div id="search"><div class="center"></div><input type="text" class="search" placeholder="请输⼊旅游景点或城市"><button class="button">搜索</button></div>#search{width: 100%;min-width: 1263px;height: 600px;background: url(../img/search.jpg) no-repeat center;position: relative;}#search .center{width: 600px;height:60px;background-color: #000;position:absolute;top: 50%;left: 50%;margin: -30px 0 0 -300px;opacity: 0.6;border-radius: 10px;}#search .search{width: 446px;height: 52px;background-color: #eee;position: absolute;top: 50%;left: 50%;margin: -27px 0 0 -296px;color: #666;border: 1px solid #666;border-radius: 10px;font-size: 24px;padding: 0 10px;outline: none;}#search .button{width: 120px;height: 54px;background-color: #eee;position: absolute;top: 50%;left: 50%;margin: -27px 0 0 175px;color: #666;border: 1px solid #666;border-radius: 10px;font-size: 24px;outline: none;cursor: pointer;font-weight: bold;}主体内容⾸页最核⼼的部分，旅游区这块内容由两个部分组成，⼀个是⼤标题，表⽰热门旅游区域，其次就是旅游项⽬的图⽚展⽰区域可以⽤<figcaption> 标签定义 figure 元素的标题，为放⼊的图⽚添加⽂字内容⼀共有九个图⽚，每个图⽚的html设计都是⼀样的，所以下⾯的代码中我只放了三张图⽚的内容，后⾯复制6次修改⼀下对应的内容就⾏了<!-- 热门旅游 --><div id="tour"><section class="center"><h2>热门旅游</h2><p>国内旅游、国外旅游、⾃助旅游、⾃驾旅游、油轮签证、主题旅游等各种最新热门旅游推荐</p></section><figure><img src="img/tour1.jpg" alt=""><figcaption><strong class="title"><曼⾕-芭提雅6⽇游></strong> 包团特惠，超丰富景点，升级1晚国五，⽆⾃费，更赠送600元/成⼈⾃费券 <div class="info"><em class="sat">满意度 77%</em><span class="price">￥ <strong>2864</strong> 起</span></div><div class="type">国内长线</div></figcaption></figure><figure><img src="img/tour2.jpg" alt="马尔代夫双鱼岛Olhuveli4晚6⽇⾃助游"><figcaption><strong class="title"><马尔代夫双鱼岛Olhuveli4晚6⽇⾃助游></strong> 上海出发，机+酒包含:早晚餐+快艇<div class="info"><em class="sat">满意度 97%</em><span class="price">¥ <strong>8039</strong> 起</span></div><div class="type">出境长线</div></figcaption></figure><figure><img src="img/tour3.jpg" alt="海南双飞5⽇游"><figcaption><strong class="title"><海南双飞5⽇游></strong> 含盐城接送，全程挂牌四星酒店，⼀价全含，零⾃费“⾃费项⽬”免费送<div class="info"><em class="sat">满意度 90%</em><span class="price">¥ <strong>2709</strong> 起</span></div><div class="type">⾃助旅游</div></figcaption></figure></div>#tour {width: 1263px;height: 1200px;/*background-color: #ccc;*/margin: 30px auto;text-align: center;}#tour .center h2 {font-size: 45px;letter-spacing: 2px;color: #666;margin: 10px 0;}#tour .center p {color: #666;margin: 10px 0;}#tour figure {border: 1px solid #ddd;display: inline-block;padding: 4px;border-radius: 4px;border-radius: 4px;margin: 15px 12px;width: 380px;text-align: left;position: relative;}#tour figure img {vertical-align: middle;}#tour figcaption {color: #777;line-height: 1.5;letter-spacing: 1px;font-size: 14px;padding: 7px 0 5px 0;}#tour .title {color: #333;font-weight: normal;}#tour .sat {float: right;font-size: 13px;color: #999;font-style: normal;position: relative;top: 5px;right: 5px;}#tour .price {color: #f60;font-size: 14px;}#tour .price strong {font-size: 20px;letter-spacing: 1px;}#tour .type {width: 90px;height: 25px;line-height: 25px;font-size: 14px;text-align: center;color: #fff;background-color: #59b200;position: absolute;top: 4px;left: 4px;}底部这部分区域由两个部分组成，⼀个是说明内容，有：合作伙伴、旅游FAQ和联系⽅式，最下⾯的是版权声明等整个底部为<footer id="footer">，整个底部⼜分为上⾯部分<div class="top"> 和 下⾯部分<div class="bottom"> 两个div，上⾯部分⼜分为左边部分<div class="block left"> 、中间部分<div class="block center"> 和 右边部分<div class="block right"> 三个div<footer id="footer"><div class="top"><div class="block left"><h2>合作伙伴</h2><hr><ul><li>途⽜旅游⽹</li><li>驴妈妈旅游⽹</li><li>携程旅游</li><li>中国青年旅⾏社</li></ul></div><div class="block center"><h2>旅游FAQ</h2><hr><ul><li>旅游合同签订⽅式？</li><li>⼉童价是基于什么制定的？</li><li>旅游的线路品质怎么界定的？</li><li>单房差是什么？</li><li>旅游保险有那些种类？</li></ul></div><div class="block right"><h2>联系⽅式</h2><hr><ul><li>微博：/ycku</li><li>邮件：ycku@</li><li>地址：江苏盐城⽆名路123 号</li></ul></div></div><div class="bottom">Copyright © YCKU 瓢城旅⾏社| 苏ICP 备120110119 号| 旅⾏社经营许可证：L-YC-BK12345</div> </footer>height: 360px;background-color:#222;}#footer .top{width: 1263px;height:281px;margin:0 auto;text-align: center;}#footer .block{width: 410px;height: 280px;display: inline-block;text-align: left;color: #ccc;vertical-align: top;}#footer h2 {font-size: 24px;font-weight: normal;padding: 20px 0 0 20px;}#footer hr {width: 90%;border: 1px dashed #333;}#footer ul {font-size: 18px;color: #777;text-indent: 20px;line-height: 2;}#footer .bottom {height: 80px;line-height: 80px;text-align: center;color: #777;background-color: #000;border-top: 1px solid #444;}第⼆个页⾯：旅游咨询后⾯的页⾯与主页在某些部分是重复的，如何把⾸页重复的部分移植到新的页⾯⽽减少冗余，最恰当的⽅法就是:将CSS部分中重复⽤的部分分离出来，单独创建⼀个CSS，以便后续的页⾯重复调⽤分离CSS 引⼊到新的页⾯后，还要为⼦栏⽬创建⼀个标头，不能使⽤⾸页的search那么⼤的了，只能重新做⼀个⼩的，放在标头部分创建⼀个basic.css把头部和底部的css样式放⼊其中，style.css中留下搜索和⼤图部分的css样式，旅游咨询的部分放⼊column.css头部和底部跟主页的是⼀样的头部下⾯的背景图<div id="headline"><div class="center"><hgroup><h2>旅游资讯</h2><h3>介绍各种最新旅游信息、资讯要闻、景点攻略等</h3></hgroup></div></div>主体内容中间部分中间的九个图⽚html是⼀样的，所以下⾯放了两个图的代码，后⾯的复制然后修改对应的内容就⾏了<div class="list"><div class="infor"><ul class="left"><li><a href="###">限时特价</a></li><li><a href="###">热门推荐</a></li></ul><ul class="right"><li><a href="###" class="selected">推荐</a></li><li><a href="###">折扣</a></li><li><a href="###">价格</a></li></ul></div><figure class="tour"><img src="img/tour1.jpg" alt="曼⾕-芭提雅6⽇游"><figcaption><article><header><hgroup><h2>曼⾕-芭提雅6⽇游</h2><h3>包团特惠，超丰富景点，升级1 晚国五，⽆⾃费，赠送600元成⼈券...</h3> </hgroup></header><ol><li><mark>交通</mark>：春秋航空,杭州出发,⽆需转机</li><li><mark>团期</mark>：11/01、11/03、11/08...</li></ol><div class="buy"><div class="price">￥<strong>2864</strong> <s>¥3980</s></div><div class="reserve"><a href="###">⽴即抢购</a></div></div><div class="type">国内长线</div><div class="disc"><span>4.7折</span></div><footer>本团游由瓢城旅⾏社赞助提供，截⽌于<time>2015-10-10</time></footer> </article></figcaption></figure><figure class="tour"><img src="img/tour2.jpg" alt="马尔代夫6⽇⾃助游"><figcaption><article><header><hgroup><h2>马尔代夫6⽇⾃助游</h2><h3>双鱼岛Olhuveli4晚，上海出发，机+酒包含:早晚餐+快艇...</h3></hgroup></header><ol><li><mark>交通</mark> 春秋航空,杭州出发,⽆需转机</li><li><mark>团期</mark> 11/01、11/03、11/08...</li></ol><div class="buy"><div class="price">¥<strong>8039</strong> <s>¥9980</s></div><div class="reserve"><a href="###">⽴即抢购</a></div></div><div class="type">出境长线</div><div class="disc"><span>7.7折</span></div><footer>本团游由瓢城旅⾏社赞助提供，截⽌于<time>2015-10-10</time></footer> </article></figcaption></figure><div class="more">加载更多...</div></div>右边部分<aside class="sidebar"><div class="sidebox recommend"><h2>景点推荐</h2><div class="tag"><ul><li><a href="###">曼⾕(12)</a></li><li><a href="###">东京(5)</a></li><li><a href="###">西双版纳(8)</a></li><li><a href="###">漓江(16)</a></li><li><a href="###">呼伦贝尔(4)</a></li></ul></div></div><div class="sidebox hot"><h2>热门旅游</h2><div class="figure"><figure><img src="img/hot1.jpg" alt="曼⾕-芭提雅6⽇游"> <figcaption>曼⾕-芭提雅6⽇游</figcaption></figure><figure><img src="img/hot2.jpg" alt="马尔代夫双鱼6⽇游"> <figcaption>马尔代夫双鱼6⽇游</figcaption></figure><figure><img src="img/hot3.jpg" alt="海南双飞5⽇游"><figcaption>海南双飞5⽇游</figcaption></figure><figure><img src="img/hot4.jpg" alt="富⼭⼤阪东京8⽇游"> <figcaption>富⼭⼤阪东京8⽇游</figcaption></figure></div></div><div class="sidebox treasure"><h2>旅游百宝箱</h2><div class="box"><a href="###" class="trea1">天⽓预报</a><a href="###" class="trea2">⽕车票查询</a><a href="###" class="trea3">航空查询</a><a href="###" class="trea4">地铁线路查询</a> </div></div></aside>column.css@charset "utf-8";#headline {width: 100%;min-width: 1263px;height: 300px;background: linear-gradient(to right bottom, rgba(0,0,0,0.7), rgba(0,0,0,0)), url(../img/headline.jpg) no-repeat center; }#headline .center {width: 1263px;height: 300px;margin: 0 auto;}#headline hgroup {padding: 100px 0 0 50px;}#headline h2 {color: #eee;font-size: 36px;letter-spacing: 1px;}#headline h3 {color: #eee;font-size: 20px;letter-spacing: 1px;}#container {width: 1263px;height: 1200px;margin: 30px auto;}#container .sidebar {width: 320px;height: 1200px;background-color: #eee;float: left;}#container .list {width: 920px;height: 1200px;background-color: #ccc;float: right;}后⾯的⼏个页⾯都有相同的部分，布局都差不多，把不同的部分写出来就⾏了。