学习要点：
1.热门旅游区
2.标题介绍区
3.旅游项目区
主讲教师：李炎恢
本章主要开始使用学习用 html5 和 css3 来构建 web 页面，第一个项目采用 pc 端固定布局来实现。
一．热门旅游区
本节课，我们将探讨一下首页最核心的部分，旅游区。这块内容由两个部分组成，一个是大标题，表示热门旅游区域。其次就是旅游项目的图片展示区域。具体如下：
//热门旅游区父元素
div id=tour> ...div>
//旅游父元素
#tour { width: 1263px; height: 1200px; margin: 30px auto; text-align: center;}
二．标题介绍区
标题区可以分为大标题和内容，那么就比较适合了。
//标题
div id=tour> section class=center> h2>热门旅游h2> p> 国内旅游、国外旅游、自助旅游、自驾旅游、油轮签证、主题旅游等各种最新热门旅游推荐 p> section>div>
//标题 css
#tour .center { text-align: center;}#tour .center h2 { margin: 10px 0; font-size: 45px; letter-spacing: 2px; color: #666;}#tour .center p { color: #666; margin: 10px 0;}
三．旅游项目区
项目区是一张图片和一段文本的阐述，共实现 9 个，3x3 排列。
//旅游项目区
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元/成人自费券figcaption> div> em class=sat>满意度 77%em> span class=price>￥ strong>2864strong> 起span> div> div class=type>国内长线div> figure> figure> img src=img/tour2.jpg alt=马尔代夫双鱼岛olhuveli4晚6日自助游> figcaption>strong class=title><马尔代夫双鱼岛olhuveli4晚6日自助游>strong> 上海出发，机+酒包含:早晚餐+快艇figcaption> div> em class=sat>满意度97%em> span class=price>¥ strong>8039strong> 起span> div> div class=type>出境长线div> figure> figure> img src=img/tour3.jpg alt=海南双飞5日游> figcaption>strong class=title><海南双飞5日游>strong> 含盐城接送，全程挂牌四星酒店，一价全含，零自费“自费项目”免费送figcaption> div> em class=sat>满意度90%em> span class=price>¥ strong>2709strong> 起span> div> div class=type>自助旅游div> figure> figure> img src=img/tour4.jpg alt=富山-大阪-东京8日游> figcaption>strong class=title><富山-大阪-东京8日游>strong> 暑期亲子，2天自由，无导游安排自费项目，全程不强迫购物figcaption> div> em class=sat>满意度97%em> span class=price>¥ strong>9499strong> 起span> div> div class=type>自助旅游div> figure> figure> img src=img/tour5.jpg alt=法瑞意德12日游> figcaption>strong class=title><法瑞意德12日游>strong> 4至5星，金色列车，少女峰，部分the mallfigcaption> div> em class=sat>满意度97%em> span class=price>¥ strong>9199strong> 起span> div> div class=type>国内短线div> figure> figure> img src=img/tour6.jpg alt=巴厘岛6日半自助游> figcaption>strong class=title><巴厘岛6日半自助游>strong> 蓝梦出海，独栋别墅，悦榕庄下午茶，纯玩figcaption> div> em class=sat>满意度95%em> span class=price>¥ strong>6488strong> 起span> div> div class=type>出境长线div> figure> figure> img src=img/tour7.jpg alt=塞舌尔迪拜9日自助游> figcaption>strong class=title><塞舌尔迪拜9日自助游>strong> 一游两国，4晚塞舌尔，2晚迪拜，香港ek往返figcaption> div> em class=sat>满意度100%em> span class=price>¥ strong>9669strong> 起span> div> div class=type>游轮观光div> figure> figure> img src=img/tour8.jpg alt=花样姐姐土耳其9日或10日游> figcaption>strong class=title><花样姐姐土耳其9日或10日游>strong> 最高立减3000！中餐六菜一汤+土耳其当地美食满足您挑剔味蕾figcaption> div> em class=sat>满意度93%em> span class=price>¥ strong>9999strong> 起span> div> div class=type>出境长线div> figure> figure> img src=img/tour9.jpg alt=大阪-京都-箱根双飞6日游> figcaption>strong class=title><大阪-京都-箱根双飞6日游>strong> 盐城直飞，不走回头路，境外无自费，超值之旅figcaption> div> em class=sat>满意度100%em> span class=price>¥ strong>5284strong> 起span> div> div class=type>国内短线div> figure>div>
//旅游项目区 css
#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; 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;}