HTML5项目实战之旅行社网站——兼容响应式布局

素颜马尾好姑娘i 2023-03-01 09:46 29阅读 0赞

##### 主页面（index.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）： #####

##### 风景欣赏（scenery.html）： #####

##### 公司简介（about.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;
    	}
    }