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">
		<h2>热门旅游</h2>
		<p>国内旅游、国外旅游、自助旅游、自驾旅游、油轮签证、主题旅游等各种最新热门旅游推荐</p>
	</section>
	<figure>
		<img src="img/tour1.jpg" alt="热门旅游">
		<figcaption>
			<div class="tour_title">
				<strong class="title">&lt;曼谷-芭提雅6日游&gt;</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">&lt;马尔代夫双鱼岛Olhuveli4晚6日自助游&gt;</strong> 上海出发,机+酒 包含:早晚餐+快艇
			</div>
			<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="热门旅游">
		<figcaption>
			<div class="tour_title">
				<strong class="title">&lt;海南双飞5日游&gt;</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">&lt;富山-大阪-东京8日游&gt;</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">&lt;法瑞意德12日游&gt;</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">&lt;巴厘岛6日半自助游&gt;</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">&lt;塞舌尔迪拜9日自助游&gt;</strong> 一游两国,4晚塞舌尔,2晚迪拜,香港EK往返
			</div>
			<div>
				<em class="sat">满意度 100%</em>
				<span class="price">¥ <strong>9669</strong> 起</span>
			</div>
			<div class="type">游轮观光</div>
		</figcaption>
	</figure>
	<figure>
		<img src="img/tour8.jpg" alt="热门旅游">
		<figcaption>
			<div class="tour_title">
				<strong class="title">&lt;花样姐姐土耳其9日或10日游&gt;</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">&lt;大阪-京都-箱根双飞6日游&gt;</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.com/ycku</li>
				<li>邮件:ycku@ycku.com</li>
				<li>地址:江苏盐城无名路123号</li>
			</ul>
		</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="###">土耳其(22)</a></li>
					<li><a href="###">夏威夷(5)</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>
				<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">
		<h2 style="margin: 0 0 20px 0">旅游资讯</h2>
		<figure class="tour">
			<img src="img/tour1.jpg" alt="曼谷-芭提雅6日游">
			<figcaption>
				<article>
					<header>
						<hgroup>
							<h2>曼谷-芭提雅6日游</h2>
							<h3>包团特惠,超丰富景点,升级1晚国五,无自费,赠送600元成人券...</h3>
						</hgroup>
					</header>
					<ol class="md-hidden">
						<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 md-hidden"><a href="###">立即抢购</a></div>
					</div>
					<div class="type">国内长线</div>
					<div class="disc xs-hidden"><span>4.7折</span></div>
					<footer class="md-hidden">本团游由瓢城旅行社赞助提供,截止于<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 class="md-hidden">
						<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 md-hidden"><a href="###">立即抢购</a></div>
					</div>
					<div class="type">出境长线</div>
					<div class="disc xs-hidden"><span>7.7折</span></div>
					<footer class="md-hidden">本团游由瓢城旅行社赞助提供,截止于<time>2015-10-10</time></footer>
				</article>
			</figcaption>
		</figure>	
		<figure class="tour">
			<img src="img/tour3.jpg" alt="海南双飞5日游">
			<figcaption>
				<article>
					<header>
						<hgroup>
							<h2>海南双飞5日游</h2>
							<h3>含盐城接送,全程挂牌四星酒店,一价全含,零自费“自费项目”免费送...</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>2709</strong> <s>¥3280</s></div>
						<div class="reserve"><a href="###">立即抢购</a></div>
					</div>
					<div class="type">自助旅游</div>
					<div class="disc"><span>6.5折</span></div>
					<footer>本团游由瓢城旅行社赞助提供,截止于<time>2015-10-10</time></footer>
				</article>
			</figcaption>
		</figure>	
		<figure class="tour">
			<img src="img/tour4.jpg" alt="富山-大阪-东京8日游">
			<figcaption>
				<article>
					<header>
						<hgroup>
							<h2>富山-大阪-东京8日游</h2>
							<h3>暑期亲子,2天自由,无导游安排自费项目,全程不强迫购物...</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>9499</strong> <s>¥9999</s></div>
						<div class="reserve"><a href="###">立即抢购</a></div>
					</div>
					<div class="type">自助旅游</div>
					<div class="disc"><span>8.8折</span></div>
					<footer>本团游由瓢城旅行社赞助提供,截止于<time>2015-10-10</time></footer>
				</article>
			</figcaption>
		</figure>
		<figure class="tour">
			<img src="img/tour5.jpg" alt="法瑞意德12日游">
			<figcaption>
				<article>
					<header>
						<hgroup>
							<h2>法瑞意德12日游</h2>
							<h3>4至5星,金色列车,少女峰,部分THE MALL...</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>9199</strong> <s>¥9999</s></div>
						<div class="reserve"><a href="###">立即抢购</a></div>
					</div>
					<div class="type">国内短线</div>
					<div class="disc"><span>9.2折</span></div>
					<footer>本团游由瓢城旅行社赞助提供,截止于<time>2015-10-10</time></footer>
				</article>
			</figcaption>
		</figure>
		<figure class="tour">
			<img src="img/tour6.jpg" alt="巴厘岛6日半自助游">
			<figcaption>
				<article>
					<header>
						<hgroup>
							<h2>巴厘岛6日半自助游</h2>
							<h3>蓝梦出海,独栋别墅,悦榕庄下午茶,纯玩...</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>6488</strong> <s>¥8460</s></div>
						<div class="reserve"><a href="###">立即抢购</a></div>
					</div>
					<div class="type">国内短线</div>
					<div class="disc"><span>7.6折</span></div>
					<footer>本团游由瓢城旅行社赞助提供,截止于<time>2015-10-10</time></footer>
				</article>
			</figcaption>
		</figure>
		<figure class="tour">
			<img src="img/tour7.jpg" alt="塞舌尔迪拜9日自助游">
			<figcaption>
				<article>
					<header>
						<hgroup>
							<h2>塞舌尔迪拜9日自助游</h2>
							<h3>一游两国,4晚塞舌尔,2晚迪拜,香港EK往返...</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>9669</strong> <s>¥9999</s></div>
						<div class="reserve"><a href="###">立即抢购</a></div>
					</div>
					<div class="type">游轮观光</div>
					<div class="disc"><span>9.6折</span></div>
					<footer>本团游由瓢城旅行社赞助提供,截止于<time>2015-10-10</time></footer>
				</article>
			</figcaption>
		</figure>
		<figure class="tour">
			<img src="img/tour8.jpg" alt="花样姐姐土耳其9日游">
			<figcaption>
				<article>
					<header>
						<hgroup>
							<h2>花样姐姐土耳其9日游</h2>
							<h3>最高立减3000!中餐六菜一汤+土耳其当地美食满足您挑剔味蕾...</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>9999</strong> <s>9999</s></div>
						<div class="reserve"><a href="###">立即抢购</a></div>
					</div>
					<div class="type">出境长线</div>
					<div class="disc"><span>10折</span></div>
					<footer>本团游由瓢城旅行社赞助提供,截止于<time>2015-10-10</time></footer>
				</article>
			</figcaption>
		</figure>
		<figure class="tour">
			<img src="img/tour9.jpg" alt="大阪-京都-箱根双飞6日游">
			<figcaption>
				<article>
					<header>
						<hgroup>
							<h2>大阪-京都-箱根双飞6日游</h2>
							<h3>盐城直飞,不走回头路,境外无自费,超值之旅...</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>5284</strong> <s>8437</s></div>
						<div class="reserve"><a href="###">立即抢购</a></div>
					</div>
					<div class="type">国内短线</div>
					<div class="disc"><span>6.8折</span></div>
					<footer>本团游由瓢城旅行社赞助提供,截止于<time>2015-10-10</time></footer>
				</article>
			</figcaption>
		</figure>
		<div class="more">加载更多...</div>
	</div>
</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.com/ycku</li>
				<li>邮件:ycku@ycku.com</li>
				<li>地址:江苏盐城无名路123号</li>
			</ul>
		</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>
机票订购(ticket.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><a href="information.html"><span class="xs-hidden">旅游</span>资讯</a></li>
				<li class="active"><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="###">土耳其(22)</a></li>
					<li><a href="###">夏威夷(5)</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>
				<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 ticket">
		<form action="###">
			<h2>机票预定</h2>
			<fieldset class="type">
				<p>航程类型 <mark>单程</mark> 往返</p>
			</fieldset>
			<fieldset class="form left">
				<p>
					<label for="from_city">出发城市</label>
					<input type="text" name="from_city" id="from_city" placeholder="城市名">
				</p>
				<p>
					<label for="to_city">返回城市</label>
					<input type="text" name="to_city" id="to_city" placeholder="城市名">
				</p>
			</fieldset>
			<fieldset class="form right">
				<p>
					<label for="from_date">出发时间</label>
					<input type="text" name="from_date" id="from_date" placeholder="时间/日期">
				</p>
				<p>
					<label for="to_date">返回时间</label>
					<input type="text" name="to_date" id="to_date" placeholder="时间/日期">
				</p>
			</fieldset>
			<fieldset class="form button">
				<p>
					<button type="submit" class="submit">订票</button>
				</p>
			</fieldset>
		</form>
		<div class="new">
			<h2>最新机票</h2>
			<ul>
				<li>热门城市:</li>
				<li>北京</li>
				<li>上海</li>
				<li>广州</li>
				<li>深圳</li>
				<li>重庆</li>
				<li>成都</li>
				<li>杭州</li>
				<li>南京</li>
			</ul>
			<table>
				<thead>
					<tr>
						<th>路线</th>
						<th>日期</th>
						<th>价格</th>
						<th class="xs-hidden">税费</th>
						<th class="xs-hidden">餐食</th>
						<th>航班</th>
						<th>预定</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>北京-成都</td>
						<td>10-15</td>
						<td class="price">¥745</td>
						<td class="xs-hidden">¥50</td>
						<td class="xs-hidden">有</td>
						<td>春秋航空</td>
						<td><a href="###" class="reserve">预定</a></td>
					</tr>
					<tr>
						<td>北京-上海</td>
						<td>10-15</td>
						<td class="price">¥479</td>
						<td class="xs-hidden">¥45</td>
						<td class="xs-hidden">无</td>
						<td>南方航空</td>
						<td><a href="###" class="reserve">预定</a></td>
					</tr>
					<tr>
						<td>北京-深圳</td>
						<td>10-15</td>
						<td class="price">¥561</td>
						<td class="xs-hidden">¥52</td>
						<td class="xs-hidden">有</td>
						<td>西部航空</td>
						<td><a href="###" class="reserve">预定</a></td>
					</tr>
					<tr>
						<td>北京-杭州</td>
						<td>10-15</td>
						<td class="price">¥378</td>
						<td class="xs-hidden">¥36</td>
						<td class="xs-hidden">无</td>
						<td>天津航空</td>
						<td><a href="###" class="reserve">预定</a></td>
					</tr>
					<tr>
						<td>北京-广州</td>
						<td>10-15</td>
						<td class="price">¥612</td>
						<td class="xs-hidden">¥44</td>
						<td class="xs-hidden">有</td>
						<td>首都航空</td>
						<td><a href="###" class="reserve">预定</a></td>
					</tr>
					<tr>
						<td>北京-重庆</td>
						<td>10-15</td>
						<td class="price">¥428</td>
						<td class="xs-hidden">¥62</td>
						<td class="xs-hidden">有</td>
						<td>东方航空</td>
						<td><a href="###" class="reserve">预定</a></td>
					</tr>
					<tr>
						<td>北京-昆明</td>
						<td>10-15</td>
						<td class="price">¥509</td>
						<td class="xs-hidden">¥35</td>
						<td class="xs-hidden">无</td>
						<td>厦门航空</td>
						<td><a href="###" class="reserve">预定</a></td>
					</tr>
					<tr>
						<td>北京-厦门</td>
						<td>10-15</td>
						<td class="price">¥893</td>
						<td class="xs-hidden">¥73</td>
						<td class="xs-hidden">有</td>
						<td>深圳航空</td>
						<td><a href="###" class="reserve">预定</a></td>
					</tr>
					<tr>
						<td>北京-长沙</td>
						<td>10-15</td>
						<td class="price">¥663</td>
						<td class="xs-hidden">¥46</td>
						<td class="xs-hidden">无</td>
						<td>四川航空</td>
						<td><a href="###" class="reserve">预定</a></td>
					</tr>
				</tbody>
				<tfoot>
					<td colspan="7"><a href="###" class="more2">加载更多航班...</a></td>
				</tfoot>
			</table>
		</div>
	</div>
</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.com/ycku</li>
				<li>邮件:ycku@ycku.com</li>
				<li>地址:江苏盐城无名路123号</li>
			</ul>
		</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>
风景欣赏(scenery.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><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 active"><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="###">土耳其(22)</a></li>
					<li><a href="###">夏威夷(5)</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>
				<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 scenery">
		<section>
			<h2>风景欣赏</h2>
			<figure>
				<img src="img/s1.jpg" alt="曼谷-芭提雅">
				<figcaption>曼谷-芭提雅[共8张]</figcaption>
			</figure>
			<figure>
				<img src="img/s2.jpg" alt="马尔代夫双鱼岛">
				<figcaption>马尔代夫双鱼岛[共12张]</figcaption>
			</figure>
			<figure>
				<img src="img/s3.jpg" alt="海南">
				<figcaption>海南[共19张]</figcaption>
			</figure>
			<figure>
				<img src="img/s4.jpg" alt="富山-大阪-东京">
				<figcaption>富山-大阪-东京[共22张]</figcaption>
			</figure>
			<figure>
				<img src="img/s5.jpg" alt="法瑞意德">
				<figcaption>法瑞意德[共31张]</figcaption>
			</figure>
			<figure>
				<img src="img/s6.jpg" alt="巴厘岛">
				<figcaption>巴厘岛[共12张]</figcaption>
			</figure>
			<figure>
				<img src="img/s7.jpg" alt="塞舌尔迪拜">
				<figcaption>塞舌尔迪拜[共7张]</figcaption>
			</figure>
			<figure>
				<img src="img/s8.jpg" alt="花样姐姐土耳其">
				<figcaption>花样姐姐土耳其[共14张]</figcaption>
			</figure>
		</section>
		<div class="clearfix"></div>
		<div class="more">加载更多...</div>
	</div>
</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.com/ycku</li>
				<li>邮件:ycku@ycku.com</li>
				<li>地址:江苏盐城无名路123号</li>
			</ul>
		</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>
公司简介(about.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><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 class="active"><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="###">土耳其(22)</a></li>
					<li><a href="###">夏威夷(5)</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>
				<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 about">
		<section>
			<h2>关于我们</h2>
			<p>瓢城旅行社旅游网创立于2006年10月,以“让旅游更简单”为使命,为消费者提供由北京、上海、广州、深圳等64个城市出发的旅游产品预订服务,产品全面,价格透明,全年365天24小时400电话预订,并提供丰富的后续服务和保障。</p>
			<p>目前,瓢城旅行社旅游网提供8万余种旅游产品供消费者选择,涵盖跟团、自助、自驾、邮轮、酒店、签证、景区门票以及公司旅游等,已成功服务累计超过400万人次出游。</p>
			<p>同时基于瓢城旅行社旅游网全球中文景点目录以及中文旅游社区,可以更好地帮助游客了解目的地信息,妥善制定好出游计划,并方便地预订旅程中的服务项目。</p>
		</section>
		<p>&nbsp;</p>
		<section>
			<h2>联系我们</h2>
			<address>
				<ul>
					<li>瓢城旅行社股份有限公司</li>
					<li>地址:江苏省盐城市亭湖区大庆中路1234号</li>
					<li>邮编:1234567</li>
					<li>电话:010-88888888</li>
					<li>传真:010-88666666</li>
				</ul>
			</address>
		</section>
	</div>
</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.com/ycku</li>
				<li>邮件:ycku@ycku.com</li>
				<li>地址:江苏盐城无名路123号</li>
			</ul>
		</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>
style.css:
@charset "utf-8";

body,h1,h2,h3,p,ul,ol,form,fieldset,figure {
	margin: 0;
	padding: 0;
}
div,figure,img,input,button {
	box-sizing: border-box;
}
body {
	background-color: #f5f5f5;
	font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei UI", "Microsoft YaHei", SimHei, "\5B8B\4F53", simsun, sans-serif;
}
img {
	display: block;
	max-width: 100%;
}
ul,ol {
	list-style: outside none none;
}
a {
	text-decoration: none;
}
.none {
	display: none;
}
.sm-visible {
	display: none;
}
.clearfix:after {
	content:".";  
	height:0;  
	visibility:hidden;  
	display:block;  
	clear:both;  
}
#header {
	width: 100%;
	height: 70px;
	background-color: #333;
	box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
	position: fixed;
	top: 0;
	z-index: 9999;
}
#header .center {
	max-width: 1263px;
	height: 70px;
	margin: 0 auto;
}
#header .logo {
	width: 30%;
	height: 70px;
	background: url(../img/logo.png) no-repeat left center;
	text-indent: -9999px;
	float: left;
}
#header .link {
	width: 55%;
	height: 70px;
	line-height: 70px;
	color: #eee;
	float: right;
}
#header .link li {
	width: 20%;
	text-align: center;
	float: left;
}
#header .link a {
	color: #eee;
	display: block;
}
#header .link a:hover, 
#header .active a {
	background-color: #000;
}
#adver {
	max-width: 1920px;
	margin: 0 auto;
	padding: 70px 0 0 0;
	position: relative;
}
#adver .center {
	width: 40%;
	height: 60px;
	background-color: #000;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -10px 0 0 -20%;
	opacity: 0.6;
	border-radius: 10px;
}
#adver .copy {
	opacity: 1;
	background-color: transparent;
	padding: 3px 3px 0 3px;
}
#adver .search {
	width: 70%;
	height: 52px;
	background-color: #eee;
	color: #666;
	border: 1px solid #666;
	border-radius: 10px;
	font-size: 24px;
	padding: 0 10px;
	outline: none;
	display: block;
	float: left;
}
#adver .button {
	width: 30%;
	height: 54px;
	background-color: #eee;
	color: #666;
	border: 1px solid #333;
	border-left-width: 3px;
	border-radius: 10px;
	font-size: 24px;
	outline: none;
	cursor: pointer;
	font-weight: bold;
	display: block;
	float: right;
}
#tour {
	max-width: 1263px;
	height: 1150px;
	margin: 30px auto;
	text-align: center;
}
#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;
	font-size: 16px;
}
#tour .tour_title {
	height: 40px;
	overflow: hidden;
}
#tour figure {
	border: 1px solid #ddd;
	display: block;
	padding: 4px;
	border-radius: 4px;
	width: 32.4%;
	margin: 15px 0.4%;
	text-align: left;
	float: left;
	position: relative;
}
#tour figure img {
	vertical-align: middle;
}
#tour figure figcaption {
	color: #777;
	font-size: 14px;
	padding: 7px 0 0 0;
	letter-spacing: 1px;
	line-height: 1.5;
}
#tour .title {
	color: #333;
	font-weight: normal;
}
#tour .info {
	padding: 5px 0 0 0;
}
#tour .price {
	color: #f60;
	font-size: 14px;
}
#tour .price strong {
	font-size: 20px;
	letter-spacing: 1px;
}
#tour .sat {
	color: #999;
	font-size: 13px;
	font-style: normal;
	float: right;
	position: relative;
	right: 5px;
	top: 5px;
}
#tour .type {
	width: 90px;
	height: 25px;
	line-height: 25px;
	text-align: center;
	border-bottom-right-radius: 4px;
	background-color: #59b200;
	font-size: 14px;
	color: #fff;
	letter-spacing: 1px;
	position: absolute;
	top: 4px;
	left: 4px;
}
#headline {
	max-width: 1920px;
	padding: 70px 0 0 0;
	margin: 0 auto;
	position: relative;
}
#headline hgroup {
	position: absolute;
	top: 45%;
	left: 18%;	
}
#headline h2 {
	color: #eee;
	font-size: 45px;
	letter-spacing: 1px;
}
#headline h3 {
	color: #eee;
	letter-spacing: 1px;
	font-size: 24px;
}
#container {
	max-width: 1263px;
	margin: 30px auto;
}
#container .sidebar {
	width: 28%;
	float: right;
}
#container .sidebar h2 {
	height: 40px;
	line-height: 40px;
	font-size: 20px;
	font-weight: normal;
	letter-spacing: 1px;
	color: #666;
	text-indent: 10px;
	background-color: #fafafa;
	border-bottom: 1px solid #eee;
	text-align: left;
}
#container .recommend {
	border: 1px solid #eee;
	margin: 0 0 10px;
	background-color: #fff;
}
#container .tag {
	text-align: center;
	padding: 10px 0;
}
#container .tag li {
	display: inline-block;
	background-color: #eee;
	width: 100px;
	height: 35px;
	line-height: 35px;
	text-indent: 8px;
	text-align: left;
	margin:2px 0;
}
#container .tag a {
	display: block;
	color: #999;
}
#container .tag a:hover {
	color: #fff;
	background-color: #458B00;
}
#container .hot {
	border: 1px solid #eee;
	margin: 0 0 10px;
	text-align: center;
	background-color: #fff;
}
#container .figure {
	padding: 10px 0;
}
#container .hot figure {
	display: inline-block;
	color: #666;
	padding: 4px;
}
#container .treasure {
	border: 1px solid #eee;
	margin: 0 0 10px;
	background-color: #fff;
}
#container .box {
	text-align: center;
	padding: 10px 0;
}
#container .box a {
	display: inline-block;
	background-color: #eee;
	width: 150px;
	height: 40px;
	line-height: 40px;
	text-indent: 35px;
	text-align: left;
	margin:3px 0;
	color: #999;
}
#container .box a.trea1 {
	background: #eee url(../img/trea1.png) no-repeat 10px center;
}
#container .box a.trea2 {
	background: #eee url(../img/trea2.png) no-repeat 10px center;
}
#container .box a.trea3 {
	background: #eee url(../img/trea3.png) no-repeat 10px center;
}
#container .box a.trea4 {
	background: #eee url(../img/trea4.png) no-repeat 10px center;
}
.list {
	width: 71%;
	float: left;
}
.list h2 {
	height: 40px;
	line-height: 40px;
	font-size: 30px;
	font-weight: normal;
	border-bottom: 1px dashed #999;
	padding: 0 0 15px 0;
	color: #666;
}
.about p {
	font-size: 20px;
	color: #666;
	line-height: 2;
	margin: 20px 0;
}
.about address {
	font-style: normal;
	font-size: 20px;
	color: #666;
	margin: 20px 0;
	line-height: 1.6;
}
.list .more {
	width: 200px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	border: 1px solid #ccc;
	border-radius: 10px;
	font-size: 18px;
	margin: 0 auto;
	cursor: pointer;
	background-color: #fafafa;
}
.scenery figure {
	border: 1px solid #ddd;
	display: block;
	padding: 4px;
	border-radius: 4px;
	width: 32.6%;
	margin: 15px 5px 15px 0;
	text-align: left;
	float: left;
}
.scenery figcaption {
	text-align: center;
	padding: 5px 0;
	font-size: 20px;
	color: #666;
}
.ticket {
	color: #666;
}
.ticket .type {
	font-size: 20px;
	margin: 20px 0 10px 0;
	border: none;
}
.ticket .type mark {
	color: #fff;
	background-color: #458B00;
	padding: 5px 8px;
	border-radius: 4px;
	margin: 0 10px 0 16px;
}
.ticket .form {
	font-size: 20px;
	border: none;
}
.ticket .form p {
	line-height: 3;
}
.ticket .form input {
	width: 250px;
	height: 30px;
	border: 1px solid #ccc;
	background-color: #fff;
	border-radius: 4px;
	padding: 5px;
	font-size: 18px;
	color: #666;
	margin: 0 0 0 16px;
}
.ticket .left {
	width: 43%;
	display: inline-block;
}
.ticket .right {
	width: 43%;
	display: inline-block;
}
.ticket .button {
	width: 9%;
	display: inline-block;
}
.ticket .submit {
	display: inline-block;
	width: 90px;
	height: 90px;
	line-height: 90px;
	border-radius: 4px;
	background-color: #f60;
	color: #fff;
	font-size: 20px;
	text-align: center;
	border: none;
	cursor: pointer;
	position: relative;
	top: -28px;
}
.ticket .new {
	margin: 20px 0 0 0;
	font-size: 20px;
}
.ticket .new ul {
	margin: 20px 0 0 0;
}
.ticket .new li {
	display: inline-block;
	padding: 5px 10px;
}
.ticket .new li:first-child {
	padding-left: 0;
}
.ticket .new li:nth-child(2) {
	background-color: #458B00;
	border-radius: 4px;
	color: #fff;
}
.ticket table {
	width: 100%;
    border-collapse:collapse;
    margin: 20px 0 0 0;
    border: 1px solid #ddd;
}
.ticket table th {
	height: 50px;
	line-height: 50px;
	border-bottom: 1px solid #ddd;
	font-weight: normal;
}
.ticket table td {
	height: 50px;
	line-height: 50px;
	text-align: center;
	border-bottom: 1px solid #ddd;
}
.ticket table tr:nth-child(2n) {
	background-color: #fafafa;
}
.ticket table tr:hover {
	background-color: #eee;
}
.ticket .price {
	color: #f60;
}
.ticket .more2 {
	text-align: center;
	font-size: 18px;
	margin: 0 auto;
	cursor: pointer;
	display: block;
	color: #666;
}
.ticket .reserve {
	display: inline-block;
	width: 80px;
	height: 35px;
	line-height: 35px;
	border-radius: 4px;
	background-color: #f60;
	color: #fff;
	font-size: 20px;
	text-align: center;
}
.tour {
	position: relative;
	border: 1px solid #eee;
	margin: 0 0 20px 0;
	background-color: #fff;
	overflow: hidden;
}
.tour:after{  
	content:".";  
	height:0;  
	visibility:hidden;  
	display:block;  
	clear:both;  
}
.tour img {
	width: 45%;
	float: left;
}
.tour figcaption {
	width: 55%;
	float: right;
}
.tour hgroup {
	width: 300px;
}
.tour h2 {
	font-size: 24px;
	font-weight: normal;
	padding: 10px 0 10px 25px;
	color: #333;
	border: none;
}
.tour h3 {
	font-size: 16px;
	padding: 10px 0 10px 25px;
	line-height: 1.5;
	font-weight: normal;
	color: #666;
}
.tour ol {
	padding: 0 0 0 25px;
	color: #666;
	line-height: 2;
}
.tour mark {
	padding: 0px 5px;
	border-radius: 4px;
	color: #458B00;
	border: 1px solid #458B00;
	background-color: #fff;
}
.tour .buy {
	position: absolute;
	top: 55px;
	right: 30px;
}
.tour s {
	font-size: 16px;
	color: #999;
}
.tour .price {
	font-size: 20px;
	color: #f60;
}
.tour strong {
	font-size: 36px;
}
.tour .reserve {
	margin: 10px 0 0 0;
}
.tour .reserve a {
	display: inline-block;
	width: 152px;
	height: 40px;
	line-height: 40px;
	border-radius: 4px;
	background-color: #f60;
	color: #fff;
	font-size: 20px;
	text-align: center;
}
.tour .type {
	width: 90px;
	height: 25px;
	line-height: 25px;
	text-align: center;
	border-bottom-right-radius: 4px;
	background-color: #59b200;
	font-size: 14px;
	color: #fff;
	letter-spacing: 1px;
	position: absolute;
	top: 0;
	left: 0;
}
.tour .disc {
	width: 52px;
	height: 52px;
	background: url(../img/disc.png) no-repeat;
	position: absolute;
	top: 0;
	right: 0;
}
.tour .disc span {
	width: 52px;
	height: 52px;
	display: block;
	font-size: 14px;
	color: #ff7a4d;
	transform: rotate(45deg);
	text-indent: 7px;
	padding: 5px 0 0 0;
}
.tour footer {
	width: 55%;
	height: 35px;
	line-height: 35px;
	text-indent: 25px;
	color: #666;
	position: absolute;
	bottom: 0;
	background-color: #fafafa;
	letter-spacing: 1px;
}
.tour time {
	color: #458B00;
}
#footer {
	background-color: #222;
	clear:both;
	position: relative;
	top: 20px;
}
#footer .top {
	max-width: 1263px;
	height: 280px;
	margin: 0 auto;
	text-align: center;
}
#footer .version {
	color: #777;
	text-align: center;
	padding: 10px 0;
}
#footer .block {
	width: 33.33%;
	height: 320px;
	display: inline-block;
	color: #ccc;
	text-align: left;
	vertical-align: top;
	display: block;
	float: left;
}
#footer .bottom {
	padding: 15px 0;
	text-align: center;
	color: #777;
	background-color: #000;
	border-top: 1px solid #444;
}
#footer h2 {
	font-weight: normal;
	padding: 20px 0 0 20px;
	font-size: 24px;
}
#footer hr {
	width: 90%;
	border: 1px dashed #333;
}
#footer ul {
	color: #666;
	font-size: 18px;
	text-indent: 20px;
	line-height: 2;
}




/*媒体查询,参考部分Bootstrap 框架*/
/*当页面大于1200px 时,大屏幕,主要是PC 端*/
@media (min-width: 1200px) {
	
}
/*在992 和1199 像素之间的屏幕里,中等屏幕,分辨率低的PC*/
@media (min-width: 992px) and (max-width: 1199px) {
	#adver .center {
		width: 50%;
		margin: -10px 0 0 -25%;
	}
	#tour .center h2 {
		font-size: 40px;
	}
	#headline hgroup {
		left: 8%;
	}
	#headline h2 {
		font-size: 36px;
	}
	#headline h3 {
		font-size: 20px;
	}
	.sidebar {
		display: none;
	}
	.list {
		width: 100%;
		padding: 0 20px
	}
}
/*在768 和991 像素之间的屏幕里,小屏幕,主要是PAD*/
@media (min-width: 768px) and (max-width: 991px) {
	#adver .center {
		width: 60%;
		margin: -10px 0 0 -30%;
	}
	#adver .search, #adver .button {
		font-size: 20px;
	}
	#tour .center h2 {
		font-size: 35px;
	}
	#headline hgroup {
		left: 8%;
	}
	#headline h2 {
		font-size: 30px;
	}
	#headline h3 {
		font-size: 16px;
	}
	.sidebar {
		display: none;
	}
	.list {
		width: 100%;
		padding: 0 20px
	}
	.list h2 {
		font-size: 28px;
	}
	.about p,.about address {
		font-size: 18px;
	}
	.ticket .left, .ticket .right, .ticket .button {
		width: 98%;
		display: block;
	}
	.ticket .form input {
		width: 98%;
		height: 35px;
		margin: 0;
	}
	.ticket .form p {
		line-height: 2;
	}
	.ticket .submit {
		display: block;
		width: 30%;
		height: auto;
		line-height: 2;
		position: static;
		margin:10px auto;
	}
	.md-hidden {
		display: none;
	}
	.tour h2 {
		font-size: 22px;
	}
	.tour .buy {
		position: absolute;
		top: auto;
		right: auto;
		bottom: 0;
		padding: 0 0 0 25px;
	}
}
/*在480 和767 像素之间的屏幕里,超小屏幕,主要是手机*/
@media (min-width: 480px) and (max-width: 767px) {
	#header, #header .center, #header .link {
		height: 45px;
	}
	#header .logo, .sm-hidden,.sidebar,.md-hidden {
		display: none;
	}
	#header .link {
		width: 100%;
		line-height: 45px;
	}
	#adver {
		padding: 45px 0 0 0;
	}
	#adver .center {
		width: 70%;
		height: 53px;
		margin: -10px 0 0 -35%;
	}
	#adver .search, #adver .button {
		height: 45px;
		font-size: 18px;
	}
	.sm-visible {
		display: block;
	}
	#tour .center h2 {
		font-size: 30px;
	}
	#tour .center p {
		font-size: 15px;
	}
	#tour figure {
		width: 49.2%;
	}
	#headline {
		padding: 45px 0 0 0;
	}
	#headline hgroup {
		left: 8%;
	}
	#headline h2 {
		font-size: 26px;
	}
	#headline h3 {
		font-size: 14px;
	}
	.list {
		width: 100%;
		padding: 0 20px
	}
	.list h2 {
		font-size: 25px;
	}
	.about p,.about address {
		font-size: 15px;
	}
	.scenery figure {
		width: 48.2%;
	}
	.scenery figcaption {
		font-size: 18px;
	}
	.ticket .left, .ticket .right, .ticket .button {
		width: 98%;
		display: block;
	}
	.ticket .form input {
		width: 98%;
		height: 35px;
		margin: 0;
	}
	.ticket .form p {
		line-height: 2;
	}
	.ticket .submit {
		display: block;
		width: 30%;
		height: auto;
		line-height: 2;
		position: static;
		margin:10px auto;
	}
	.ticket .type, .ticket .form, .ticket .new, .ticket .form input, .ticket .submit, .ticket .reserve {
		font-size: 16px;
	}
	.tour h2 {
		font-size: 16px;
		height: 20px;
		padding: 5px 0 10px 15px;
	}
	.tour h3 {
		font-size: 14px;
		padding: 5px 0 5px 15px;
	}
	.tour .buy {
		position: absolute;
		top: auto;
		right: auto;
		bottom: 0;
		padding: 0 0 0 15px;
	}
	.tour .buy strong {
		font-size: 18px;
	}
}
/*在小于480 像素的屏幕,微小屏幕,更低分辨率的手机*/
@media (max-width: 479px) {
	#header, #header .center, #header .link {
		height: 45px;
	}
	#header .logo, .xs-hidden, .sm-hidden, .sidebar, .md-hidden  {
		display: none;
	}
	#header .link {
		width: 100%;
		line-height: 45px;
	}
	#header .link li {
		width: 25%;
	}
	#adver {
		padding: 45px 0 0 0;
	}
	#adver .center {
		width: 80%;
		height: 48px;
		margin: -10px 0 0 -40%;
	}
	#adver .search, #adver .button {
		height: 40px;
		font-size: 16px;
	}
	.sm-visible {
		display: block;
	}
	#footer .bottom, #footer .version {
		font-size: 13px;
	}
	#tour .center h2 {
		font-size: 26px;
	}
	#tour .center p {
		font-size: 14px;
	}
	#tour figure {
		width: 99%;
	}
	#headline hgroup {
		left: 8%;
	}
	#headline h2 {
		font-size: 20px;
	}
	#headline h3 {
		font-size: 12px;
	}
	#headline {
		padding: 45px 0 0 0;
	}
	.list {
		width: 100%;
		padding: 0 20px
	}
	.list h2 {
		font-size: 20px;
	}
	.about p,.about address {
		font-size: 14px;
	}
	.scenery figure {
		width: 99%;
	}
	.scenery figcaption {
		font-size: 16px;
	}
	.ticket .left, .ticket .right, .ticket .button {
		width: 98%;
		display: block;
	}
	.ticket .form input {
		width: 98%;
		height: 35px;
		margin: 0;
	}
	.ticket .form p {
		line-height: 2;
	}
	.ticket .submit {
		display: block;
		width: 30%;
		height: auto;
		line-height: 2;
		position: static;
		margin:10px auto;
	}
	.ticket .type, .ticket .form, .ticket .new, .ticket .form input, .ticket .submit, .ticket .reserve {
		font-size: 14px;
	}
	.ticket .reserve {
		display: inline-block;
		width: auto;
		height: auto;
		line-height: 1;
		border-radius: 4px;
		background-color: #f60;
		color: #fff;
		padding: 8px;
		text-align: center;
	}
	.tour h2 {
		font-size: 16px;
		height: 15px;
		padding: 5px 0 5px 15px;
		line-height: 15px;
	}
	.tour h3 {
		font-size: 14px;
		padding: 5px 0 5px 15px;
		height: 15px;
		overflow: hidden;
	}
	.tour .buy {
		position: absolute;
		top: auto;
		right: auto;
		bottom: 0;
		padding: 0 0 0 15px;
	}
	.tour .buy strong,.tour .buy .price s, .tour .buy .price {
		font-size: 15px;
	}
}
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页