html静态页面案例
初学者的旅游小网站案例
·
前言
开始学习前端时适用的静态网页小案例 html+css
一、效果
二、页面分布
分为五个基础页面
index.html
information.html
scenery.html
ticket.html
about.html
1.index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<header id="header">
<div class="center">
<div class="logo"></div>
<nav class="link">
<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 copy">
<input type="text" class="search" placeholder="请输入旅游景点或城市">
<button class="button">搜索</button>
</div>
</div>
<!-- main -->
<div id="tour">
<section class="center">
<h2>热门旅游</h2>
<p>国内旅游、国外旅游、自助旅游、自驾旅游、油轮签证、主题旅游等各种最新热门旅游推荐</p>
</section>
<figure>
<img src="img/tour6.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/tour6.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/tour6.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/tour6.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/tour6.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/tour6.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/tour6.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/tour6.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/tour6.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>
</div>
<footer id="footer">
<div class="top xs-hidden">
<div class="block left">
<h2>合作伙伴</h2>
<hr>
<ul>
<li><a href="#">途牛旅游网</a></li>
<li><a href="#">驴妈妈旅游网</a></li>
<li><a href="#">携程旅游</a></li>
<li><a href="#">中国青年旅行社</a></li>
</ul>
</div>
<div class="block center">
<h2>旅游FAQ</h2>
<hr>
<ul>
<li><a href="#">旅游合同签订方式？</a></li>
<li><a href="#">儿童价是基于什么制定的？</a></li>
<li><a href="#">旅游的线路品质怎么界定的？</a></li>
<li><a href="#">单房差是什么？</a></li>
<li><a href="#">旅游保险有那些种类？</a></li>
</ul>
</div>
<div class="block right">
<h2>联系方式</h2>
<hr>
<ul>
<li><a href="#">微博：weibo.com/ycku</a></li>
<li><a href="#">邮件：ycku@ycku.com</a></li>
<li><a href="#">地址：江苏盐城无名路123号</a></li>
</ul>
</div>
</div>
<div class="clearfix"></div>
<div class="version sm-visible">
客户端 | 触屏版 | 电脑版
</div>
<div class="bottom">
Copyright © YCKU 仙草蜜旅行社 | 苏ICP备120110119号 <span class="xs-hidden">| 旅行社经营许可证：L-YC-BK12345</span>
</div>
</footer>
</body>
</html>
2.information.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<header id="header">
<div class="center">
<div class="logo"></div>
<nav class="link">
<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>
<!-- main -->
<div id="container">
<!-- aside -->
<aside class="aside">
<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/hot6.jpg" alt="">
<figcaption>曼谷-芭提雅6日游</figcaption>
</figure>
<figure>
<img src="img/hot8.jpg" alt="">
<figcaption>曼谷-芭提雅6日游</figcaption>
</figure>
<figure>
<img src="img/hot8.jpg" alt="">
<figcaption>曼谷-芭提雅6日游</figcaption>
</figure>
<figure>
<img src="img/hot8.jpg" alt="">
<figcaption>曼谷-芭提雅6日游</figcaption>
</figure>
<figure>
<img src="img/hot8.jpg" alt="">
<figcaption>曼谷-芭提雅6日游</figcaption>
</figure>
<figure>
<img src="img/hot8.jpg" alt="">
<figcaption>曼谷-芭提雅6日游</figcaption>
</figure>
<figure>
<img src="img/hot8.jpg" alt="">
<figcaption>曼谷-芭提雅6日游</figcaption>
</figure>
<figure>
<img src="img/hot8.jpg" alt="">
<figcaption>曼谷-芭提雅6日游</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>旅游资讯</h2>
<figure class="tour">
<img src="img/tour6.jpg" alt="">
<figcaption>
<article>
<header>
<hgroup>
<h2>曼谷-芭提雅6日游</h2>
<h3>包团特惠，超丰富景点，升级1晚国五，无自费，赠送600元成人券...</h3>
</hgroup>
</header>
<ol class="xs-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 xs-hidden"><a href="#">立即抢购</a></div>
</div>
<div class="type">国内长线</div>
<div class="disc"><span>4.7折</span></div>
<footer class="xs-hidden">本团游由瓢城旅行社赞助提供，截止于<time>2015-10-10</time></footer>
</article>
</figcaption>
</figure>
<figure class="tour">
<img src="img/tour6.jpg" alt="">
<figcaption>
<article>
<header>
<hgroup>
<h2>曼谷-芭提雅6日游</h2>
<h3>包团特惠，超丰富景点，升级1晚国五，无自费，赠送600元成人券...</h3>
</hgroup>
</header>
<ol class="xs-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 xs-hidden"><a href="#">立即抢购</a></div>
</div>
<div class="type">国内长线</div>
<div class="disc"><span>4.7折</span></div>
<footer class="xs-hidden">本团游由瓢城旅行社赞助提供，截止于<time>2015-10-10</time></footer>
</article>
</figcaption>
</figure>
<figure class="tour">
<img src="img/tour6.jpg" alt="">
<figcaption>
<article>
<header>
<hgroup>
<h2>曼谷-芭提雅6日游</h2>
<h3>包团特惠，超丰富景点，升级1晚国五，无自费，赠送600元成人券...</h3>
</hgroup>
</header>
<ol class="xs-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 xs-hidden"><a href="#">立即抢购</a></div>
</div>
<div class="type">国内长线</div>
<div class="disc"><span>4.7折</span></div>
<footer class="xs-hidden">本团游由瓢城旅行社赞助提供，截止于<time>2015-10-10</time></footer>
</article>
</figcaption>
</figure>
<figure class="tour">
<img src="img/tour6.jpg" alt="">
<figcaption>
<article>
<header>
<hgroup>
<h2>曼谷-芭提雅6日游</h2>
<h3>包团特惠，超丰富景点，升级1晚国五，无自费，赠送600元成人券...</h3>
</hgroup>
</header>
<ol class="xs-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 xs-hidden"><a href="#">立即抢购</a></div>
</div>
<div class="type">国内长线</div>
<div class="disc"><span>4.7折</span></div>
<footer class="xs-hidden">本团游由瓢城旅行社赞助提供，截止于<time>2015-10-10</time></footer>
</article>
</figcaption>
</figure>
<figure class="tour">
<img src="img/tour6.jpg" alt="">
<figcaption>
<article>
<header>
<hgroup>
<h2>曼谷-芭提雅6日游</h2>
<h3>包团特惠，超丰富景点，升级1晚国五，无自费，赠送600元成人券...</h3>
</hgroup>
</header>
<ol class="xs-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 xs-hidden"><a href="#">立即抢购</a></div>
</div>
<div class="type">国内长线</div>
<div class="disc"><span>4.7折</span></div>
<footer class="xs-hidden">本团游由瓢城旅行社赞助提供，截止于<time>2015-10-10</time></footer>
</article>
</figcaption>
</figure>
<figure class="tour">
<img src="img/tour6.jpg" alt="">
<figcaption>
<article>
<header>
<hgroup>
<h2>曼谷-芭提雅6日游</h2>
<h3>包团特惠，超丰富景点，升级1晚国五，无自费，赠送600元成人券...</h3>
</hgroup>
</header>
<ol class="xs-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 xs-hidden"><a href="#">立即抢购</a></div>
</div>
<div class="type">国内长线</div>
<div class="disc"><span>4.7折</span></div>
<footer class="xs-hidden">本团游由瓢城旅行社赞助提供，截止于<time>2015-10-10</time></footer>
</article>
</figcaption>
</figure>
<figure class="tour">
<img src="img/tour6.jpg" alt="">
<figcaption>
<article>
<header>
<hgroup>
<h2>曼谷-芭提雅6日游</h2>
<h3>包团特惠，超丰富景点，升级1晚国五，无自费，赠送600元成人券...</h3>
</hgroup>
</header>
<ol class="xs-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 xs-hidden"><a href="#">立即抢购</a></div>
</div>
<div class="type">国内长线</div>
<div class="disc"><span>4.7折</span></div>
<footer class="xs-hidden">本团游由瓢城旅行社赞助提供，截止于<time>2015-10-10</time></footer>
</article>
</figcaption>
</figure>
<figure class="tour">
<img src="img/tour6.jpg" alt="">
<figcaption>
<article>
<header>
<hgroup>
<h2>曼谷-芭提雅6日游</h2>
<h3>包团特惠，超丰富景点，升级1晚国五，无自费，赠送600元成人券...</h3>
</hgroup>
</header>
<ol class="xs-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 xs-hidden"><a href="#">立即抢购</a></div>
</div>
<div class="type">国内长线</div>
<div class="disc"><span>4.7折</span></div>
<footer class="xs-hidden">本团游由瓢城旅行社赞助提供，截止于<time>2015-10-10</time></footer>
</article>
</figcaption>
</figure>
<figure class="tour">
<img src="img/tour6.jpg" alt="">
<figcaption>
<article>
<header>
<hgroup>
<h2>曼谷-芭提雅6日游</h2>
<h3>包团特惠，超丰富景点，升级1晚国五，无自费，赠送600元成人券...</h3>
</hgroup>
</header>
<ol class="xs-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 xs-hidden"><a href="#">立即抢购</a></div>
</div>
<div class="type">国内长线</div>
<div class="disc"><span>4.7折</span></div>
<footer class="xs-hidden">本团游由瓢城旅行社赞助提供，截止于<time>2015-10-10</time></footer>
</article>
</figcaption>
</figure>
</div>
</div>
<!-- footer -->
<footer id="footer">
<div class="top xs-hidden">
<div class="block left">
<h2>合作伙伴</h2>
<hr>
<ul>
<li><a href="#">途牛旅游网</a></li>
<li><a href="#">驴妈妈旅游网</a></li>
<li><a href="#">携程旅游</a></li>
<li><a href="#">中国青年旅行社</a></li>
</ul>
</div>
<div class="block center">
<h2>旅游FAQ</h2>
<hr>
<ul>
<li><a href="#">旅游合同签订方式？</a></li>
<li><a href="#">儿童价是基于什么制定的？</a></li>
<li><a href="#">旅游的线路品质怎么界定的？</a></li>
<li><a href="#">单房差是什么？</a></li>
<li><a href="#">旅游保险有那些种类？</a></li>
</ul>
</div>
<div class="block right">
<h2>联系方式</h2>
<hr>
<ul>
<li><a href="#">微博：weibo.com/ycku</a></li>
<li><a href="#">邮件：ycku@ycku.com</a></li>
<li><a href="#">地址：江苏盐城无名路123号</a></li>
</ul>
</div>
</div>
<div class="clearfix"></div>
<div class="version sm-visible">
客户端 | 触屏版 | 电脑版
</div>
<div class="bottom">
Copyright © YCKU 仙草蜜旅行社 | 苏ICP备120110119号 <span class="xs-hidden">| 旅行社经营许可证：L-YC-BK12345</span>
</div>
</footer>
</body>
</html>
3.scenery.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./css/information.css">
<link rel="stylesheet" href="./css/public.css">
</head>
<body>
<header id="header">
<div class="center">
<div class="logo"></div>
<nav class="link">
<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="active 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>
<!-- main -->
<div id="container">
<!-- aside -->
<aside class="aside">
<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/hot6.jpg" alt="">
<figcaption>曼谷-芭提雅6日游</figcaption>
</figure>
<figure>
<img src="img/hot8.jpg" alt="">
<figcaption>曼谷-芭提雅6日游</figcaption>
</figure>
<figure>
<img src="img/hot8.jpg" alt="">
<figcaption>曼谷-芭提雅6日游</figcaption>
</figure>
<figure>
<img src="img/hot8.jpg" alt="">
<figcaption>曼谷-芭提雅6日游</figcaption>
</figure>
<figure>
<img src="img/hot8.jpg" alt="">
<figcaption>曼谷-芭提雅6日游</figcaption>
</figure>
<figure>
<img src="img/hot8.jpg" alt="">
<figcaption>曼谷-芭提雅6日游</figcaption>
</figure>
<figure>
<img src="img/hot8.jpg" alt="">
<figcaption>曼谷-芭提雅6日游</figcaption>
</figure>
<figure>
<img src="img/hot8.jpg" alt="">
<figcaption>曼谷-芭提雅6日游</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">
<h2>风景欣赏</h2>
<figure>
<img src="img/s4.jpg" alt="">
<figcaption>
<p>富山-大版-东京[共9张]</p>
</figcaption>
</figure>
<figure>
<img src="img/s4.jpg" alt="">
<figcaption>
<p>富山-大版-东京[共9张]</p>
</figcaption>
</figure>
<figure>
<img src="img/s4.jpg" alt="">
<figcaption>
<p>富山-大版-东京[共9张]</p>
</figcaption>
</figure>
<figure>
<img src="img/s4.jpg" alt="">
<figcaption>
<p>富山-大版-东京[共9张]</p>
</figcaption>
</figure>
<figure>
<img src="img/s4.jpg" alt="">
<figcaption>
<p>富山-大版-东京[共9张]</p>
</figcaption>
</figure>
<figure>
<img src="img/s4.jpg" alt="">
<figcaption>
<p>富山-大版-东京[共9张]</p>
</figcaption>
</figure>
<figure>
<img src="img/s4.jpg" alt="">
<figcaption>
<p>富山-大版-东京[共9张]</p>
</figcaption>
</figure>
<figure>
<img src="img/s4.jpg" alt="">
<figcaption>
<p>富山-大版-东京[共9张]</p>
</figcaption>
</figure>
<figure>
<img src="img/s4.jpg" alt="">
<figcaption>
<p>富山-大版-东京[共9张]</p>
</figcaption>
</figure>
<div class="more">加载更多...</div>
</div>
</div>
<!-- footer -->
<footer id="footer">
<div class="top">
<div class="block left">
<h2>合作伙伴</h2>
<hr>
<ul>
<li><a href="#">途牛旅游网</a></li>
<li><a href="#">驴妈妈旅游网</a></li>
<li><a href="#">携程旅游</a></li>
<li><a href="#">中国青年旅行社</a></li>
</ul>
</div>
<div class="block center">
<h2>旅游FAQ</h2>
<hr>
<ul>
<li><a href="#">旅游合同签订方式？</a></li>
<li><a href="#">儿童价是基于什么制定的？</a></li>
<li><a href="#">旅游的线路品质怎么界定的？</a></li>
<li><a href="#">单房差是什么？</a></li>
<li><a href="#">旅游保险有那些种类？</a></li>
</ul>
</div>
<div class="block right">
<h2>联系方式</h2>
<hr>
<ul>
<li><a href="#">微博：weibo.com/ycku</a></li>
<li><a href="#">邮件：ycku@ycku.com</a></li>
<li><a href="#">地址：江苏盐城无名路123号</a></li>
</ul>
</div>
</div>
<div class="clearfix"></div>
<div class="bottom">
Copyright © YCKU 仙草蜜旅行社 | 苏ICP备120110119号 | 旅行社经营许可证：L-YC-BK12345
</div>
</footer>
</body>
</html>
4.ticket.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<header id="header">
<div class="center">
<div class="logo"></div>
<nav class="link">
<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>
<!-- main -->
<div id="container">
<!-- aside -->
<aside class="aside">
<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/hot6.jpg" alt="">
<figcaption>曼谷-芭提雅6日游</figcaption>
</figure>
<figure>
<img src="img/hot8.jpg" alt="">
<figcaption>曼谷-芭提雅6日游</figcaption>
</figure>
<figure>
<img src="img/hot8.jpg" alt="">
<figcaption>曼谷-芭提雅6日游</figcaption>
</figure>
<figure>
<img src="img/hot8.jpg" alt="">
<figcaption>曼谷-芭提雅6日游</figcaption>
</figure>
<figure>
<img src="img/hot8.jpg" alt="">
<figcaption>曼谷-芭提雅6日游</figcaption>
</figure>
<figure>
<img src="img/hot8.jpg" alt="">
<figcaption>曼谷-芭提雅6日游</figcaption>
</figure>
<figure>
<img src="img/hot8.jpg" alt="">
<figcaption>曼谷-芭提雅6日游</figcaption>
</figure>
<figure>
<img src="img/hot8.jpg" alt="">
<figcaption>曼谷-芭提雅6日游</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="from_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="from_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">￥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">￥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">￥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">￥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">￥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">￥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">￥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">￥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">￥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">￥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">￥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">￥745</td>
<td class="xs-hidden">￥50</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 -->
<footer id="footer">
<div class="top xs-hidden">
<div class="block left">
<h2>合作伙伴</h2>
<hr>
<ul>
<li><a href="#">途牛旅游网</a></li>
<li><a href="#">驴妈妈旅游网</a></li>
<li><a href="#">携程旅游</a></li>
<li><a href="#">中国青年旅行社</a></li>
</ul>
</div>
<div class="block center">
<h2>旅游FAQ</h2>
<hr>
<ul>
<li><a href="#">旅游合同签订方式？</a></li>
<li><a href="#">儿童价是基于什么制定的？</a></li>
<li><a href="#">旅游的线路品质怎么界定的？</a></li>
<li><a href="#">单房差是什么？</a></li>
<li><a href="#">旅游保险有那些种类？</a></li>
</ul>
</div>
<div class="block right">
<h2>联系方式</h2>
<hr>
<ul>
<li><a href="#">微博：weibo.com/ycku</a></li>
<li><a href="#">邮件：ycku@ycku.com</a></li>
<li><a href="#">地址：江苏盐城无名路123号</a></li>
</ul>
</div>
</div>
<div class="clearfix"></div>
<div class="version sm-visible">
客户端 | 触屏版 | 电脑版
</div>
<div class="bottom">
Copyright © YCKU 仙草蜜旅行社 | 苏ICP备120110119号 <span class="xs-hidden">| 旅行社经营许可证：L-YC-BK12345</span>
</div>
</footer>
</body>
</html>
5.about.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<header id="header">
<div class="center">
<div class="logo"></div>
<nav class="link">
<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>
<!-- main -->
<div id="container">
<!-- aside -->
<aside class="aside">
<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/hot6.jpg" alt="">
<figcaption>曼谷-芭提雅6日游</figcaption>
</figure>
<figure>
<img src="img/hot8.jpg" alt="">
<figcaption>曼谷-芭提雅6日游</figcaption>
</figure>
<figure>
<img src="img/hot8.jpg" alt="">
<figcaption>曼谷-芭提雅6日游</figcaption>
</figure>
<figure>
<img src="img/hot8.jpg" alt="">
<figcaption>曼谷-芭提雅6日游</figcaption>
</figure>
<figure>
<img src="img/hot8.jpg" alt="">
<figcaption>曼谷-芭提雅6日游</figcaption>
</figure>
<figure>
<img src="img/hot8.jpg" alt="">
<figcaption>曼谷-芭提雅6日游</figcaption>
</figure>
<figure>
<img src="img/hot8.jpg" alt="">
<figcaption>曼谷-芭提雅6日游</figcaption>
</figure>
<figure>
<img src="img/hot8.jpg" alt="">
<figcaption>曼谷-芭提雅6日游</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> </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 -->
<footer id="footer">
<div class="top xs-hidden">
<div class="block left">
<h2>合作伙伴</h2>
<hr>
<ul>
<li><a href="#">途牛旅游网</a></li>
<li><a href="#">驴妈妈旅游网</a></li>
<li><a href="#">携程旅游</a></li>
<li><a href="#">中国青年旅行社</a></li>
</ul>
</div>
<div class="block center">
<h2>旅游FAQ</h2>
<hr>
<ul>
<li><a href="#">旅游合同签订方式？</a></li>
<li><a href="#">儿童价是基于什么制定的？</a></li>
<li><a href="#">旅游的线路品质怎么界定的？</a></li>
<li><a href="#">单房差是什么？</a></li>
<li><a href="#">旅游保险有那些种类？</a></li>
</ul>
</div>
<div class="block right">
<h2>联系方式</h2>
<hr>
<ul>
<li><a href="#">微博：weibo.com/ycku</a></li>
<li><a href="#">邮件：ycku@ycku.com</a></li>
<li><a href="#">地址：江苏盐城无名路123号</a></li>
</ul>
</div>
</div>
<div class="clearfix"></div>
<div class="version sm-visible">
客户端 | 触屏版 | 电脑版
</div>
<div class="bottom">
Copyright © YCKU 仙草蜜旅行社 | 苏ICP备120110119号 <span class="xs-hidden">| 旅行社经营许可证：L-YC-BK12345</span>
</div>
</footer>
</body>
</html>
css部分
*{
padding: 0;
margin: 0;
}
div,
figure,
img,
input,
button {
box-sizing: border-box;
}
body{
background-color: #f5f5f5;
/* font-family: "Helvetica Neue",Arial, Helvetica; */
}
ul{
list-style: outside none none;
}
a{
text-decoration: none;
}
img {
display: block;
max-width: 100%;
}
/* index */
#tour{
max-width: 1263px;
height: auto;
margin: 30px auto;
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: center;
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;
float: left;
}
#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;
letter-spacing: 1px;
position: absolute;
color: #fff;
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 .aside{
width: 28%;
float: right;
}
.list{
width: 71%;
float: left;
/* padding: 30px 0 0 80px; */
}
.list h2{
height: 40px;
line-height: 40px;
font-size: 30px;
font-weight: normal;
border-bottom: 1px dashed #999;
padding: 0 0 15px 0;
margin: 0 0 20px 0;
color: #666;
}
.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 5px 25px;
color: #333;
border: none;
}
.tour h3{
font-size: 16px;
padding: 0 0 10px 25px;
line-height: 1.5;
font-weight: normal;
color: #666;
}
.tour ol{
padding: 0 0 0 25px;
color: #666;
line-height: 2;
list-style: none;
}
.tour mark{
background-color: #fff;
padding: 0 5px;
border-radius: 4px;
color: #458B00;
border: 1px solid #458B00;
}
.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;
text-align: center;
font-size: 20px;
color: #fff;
}
.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 span{
width: 52px;
height: 52px;
display: block;
font-size: 14px;
color: #ff7a4d;
transform: rotate(45deg);
position: absolute;
top: 7px;
right: 0;
text-indent: 2px;
padding: 5px 0 0 0;
}
.tour time{
color: #458B00;
}
.tour footer{
width: 55%;
height: 35px;
line-height: 35px;
text-indent: 25px;
color: #666;
position: absolute;
bottom: 0;
background-color: #fafafa;
letter-spacing: 1px;
}
#container .aside 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;
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;
}
/* ticket.html */
.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,
.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 table td:hover{
cursor: pointer;
}
.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: pink;
color: #fff;
/* overflow: hidden; */
}
/* about.html */
.about p{
font-size: 20px;
color: #666;
line-height: 2;
margin: 20px 0;
}
.about address{
font-style: normal;
color: #666;
font-size: 20px;
margin: 20px 0;
line-height: 1.6;
}
/* scenery.html */
.scenery figure{
padding: 4px;
border: 1px solid #ddd;
width: 32.6%;
margin: 5px 5px 15px 0;
float: left;
text-align: center;
/* display: block; */
}
.scenery figcaption{
text-align: center;
color: #666;
font-size: 20px;
padding: 5px 0;
}
.scenery .more{
width: 200px;
height: 50px;
line-height: 50px;
border: 1px solid #ccc;
background-color: #fafafa;
font-size: 18px;
border-radius: 10px;
text-align: center;
cursor: pointer;
margin: 0 auto;
clear: both;
}
.sm-visible{
color: #666;
text-align: center;
display: none;
}
/* 当页面大于1200px时 */
@media (min-width: 1200px){
}
/* 当页面位于992-1199px时 */
@media (min-width: 992px) and (max-width: 1199px) {
#container .aside{
display: none;
}
#container .list{
width: 99%;
padding: 0 20px;
}
}
/* 当页面位于768-991px时 */
@media (min-width: 768px) and (max-width: 992px) {
.xs-hidden,#container .aside{
display: none;
}
#header .link ul li{
width: 25%;
}
#headline hgroup{
left: 8%;
}
#headline h2{
font-size: 26px;
}
#headline h3{
font-size: 14px;
}
.sm-visible{
display: block;
height: 36px;
line-height: 36px;
}
#footer .bottom,#footer .version{
font-size: 18px;
}
#container .list{
width: 99%;
padding: 0 20px;
}
#container .tour .buy {
position: absolute;
top: auto;
right: auto;
bottom: 0;
padding: 0 0 0 25px;
}
#container .tour .buy strong{
font-size: 32px;
}
.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;
}
}
/* 当页面位于480-767px时 */
@media (min-width: 480px) and (max-width: 768px) {
#header,#header .center,#header .link{
height: 45px;
}
#header .logo,.xs-hidden,#container .aside{
display: none;
}
/* #header .logo{
display: none;
}
.xs-hidden{
display: none;
} */
#header .link{
width: 100%;
line-height: 45px;
}
#header .link ul li{
width: 25%;
}
#adver,#headline{
padding: 45px 0 0 0;
}
#adver .center{
width: 70%;
height: 52px;
margin: -10px 0 0 -15%;
}
#adver .search,#adver .button{
font-size: 16px;
height: 40px;
}
#tour .center h2{
font-size: 30px;
}
#tour .center p{
font-size: 16px;
}
.sm-visible{
display: block;
height: 38px;
line-height: 38px;
}
#footer .bottom,#footer .version{
font-size: 14px;
}
#tour figure{
width: 49%;
}
#headline hgroup{
left: 8%;
}
#headline h2{
font-size: 26px;
}
#headline h3{
font-size: 14px;
}
#container .list{
width: 99%;
padding: 0 20px;
}
#container .tour .buy {
position: absolute;
top: auto;
right: auto;
bottom: 0;
padding: 0 0 0 25px;
}
#container .list h2{
font-size: 25px;
}
#container .tour h2{
font-size: 16px;
height: 20px;
padding: 5px 0 0 15px;
}
#container .tour h3{
font-size: 14px;
padding: 5px 0 0 15px;
margin: -10px 0 0 0;
}
#container .tour .buy strong{
font-size: 20px;
}
.about p,.about address {
font-size: 15px;
}
/* scenery|ticket */
.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;
}
}
/* 当页面小于480px时 */
@media (max-width: 480px) {
#header,#header .center,#header .link{
height: 45px;
}
#header .logo,.xs-hidden,#container .aside{
display: none;
}
#header .link{
width: 100%;
line-height: 45px;
}
#header .link ul li{
width: 25%;
}
#adver,#headline{
padding: 45px 0 0 0;
}
#adver .center{
width: 80%;
height: 48px;
margin: -10px 0 0 -20%;
}
#adver .search,#adver .button{
font-size: 16px;
height: 40px;
}
#tour .center h2{
font-size: 26px;
}
#tour .center p{
font-size: 14px;
}
.sm-visible{
display: block;
height: 36px;
line-height: 36px;
}
#footer .bottom,#footer .version{
font-size: 13px;
}
#tour figure{
width: 99%;
}
#headline hgroup{
left: 8%;
}
#headline h2{
font-size: 20px;
}
#headline h3{
font-size: 12px;
}
#container .list{
width: 99%;
padding: 0 20px;
}
#container .tour .buy {
position: absolute;
top: auto;
right: auto;
bottom: 0;
padding: 0 0 0 25px;
}
#container .list h2{
font-size: 20px;
}
#container .tour h2{
font-size: 14px;
height: 15px;
line-height: 15px;
padding: 5px 0 0 15px;
}
#container .tour h3{
font-size: 12px;
padding: 5px 0 0 15px;
margin: -18px 0 0 0;
height: 15px;
overflow: hidden;
}
#container .tour .buy strong{
font-size: 16px;
}
#container .tour .disc{
display: none;
}
#container .tour .type{
height: 20px;
width: 72px;
font-size: 10px;
line-height: 20px;
}
#container .tour .buy .price s{
font-size: 12px;
}
.about p,.about address {
font-size: 14px;
}
/* scenery|ticket */
.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;
}
}
总结
代码量不大 做起来也比较简单 适合初学作为案例使用
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
6
0- 0
已为社区贡献1条内容
所有评论(0)