HTML5项⽬实战之旅⾏社⽹站——兼容响应式布局主页⾯（index.html）：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>瓢城旅⾏社--响应式</title>
<link rel="stylesheet" href="css/style.css">
</head>
徽州古城景点介绍
<body>
<header id="header">
<div class="center">
<h1 class="logo">瓢城旅⾏社</h1>
<nav class="link">
<h2 class="none">⽹站导航</h2>
<ul>
<li class="active"><a href="index.html">⾸页</a></li>
<li><a href="information.html"><span class="xs-hidden">旅游</span>资讯</a></li> <li><a href="ticket.html">机票<span class="xs-hidden">订购</span></a></li>
<li class="xs-hidden"><a href="scenery.html">风景欣赏</a></li>
<li><a href="about.html"><span class="xs-hidden">关于</span>公司</a></li>
</ul>
</nav>
</div>
</header>
<div id="adver">
<img src="img/adver.jpg" alt="">
<div class="center"></div>
<div class="center copy">
<input type="text" class="search" placeholder="请输⼊旅游景点或城市">
<button class="button">搜索</button>
</div>
</div>
<div id="tour">
<section class="center">
<p>国内旅游、国外旅游、⾃助旅游、⾃驾旅游、油轮签证、主题旅游等各种最新热门旅游推荐</p>
</section>
<figure>
<img src="img/tour1.jpg" alt="热门旅游">
<figcaption>
<div class="tour_title">
<strong class="title"><；曼⾕-芭提雅6⽇游></strong> 包团特惠，超丰富景点，升级1晚国五，⽆⾃费，更赠送600元/成⼈⾃费券 </div>
<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="热门旅游">
<figcaption>
<div class="tour_title">
<strong class="title"><；马尔代夫双鱼岛Olhuveli4晚6⽇⾃助游></strong> 上海出发，机+酒包含：早晚餐+快艇
</figcaption>
</figure>
<figure>
<img src="img/tour3.jpg" alt="热门旅游">
<figcaption>
<div class="tour_title">
<strong class="title"><；海南双飞5⽇游></strong> 含盐城接送，全程挂牌四星酒店，⼀价全含，零⾃费“⾃费项⽬”免费送 </div> <div class="info">
<em class="sat">满意度 90%</em>
<span class="price">¥ <strong>2709</strong> 起</span>
</div>
<div class="type">⾃助旅游</div>
</figcaption>
</figure>
<figure>
<img src="img/tour4.jpg" alt="热门旅游">
<figcaption>
<div class="tour_title">
<strong class="title"><；富⼭-⼤阪-东京8⽇游></strong> 暑期亲⼦，2天⾃由，⽆导游安排⾃费项⽬，全程不强迫购物
</div>
<div class="info">
<em class="sat">满意度 97%</em>
<span class="price">¥ <strong>9499</strong> 起</span>
</div>
<div class="type">⾃助旅游</div>
</figcaption>
</figure>
<figure>
<img src="img/tour5.jpg" alt="热门旅游">
<figcaption>
<div class="tour_title">
<strong class="title"><；法瑞意德12⽇游></strong> 4⾄5星，⾦⾊列车，少⼥峰，部分THE MALL
</div>
<div class="info">
<em class="sat">满意度 97%</em>
<span class="price">¥ <strong>9199</strong> 起</span>
</div>
<div class="type">国内短线</div>
</figcaption>
</figure>
<figure>
<img src="img/tour6.jpg" alt="热门旅游">
<figcaption>
<div class="tour_title">
<strong class="title"><；巴厘岛6⽇半⾃助游></strong> 蓝梦出海，独栋别墅，悦榕庄下午茶，纯玩
</div>
<div class="info">
<em class="sat">满意度 95%</em>
<span class="price">¥ <strong>6488</strong> 起</span>
</div>
<div class="type">出境长线</div>
</figcaption>
</figure>
<figure>
<img src="img/tour7.jpg" alt="热门旅游">
<figcaption>
<div class="tour_title">
<strong class="title"><；塞⾆尔迪拜9⽇⾃助游></strong> ⼀游两国，4晚塞⾆尔，2晚迪拜，⾹港EK往返
</figcaption>
</figure>
<figure>
<img src="img/tour8.jpg" alt="热门旅游">
<figcaption>
<div class="tour_title">
<strong class="title"><；花样⼟⽿其9⽇或10⽇游></strong> 最⾼⽴减3000！中餐六菜⼀汤+⼟⽿其当地美⾷满⾜您挑剔味蕾 </div>
<div class="info">
<em class="sat">满意度 93%</em>
<span class="price">¥ <strong>9999</strong> 起</span>
</div>
<div class="type">出境长线</div>
</figcaption>
</figure>
<figure>
<img src="img/tour9.jpg" alt="热门旅游">
<figcaption>
<div class="tour_title">
<strong class="title"><⼤阪-京都-箱根双飞6⽇游></strong> 盐城直飞，不⾛回头路，⽆⾃费，超值之旅
</div>
<div class="info">
<em class="sat">满意度 100%</em>
<span class="price">¥ <strong>5284</strong> 起</span>
</div>
<div class="type">国内短线</div>
</figcaption>
</figure>
</div>
<footer id="footer">
<div class="top sm-hidden">
<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>微博：weibo/ycku</li>
<li>邮件：ycku@ycku</li>
</div>
</div>
<div class="clearfix"></div>
<div class="version sm-visible">
客户端 | 触屏版 | 电脑版
</div>
<div class="bottom">
Copyright © YCKU 瓢城旅⾏社 | 苏ICP备120110119号<span class="sm-hidden"> | 旅⾏社经营许可证：L-YC-BK12345</span> </div>
</footer>
</body>
</html>
旅游资讯（information.html）：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>瓢城旅⾏社--响应式</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header id="header">
<div class="center">
<h1 class="logo">瓢城旅⾏社</h1>
<nav class="link">
<h2 class="none">⽹站导航</h2>
<ul>孟州市人民政府网
<li><a href="index.html">⾸页</a></li>
<li class="active"><a href="information.html"><span class="xs-hidden">旅游</span>资讯</a></li>
<li><a href="ticket.html">机票<span class="xs-hidden">订购</span></a></li>
<li class="xs-hidden"><a href="scenery.html">风景欣赏</a></li>
<li><a href="about.html"><span class="xs-hidden">关于</span>公司</a></li>
</ul>
</nav>
</div>
</header>
<div id="headline">
<img src="img/headline.jpg" alt="">
<hgroup>
<h2>旅游资讯</h2>
<h3>介绍各种最新旅游信息、资讯要闻、景点攻略等</h3>
</hgroup>
</div>
<div id="container">康保天气
<aside class="sidebar">
<div class="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>
<li><a href="###">⾸尔(9)</a></li>
<li><a href="###">巴厘岛(15)</a></li>
<li><a href="###">巴厘岛(11)</a></li>
<li><a href="###">⽑⾥求斯(7)</a></li>
<li><a href="###">吉普岛(4)</a></li>
<li><a href="###">希腊(18)</a></li>
<li><a href="###">法瑞意(8)</a></li>
<li><a href="###">马尔代夫(9)</a></li>
<li><a href="###">新西兰(16)</a></li>
<li><a href="###">埃及(11)</a></li>
<li><a href="###">迪拜(14)</a></li>
<li><a href="###">斯⾥兰卡(7)</a></li>
<li><a href="###">麦哈顿(3)</a></li>
<li><a href="###">⼤阪(15)</a></li>
</ul>
</div>
</div>
<div class="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>
30元一天包吃住农家乐<figure>
<img src="img/hot4.jpg" alt="富⼭⼤阪东京8⽇游"> <figcaption>富⼭⼤阪东京8⽇游</figcaption>
</figure>
<figure>
<img src="img/hot5.jpg" alt="法瑞意德12⽇游">
<figcaption>法瑞意德12⽇游</figcaption>
</figure>
<figure>
<img src="img/hot6.jpg" alt="巴厘岛6⽇半游">
<figcaption>巴厘岛6⽇半游</figcaption>
</figure>
<figure>
<img src="img/hot7.jpg" alt="塞⾆尔迪拜9⽇游"> <figcaption>塞⾆尔迪拜9⽇游</figcaption>
</figure>
<figure>
<img src="img/hot8.jpg" alt="花样⼟⽿其10⽇游"> <figcaption>花样⼟⽿其10⽇游</figcaption>
</figure>西藏旅游攻略自由行
</div>
</div>
<div class="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>
<div class="list information">
