一、主頁
![在這裏插入圖片描述]()
二、機票訂購頁面
![在這裏插入圖片描述]()
三、index.html
<!DOCTYPE html>
<html>
<head>
<title>瓢城旅行網</title>
<meta charset="utf-8" />
<link href="css/index.css" rel="stylesheet" type="text/css"/>
<link href="css/basic.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<!-- 導航欄 -->
<header id="header">
<div class="center">
<h1 class="logo">瓢城旅行網</h1>
<nav class="nav">
<h2>網站導航</h2>
<ul class="link">
<li class="active"><a href="#">首頁</a></li>
<li><a href="#">旅遊資訊</a></li>
<li><a href="ticket.html">機票訂購</a></li>
<li><a href="#">風景欣賞</a></li>
<li><a href="#">公司簡介</a></li>
</ul>
</nav>
</div>
</header>
<!-- 搜索區域 -->
<div id="search">
<div class="content"></div>
<input type="text" class="search" placeholder="請輸入旅遊景點或城市" />
<button class="button">搜索</button>
</div>
<div id="tour">
<section>
<h2>熱門旅遊</h2>
<p>國內旅遊、國外旅遊、自助旅遊、自駕旅遊、油輪簽證、主題旅遊等各種最新熱門旅遊推薦</p>
</section>
<figure class="img-box">
<span class="tag">國內長線</span>
<img src="img/hot1.jpg" alt="熱門旅遊">
<figcaption><b><曼谷-芭提雅6日遊></b>包閉特惠，超豐富景點，升級1晚國5</figcaption>
<div>
<span class="price">￥<b>2864</b>起</span>
<span class="sat">滿意度77%</span>
</div>
</figure>
<figure class="img-box">
<span class="tag">國內長線</span>
<img src="img/hot2.jpg" alt="熱門旅遊">
<figcaption><b><曼谷-芭提雅6日遊></b>包閉特惠，超豐富景點，升級1晚國5</figcaption>
<div>
<span class="price">￥<b>2864</b>起</span>
<span class="sat">滿意度77%</span>
</div>
</figure>
<figure class="img-box">
<span class="tag">國內長線</span>
<img src="img/hot3.jpg" alt="熱門旅遊">
<figcaption><b><曼谷-芭提雅6日遊></b>包閉特惠，超豐富景點，升級1晚國5</figcaption>
<div>
<span class="price">￥<b>2864</b>起</span>
<span class="sat">滿意度77%</span>
</div>
</figure>
<figure class="img-box">
<span class="tag">國內長線</span>
<img src="img/hot4.jpg" alt="熱門旅遊">
<figcaption><b><曼谷-芭提雅6日遊></b>包閉特惠，超豐富景點，升級1晚國5</figcaption>
<div>
<span class="price">￥<b>2864</b>起</span>
<span class="sat">滿意度77%</span>
</div>
</figure>
</div>
<footer id="footer">
<div class="top">
<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>郵件：[email protected]</li>
<li>地址：江蘇鹽城無名路123 號</li>
</ul>
</div>
</div>
<div class="bottom">
Copyright © YCKU 瓢城旅行社| 蘇ICP 備120110119 號| 旅行社經營許可證：L-YC-BK12345
</div>
</footer>
</body>
</html>
四、index.css
/*搜索區域*/
#search{
padding-top: 70px;
width: 100%;
height: 400px;
position: relative;
color: white;
}
.content{
position: absolute;
width: 100%;
height: 100%;
z-index:-1;
background: url('../img/search.jpg') no-repeat;
background-size: 100% 100%;
}
.search{
margin-left: 40%;
position: absolute;
margin-top: 200px;
padding: 5px;
opacity: 0.9;
border: 1px solid #eee;
border-radius: 5px;
width: 20%;
height: 25px;
background-color: #eee;
color: black;
}
.button{
margin-left: 61%;
position: absolute;
margin-top: 200px;
padding: 5px 15px;
opacity: 0.9;
border-radius: 5px;
border: 1px solid #eee;
background-color: #eee;
color: black;
height: 35px;
}
/*熱門旅遊*/
#tour{
width: 80%;
margin-left: 10%;
margin-top: 80px;
padding: 0 50px;
}
#tour section{
text-align: center;
margin-left:-10%;
}
.img-box{
padding: 0;
margin: 0px;
width: 30%;
border: 1px solid #eee;
display: inline-block;
margin-top: 20px;
background-color: white;
}
.img-box img{
width: 98%;
margin-left: 1%;
margin-top: 1%;
z-index:0;
}
.img-box:hover{
transform: scale(1.1);
}
.img-box .sat{
margin-left: 52%;
}
.img-box .price{
color: rgba(239, 109, 12, 1);
margin-top: 10px;
}
.img-box .tag{
background-color: green;
color: white;
padding: 2px 5px;
float: left;
z-index: 10;
margin-top: 4px;
position: absolute;
margin-left: 4px;
}
五、basic.css
body,html{
margin: 0px;
padding: 0px;
}
/*導航欄區域*/
#header{
position: fixed;
width: 100%;
z-index:100;
}
.center{
width: 100%;
height: 70px;
margin: 0 auto;
}
.logo{
width: 20%;
height: 70px;
background: url(../img/logo.png) no-repeat;
font-size: 0;
float: left;
margin-left: 10%;
}
.nav{
width: 100%;
height: 70px;
background-color: #333;
}
.nav h2{
font-size: 0px;
}
.link{
width: 50%;
height: 70px;
line-height: 70px;
float: right;
/*margin-right: 5%;*/
}
.link li{
width: 18%;
height: 70px;
float: left;
text-align: center;
}
.link .active a,.link a:hover{
background-color: #000000;
}
ul{
list-style: none;
margin: 0px;
padding: 0px;
}
li a{
text-decoration: none;
display: block;
color: #eee;
}
li a:hover{
transform: scale(0.8);
}
/*底部*/
#footer .top {
width: 100%;
height: 320px;
margin-top:50px;
text-align: center;
background-color: #d4d2d2;
}
#footer .block {
width: 410px;
height: 300px;
display: inline-block;
text-align: center;
color: white;
vertical-align: top;
}
#footer h2 {
font-size: 25px;
padding: 20px 0 0 20px;
}
#footer hr {
width: 60%;
border: 1px dashed #969696;
}
#footer ul {
font-size: 18px;
color: white;
text-indent: 20px;
line-height: 2;
}
#footer .bottom {
height: 60px;
line-height: 60px;
text-align: center;
color: #d4d2d2;
background-color: #000;
border: 1px;
}
六、ticket.html
<!DOCTYPE html>
<html>
<head>
<title>瓢城旅行網</title>
<meta charset="utf-8" />
<link href="css/ticket.css" rel="stylesheet" type="text/css"/>
<link href="css/basic.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<!-- 導航欄 -->
<header id="header">
<div class="center">
<h1 class="logo">瓢城旅行網</h1>
<nav class="nav">
<h2>網站導航</h2>
<ul class="link">
<li><a href="index.html">首頁</a></li>
<li><a href="#">旅遊資訊</a></li>
<li class="active"><a href="#">機票訂購</a></li>
<li><a href="#">風景欣賞</a></li>
<li><a href="#">公司簡介</a></li>
</ul>
</nav>
</div>
</header>
<div id="headline">
<div class="center">
<hgroup>
<h2>旅遊資訊</h2>
<h3>介紹各種最新旅遊信息、諮詢要聞、景點攻略等</h3>
</hgroup>
</div>
</div>
<div id="container">
<div class="list">
<div class="order-ticket">
<h2>機票預定</h2>
<hr>
<div class="option">
<span>航班類型</span>
<span class="active">單程</span>
<span>往返</span>
</div>
<form class="order-form">
<span>出發城市</span>
<input type="text" class="startCity" placeholder="城市名">
<span class="right">出發時間</span>
<input type="text" class="startTime" placeholder="時間/日期">
<br>
<span>返回城市</span>
<input type="text" class="endCity" placeholder="城市名">
<span class="right">返回時間</span>
<input type="text" class="endTime" placeholder="時間/日期">
</form>
<div>
<input type="button" class="order-btn" value="訂票">
</div>
</div>
<div>
<h2>最新機票</h2>
<hr>
<div class="option">
<span>熱門城市：</span>
<span class="active">北京</span>
<span>上海</span>
<span>廣州</span>
<span>深圳</span>
<span>重慶</span>
<span>成都</span>
<span>杭州</span>
<span>南京</span>
</div>
<table border="1px" cellspacing="0" class="plane-list" rules="rows" >
<tr>
<th>路線</th>
<th>日期</th>
<th>價格</th>
<th>稅費</th>
<th>餐食</th>
<th>航班</th>
<th>預定</th>
</tr>
<tr>
<td>北京-成都</td>
<td>10-15</td>
<td>￥745</td>
<td>￥50</td>
<td>有</td>
<td>春秋航空</td>
<td><input type="button" value="預定"></td>
</tr>
<tr>
<td>北京-成都</td>
<td>10-15</td>
<td>￥745</td>
<td>￥50</td>
<td>有</td>
<td>春秋航空</td>
<td><input type="button" value="預定"></td>
</tr>
<tr>
<td>北京-成都</td>
<td>10-15</td>
<td>￥745</td>
<td>￥50</td>
<td>有</td>
<td>春秋航空</td>
<td><input type="button" value="預定"></td>
</tr>
<tr>
<td>北京-成都</td>
<td>10-15</td>
<td>￥745</td>
<td>￥50</td>
<td>有</td>
<td>春秋航空</td>
<td><input type="button" value="預定"></td>
</tr>
<tr>
<td>北京-成都</td>
<td>10-15</td>
<td>￥745</td>
<td>￥50</td>
<td>有</td>
<td>春秋航空</td>
<td><input type="button" value="預定"></td>
</tr>
<tr>
<td>北京-成都</td>
<td>10-15</td>
<td>￥745</td>
<td>￥50</td>
<td>有</td>
<td>春秋航空</td>
<td><input type="button" value="預定"></td>
</tr>
<tr>
<td>北京-成都</td>
<td>10-15</td>
<td>￥745</td>
<td>￥50</td>
<td>有</td>
<td>春秋航空</td>
<td><input type="button" value="預定"></td>
</tr>
<tr>
<td>北京-成都</td>
<td>10-15</td>
<td>￥745</td>
<td>￥50</td>
<td>有</td>
<td>春秋航空</td>
<td><input type="button" value="預定"></td>
</tr>
<tr>
<td>北京-成都</td>
<td>10-15</td>
<td>￥745</td>
<td>￥50</td>
<td>有</td>
<td>春秋航空</td>
<td><input type="button" value="預定"></td>
</tr>
<tr>
<td>北京-成都</td>
<td>10-15</td>
<td>￥745</td>
<td>￥50</td>
<td>有</td>
<td>春秋航空</td>
<td><input type="button" value="預定"></td>
</tr>
<tr>
<td colspan="7">加載更多航班...</td>
</tr>
</table>
</div>
</div>
<aside class="sideBar">
<div class="recommmend-sites">
<h3>景點推薦</h2>
<ul>
<li>曼谷(12)</li>
<li>東京(5)</li>
<li>西雙版納(8)</li>
</ul>
<ul>
<li>曼谷(12)</li>
<li>東京(5)</li>
<li>西雙版納(8)</li>
</ul>
<ul>
<li>曼谷(12)</li>
<li>東京(5)</li>
<li>西雙版納(8)</li>
</ul>
<ul>
<li>曼谷(12)</li>
<li>東京(5)</li>
<li>西雙版納(8)</li>
</ul>
<ul>
<li>曼谷(12)</li>
<li>東京(5)</li>
<li>西雙版納(8)</li>
</ul>
</div>
<div class="hot-trip">
<h3>熱門旅遊</h3>
<ul>
<li>
<div class="img"></div>
<div>馬爾代夫雙魚6日遊</div>
</li>
<li>
<div class="img"></div>
<div>馬爾代夫雙魚6日遊</div>
</li>
</ul>
<ul>
<li>
<div class="img"></div>
<div>馬爾代夫雙魚6日遊</div>
</li>
<li>
<div class="img"></div>
<div>馬爾代夫雙魚6日遊</div>
</li>
</ul>
<ul>
<li>
<div class="img"></div>
<div>馬爾代夫雙魚6日遊</div>
</li>
<li>
<div class="img"></div>
<div>馬爾代夫雙魚6日遊</div>
</li>
</ul>
<ul>
<li>
<div class="img"></div>
<div>馬爾代夫雙魚6日遊</div>
</li>
<li>
<div class="img"></div>
<div>馬爾代夫雙魚6日遊</div>
</li>
</ul>
</div>
<div class="trip-box">
<h3>旅遊百寶箱</h3>
<ul>
<li>天氣預報</li>
<li>火車票查詢</li>
</ul>
<ul>
<li>航空查詢</li>
<li>地鐵線路查詢</li>
</ul>
</div>
</aside>
</div>
<footer id="footer">
<div class="top">
<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>郵件：[email protected]</li>
<li>地址：江蘇鹽城無名路123 號</li>
</ul>
</div>
</div>
<div class="bottom">
Copyright © YCKU 瓢城旅行社| 蘇ICP 備120110119 號| 旅行社經營許可證：L-YC-BK12345
</div>
</footer>
</body>
</html>
七、ticket.css
#headline{
width: 100%;
height: 300px;
padding-top:70px;
position: relative;
}
#headline .center{
background: linear-gradient(to right bottom,rgba(0,0,0,0.5),rgba(0,0,0,0)),url(../img/headline.jpg) no-repeat;
background-size: 100% 100%;
position: absolute;
width: 100%;
height: 300px;
}
#headline hgroup{
padding: 70px 0 0 200px;
}
#headline h2{
color: #eee;
font-size: 36px;
letter-spacing: 2px;
}
#headline h3{
color: #eee;
font-size: 20px;
letter-spacing: 2px;
}
#container{
height: 1100px;
color: #969696;
}
#container .list{
float: left;
width: 60%;
margin-left: 10%
}
#container .list h2{
color: #969696;
font-size: 27px
}
#container .list hr{
border: 1px dashed #969696;
margin: 10px 0;
}
#container .option{
font-size: 20px;
padding: 10px 10px 10px 0;
}
#container .option span{
margin-right: 10px;
}
#container .option .active{
background-color: green;
color: white;
padding: 5px;
border-radius: 5px;
}
#container .order-form{
font-size: 20px;
width: 85%;
float: left;
margin-top: 10px;
}
#container .order-form span{
color: 20px;
padding-right: 10px;
}
#container .order-form input{
height: 22px;
margin: 5px;
padding: 5px;
width: 30%;
border-radius: 5px;
border: 1px solid #969696;
}
#container .order-form .right{
margin-left: 5%;
}
#container .order-btn{
height: 80px;
width: 10%;
margin: 15px 0 0 10px;
background-color: #ff683d;
border: 1px solid #ff683d;
color: white;
font-size: 20px;
border-radius: 5px;
}
#container .plane-list{
border: 1px solid #e6e6e6;
}
#container .plane-list th{
color: black;
}
#container .plane-list tr:nth-child(odd){
background-color: #f9f8f8;
}
#container .plane-list th,td{
width: 16%;
text-align: center;
height: 40px;
}
#container .plane-list input{
width: 50px;
background-color: #ff683d;
border: 1px solid #ff683d;
color:white;
border-radius: 5px;
padding: 5px;
margin: 0 10px;
}
#container .plane-list td:nth-child(3){
color: #ff683d;
}
#container .sideBar{
float: right;
width: 17%;
margin-right:10%;
margin-top: 35px;
}
#container .recommmend-sites{
width: 100%;
height: 270px;
border: 1px solid #eee;
}
#container h3{
margin: 5px;
font-weight: normal;
}
#container .recommmend-sites li{
list-style: none;
width: 30%;
float: left;
background-color: #eee;
margin: 5px;
text-align: center;
height: 35px;
line-height: 30px;
}
#container .hot-trip{
margin-top: 10px;
height: 550px;
width: 100%;
border: 1px solid #eee;
}
#container .hot-trip li{
width: 45%;
margin-bottom:8%;
margin-left: 3.5%;
height: 100px;
float: left;
font-size: 15px;
text-align: center;
}
#container .hot-trip li .img{
width: 100%;
height: 100%;
background: url(../img/hot1.jpg) no-repeat;
background-size: 100% 100%;
}
#container .trip-box{
margin-top: 10px;
width: 100%;
height: 140px;
border: 1px solid #eee;
}
#container .trip-box li{
width: 45%;
height: 35px;
line-height: 35px;
background-color: #eee;
text-align: center;
float: left;
margin-left: 3%;
margin-top: 10px;
}
