HTML5项目实战之旅行社网站——移动端流体布局
主页面（index.html）：
瓢城旅行社-移动端
热门旅游
最新的各种热门旅游资讯的推荐！
<曼谷-芭提雅6 日游>
包团特惠，超丰富景点
满意度 77%
¥ 2864 起
<马尔代夫双鱼岛Olhuveli4 晚6 日自助游>
上海出发，机+酒包含:早晚餐+快艇
满意度 97%
¥ 8039 起
<海南双飞5 日游>
含盐城接送，全程挂牌四星酒店
满意度90%
¥ 2709 起
<富山-大阪-东京8 日游>
暑期亲子，2 天自由，无导游安排
满意度97%
¥ 9499 起
<法瑞意德12 日游>
4 至5 星，金色列车，少女峰
满意度97%
¥ 9199 起
<巴厘岛6 日半自助游>
蓝梦出海，独栋别墅，悦榕庄下午茶
满意度95%
¥ 6488 起
<塞舌尔迪拜9 日自助游>
一游两国，4 晚塞舌尔，2 晚迪拜
满意度100%
¥ 9669 起
<花样姐姐土耳其9 日或10 日游>
最高立减3000！中餐六菜一汤
满意度93%
¥ 9999 起
旅游资讯（information.html）：
瓢城旅行社-移动端
旅游资讯
介绍各种最新旅游信息、资讯要闻、景点攻略等
热门旅游
曼谷-芭提雅6日游
包团特惠，超丰富景点，升级1 晚国五，无自费，赠送600 元
¥2864
马尔代夫6日自助游
双鱼岛Olhuveli4晚，上海出发，机+酒 包含:早晚餐+快艇...
¥8039
海南双飞5日游
含盐城接送，全程挂牌四星酒店，一价全含，零自费“自费项目”...
¥2709
富山-大阪-东京8日游
暑期亲子，2天自由，无导游安排自费项目，全程不强迫购物...
¥9499
法瑞意德12日游
4至5星，金色列车，少女峰，部分THE MALL...
¥9199
巴厘岛6日半自助游
蓝梦出海，独栋别墅，悦榕庄下午茶，纯玩...
¥6488
塞舌尔迪拜9日自助游
一游两国，4晚塞舌尔，2晚迪拜，香港EK往返...
¥9669
花样姐姐土耳其9日游
最高立减3000！中餐六菜一汤+土耳其当地美食满足您挑剔味蕾...
¥9999
机票订购（ticket.html）：
瓢城旅行社-移动端
票务订购
各种飞机票、火车票、汽车票和轮渡票的订购服务
最新机票
- 热门城市：
- 北京
- 上海
- 广州
- 深圳
- 重庆
- 成都
- 杭州
- 南京
路线
日期
价格
税费
餐食
航班
预定
北京-成都
10-15
¥745
¥50
有
春秋航空
预定
北京-上海
10-15
¥479
¥45
无
南方航空
预定
北京-深圳
10-15
¥561
¥52
有
西部航空
预定
北京-杭州
10-15
¥378
¥36
无
天津航空
预定
北京-广州
10-15
¥612
¥44
有
首都航空
预定
北京-重庆
10-15
¥428
¥62
有
东方航空
预定
北京-昆明
10-15
¥509
¥35
无
厦门航空
预定
北京-厦门
10-15
¥893
¥73
有
深圳航空
预定
北京-长沙
10-15
¥663
¥46
无
四川航空
预定
加载更多航班...
公司简介（about.html）：
瓢城旅行社-移动端
公司简介
公司的发展历程、获得荣誉以及联系方式
关于我们
瓢城旅行社旅游网创立于2006年10月，以“让旅游更简单”为使命，为消费者提供由北京、上海、广州、深圳等64个城市出发的旅游产品预订服务，产品全面，价格透明，全年365天24小时400电话预订，并提供丰富的后续服务和保障。
目前，瓢城旅行社旅游网提供8万余种旅游产品供消费者选择，涵盖跟团、自助、自驾、邮轮、酒店、签证、景区门票以及公司旅游等，已成功服务累计超过400万人次出游。
同时基于瓢城旅行社旅游网全球中文景点目录以及中文旅游社区，可以更好地帮助游客了解目的地信息，妥善制定好出游计划，并方便地预订旅程中的服务项目。
联系我们
- 瓢城旅行社股份有限公司
- 地址：江苏省盐城市亭湖区大庆中路1234号
- 邮编：1234567
- 电话：010-88888888
- 传真：010-88666666
style.css：
@charset "utf-8";
html {
font-size: 625%;
}
body,h1,h2,h3,h4,p,ul,ol,form,fieldset,figure {
margin: 0;
padding: 0;
}
body {
background-color: #fff;
font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei UI", "Microsoft YaHei", SimHei, "\5B8B\4F53", simsun, sans-serif;
font-size: .16rem;
}
ul,ol {
list-style: outside none none;
}
a {
text-decoration: none;
}
img {
display: block;
max-width: 100%;
}
div,figure,figcaption {
box-sizing: border-box;
}
.none {
display: none;
}
.clearfix:after {
content: '.';
display: block;
clear: both;
height: 0;
visibility: hidden;
}
#header {
width: 100%;
height: .45rem;
background-color: #333;
font-size: 0.16rem;
position: fixed;
top: 0;
z-index: 9999;
}
#header .link {
height: .45rem;
line-height: .45rem;
color: #eee;
}
#header .link li {
width: 25%;
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: 6.4rem;
margin: 0 auto;
padding: .45rem 0 0 0;
}
#footer {
max-width: 6.4rem;
background-color: #222;
color: #777;
margin: 0 auto;
text-align: center;
padding: .1rem 0;
font-size: .16rem;
}
#footer .top {
padding: 0 0 .05rem 0;
}
#search {
max-width: 6.4rem;
height: .33rem;
margin: 0 auto;
background-color: #ddd;
padding: .03rem 0 0 0;
position: relative;
}
#search .search {
width: 95%;
height: .27rem;
border-radius: .04rem;
border: none;
outline: none;
background-color: #fff;
display: block;
margin: 0 auto;
font-size: .14rem;
padding: 0 .05rem;
}
#search .button {
display: block;
outline: none;
width: .5rem;
height: .27rem;
color: #666;
border: none;
background-color: #eee;
border-top-right-radius: .04rem;
border-bottom-right-radius: .04rem;
font-size: .14rem;
position: absolute;
top: .03rem;
right: 1%;
}
#tour {
max-width: 6.4rem;
margin: .1rem auto 0 auto;
}
#tour h2 {
text-align: center;
color: #666;
font-size: .26rem;
}
#tour h3 {
text-align: center;
color: #666;
font-weight: normal;
font-size: .16rem;
margin: .05rem 0 .1rem 0;
}
#tour figure {
width: 50%;
float: left;
background-color: #eee;
font-size: .16rem;
padding: 0 0 .05rem 0;
}
#tour figure img {
padding: .02rem;
border-radius: .04rem;
}
#tour figcaption {
color: #666;
font-size: .16rem;
padding: .02rem .05rem;
}
#tour h4 {
font-weight: normal;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#tour p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#tour .info {
padding: .1rem 0 0 0;
font-size: .16rem;
}
#tour .price {
color: #f60;
}
#tour .price strong {
letter-spacing: .01rem;
}
#tour .sat {
position: relative;
float: right;
right: .05rem;
font-style: normal;
}
#headline {
max-width: 6.4rem;
margin: 0 auto;
padding: .45rem 0 0 0;
position: relative;
}
#headline hgroup {
position: absolute;
top: 48%;
left: 10%;
color: #eee;
}
#headline h2 {
font-size: .22rem;
}
#headline h3 {
font-size: .14rem;
}
.list {
font-size: .16rem;
color: #666;
max-width: 6.4rem;
margin: .15rem auto;
padding: 0 .1rem;
}
.list h2 {
font-size: .2rem;
border-bottom: .01rem dashed #999;
padding: 0 0 .15rem 0;
}
.about p {
line-height: 2;
margin: .2rem 0;
}
.about address {
font-style: normal;
line-height: 1.6;
margin: .2rem 0;
}
.information figure:after {
content: '.';
display: block;
clear: both;
height: 0;
visibility: hidden;
}
.information figure {
margin: .15rem 0 0 0;
position: relative;
}
.information figure img {
width: 50%;
float: left;
}
.information figure figcaption {
width: 48%;
float: right;
}
.information .title {
border: none;
padding: 0 0 .05rem 0;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.information .small_title {
font-weight: normal;
padding: 0;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.information .price {
color: #f60;
position: absolute;
bottom: 0;
}
.information .price strong {
font-size: .26rem;
}
.ticket .type {
margin: .2rem 0 .2rem 0;
border: none;
}
.ticket .type mark {
color: #fff;
background-color: #458B00;
padding: .05rem .08rem;
border-radius: .04rem;
margin: 0 .1rem 0 .16rem;
}
.ticket .form {
border: none;
}
.ticket .form p {
margin: .1rem 0;
}
.ticket .form label {
display: block;
margin: 0 0 .05rem 0;
}
.ticket .form input {
width: 97%;
height: .2rem;
border: 1px solid #ccc;
background-color: #fff;
border-radius: .04rem;
padding: .05rem;
color: #666;
}
.ticket .submit {
width: 30%;
border-radius: .04rem;
background-color: #f60;
color: #fff;
text-align: center;
border: none;
cursor: pointer;
padding: .1rem;
margin: 0 auto;
display: block;
}
.ticket .new {
margin: .2rem 0 0 0;
}
.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 {
padding: .15rem 0;
border-bottom: 1px solid #ddd;
font-weight: normal;
}
.ticket table td {
padding: .15rem 0;
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;
margin: 0 auto;
cursor: pointer;
display: block;
color: #666;
}
.ticket .reserve {
border-radius: .04rem;
background-color: #f60;
color: #fff;
text-align: center;
padding: .05rem .08rem;
}
/*媒体查询，大于480px小于640px*/
@media (min-width: 480px) and (max-width: 640px) {
#tour h2,.information .price strong {
font-size: .26rem;
}
#tour h3, #footer, #tour figcaption, #tour .info, .list {
font-size: .16rem;
}
#headline h2 {
font-size: .22rem;
}
#headline h3 {
font-size: .14rem;
}
.list h2 {
font-size: .2rem;
}
}
/*媒体查询，小于480px*/
@media (max-width: 480px) {
#tour h2,.information .price strong {
font-size: .20rem;
}
#tour h3, #tour figcaption, #tour .info, .list {
font-size: .14rem;
}
#footer {
font-size: .12rem;
}
#headline h2 {
font-size: .18rem;
}
#headline h3 {
font-size: .12rem;
}
.list h2 {
font-size: .17rem;
}
.min {
display: none;
}
}