订机票页面
最新推荐文章于 2022-09-06 10:56:54 发布
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>机票</title>
<style>
/*菜单*/
.menu {
border: 1px solid black;
margin-top: 20px;
background-color: lightseagreen;
}
.table-menu{
height: 20px;
border-spacing: 30px;
border-collapse: separate;
box-sizing: border-box;
}
#m-one {
border: 3px solid gainsboro;
width: 100px;
height: 50px;
}
#m-two {
border: 3px solid gainsboro;
width: 100px;
height: 50px;
}
#m-four {
border: 3px solid gainsboro;
width: 100px;
height: 50px;
}
#m-five {
border: 3px solid gainsboro;
width: 100px;
height: 50px;
}
#m-six {
border: 3px solid gainsboro;
width: 100px;
height: 50px;
}
#m-eight {
border: 3px solid gainsboro;
width: 100px;
height: 50px;
}
#m-nine {
border: 3px solid gainsboro;
width: 100px;
height: 50px;
}
/*搜索框*/
.search{
border-style: solid;
border-color: gainsboro;
margin-top: 70px;
background-color: lightseagreen;
float: left;
width: 350px;
height: 300px;
}
.t-ser{
width: 320px;
margin-top: 20px;
background-color: white;
}
#startDate {
width: 120px;
height: 25px;
border: 1px #888888 solid;
padding-left: 15px;
border-radius: 10px;
}
#start {
width: 120px;
height: 25px;
border: 1px #888888 solid;
padding-left: 15px;
border-radius: 10px;
}
#returnDate {
width: 120px;
height: 25px;
border: 1px #888888 solid;
padding-left: 15px;
border-radius: 10px;
}
#arrive{
width: 120px;
height: 25px;
border: 1px #888888 solid;
padding-left: 15px;
border-radius: 10px;
}
#ser{
width: 60px;
height: 30px;
background: deepskyblue;
color: white;
border: 1px solid;
border-radius: 10px;
box-sizing: border-box;
margin-top: 30px;
cursor: pointer; /*鼠标变成小手*/
}
</style>
</head>
<body>
<!--菜单-->
<div class="menu">
<form action="#" method="post">
<table class="table-menu" align="center">
<tr>
<td id="m-one" align="center"><a href="webpage.html">首页</a></td>
<!--旅游-->
<td id="m-two" align="center">
<a href="Dom-tourism.html">旅游度假</a>
</td>
<!--酒店-->
<td id="m-four" align="center">
<a href="Hotel.html">酒店</a>
</td>
<!--机票-->
<td id="m-five" align="center">
<a href="AirTicket.html">机票</a>
</td>
<!--火车票-->
<td id="m-six" align="center">
<a href="TrainTicket.html">火车票</a>
</td>
<td id="m-eight" align="center">
<a href="LoginPage.html">登录</a>
</td>
<td id="m-nine" align="center">
<a href="RegistrationPage.html">注册</a>
</td>
</tr>
</table>
</form>
</div>
<!--搜索框 -->
<div class="search">
<form action="#" method="post">
<table align="center" class="t-ser">
<tr align="center"style="height: 50px">
<td colspan="2">
<input type="radio" name="route" value="single"> 单程
<input type="radio" name="route" value="return"> 往返
</td>
</tr>
<tr align="center">
<td >
<label for="start">出发城市：</label>
<input type="text" id="start" name="start" placeholder="上海">
</td>
<td>
<label for="startDate">出发日期：</label>
<input type="date" id="startDate" name="startDate">
</td>
</tr>
<tr align="center" style="height: 80px">
<td>
<label for="arrive">到达城市：</label>
<input type="text" id="arrive" name="arrive" placeholder="北京">
</td>
<td>
<label for="returnDate">返程日期：</label>
<input type="date" id="returnDate" name="returnDate">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="搜索" id="ser">
</td>
</tr>
</table>
</form>
</div>
<!--特价航班 -->
<div budgetAirline>
<form>
<h2 align="center" id="air-title">特价航班</h2>
<!--第一个表格 -->
<div style="float: left;margin-left: 80px;margin-right: 80px;">
<table>
<tr>
<td style="color: gray;width: 150px">
<p>北京→太原</p>
</td>
<td style="color: gray;width: 150px">
10-29
</td>
<td style="color: orangered;font-size: 30px">
¥ 170
</td>
<td style="color: gray;font-size: 15px">
1.6折
</td>
</tr>
<tr>
<td style="color: gray;width: 150px">
<p>北京→哈尔滨</p>
</td>
<td style="color: gray;width: 150px">
11-11
</td>
<td style="color: orangered;font-size: 30px">
¥ 303
</td>
<td style="color: gray;font-size: 15px">
2折
</td>
</tr>
<tr>
<td style="color: gray;width: 150px">
<p>北京→宁波</p>
</td>
<td style="color: gray;width: 150px">
11-06
</td>
<td style="color: orangered;font-size: 30px">
¥ 420
</td>
<td style="color: gray;font-size: 15px">
3折
</td>
</tr>
<tr>
<td style="color: gray;width: 150px">
<p>北京→重庆</p>
</td>
<td style="color: gray;width: 150px">
11-01
</td>
<td style="color: orangered;font-size: 30px">
¥ 440
</td>
<td style="color: gray;font-size: 15px">
1.8折
</td>
</tr>
<tr>
<td style="color: gray;width: 150px">
<p>北京→深圳</p>
</td>
<td style="color: gray;width: 150px">
11-09
</td>
<td style="color: orangered;font-size: 30px">
¥ 550
</td>
<td style="color: gray;font-size: 15px">
1.8折
</td>
</tr>
</table>
</div>
<div style="width: 1px;border: 1px solid gainsboro;float: left;height: 200px;margin-top: 40px"></div>
<!--第二个表格 -->
<div style="float: left;margin-left: 50px">
<table>
<tr>
<td style="color: gray;width: 150px">
<p>北京→南京</p>
</td>
<td style="color: gray;width: 150px">
11-16
</td>
<td style="color: orangered;font-size: 30px">
¥ 280
</td>
<td style="color: gray;font-size: 15px">
1.3折
</td>
</tr>
<tr>
<td style="color: gray;width: 150px">
<p>北京→上海</p>
</td>
<td style="color: gray;width: 150px">
11-10
</td>
<td style="color: orangered;font-size: 30px">
¥ 400
</td>
<td style="color: gray;font-size: 15px">
2.1折
</td>
</tr>
<tr>
<td style="color: gray;width: 150px">
<p>北京→长沙</p>
</td>
<td style="color: gray;width: 150px">
11-15
</td>
<td style="color: orangered;font-size: 30px">
¥ 430
</td>
<td style="color: gray;font-size: 15px">
1.9折
</td>
</tr>
<tr>
<td style="color: gray;width: 150px">
<p>北京→昆明</p>
</td>
<td style="color: gray;width: 150px">
10-28
</td>
<td style="color: orangered;font-size: 30px">
¥ 450
</td>
<td style="color: gray;font-size: 15px">
1.5折
</td>
</tr>
<tr>
<td style="color: gray;width: 150px">
<p>北京→成都</p>
</td>
<td style="color: gray;width: 150px">
11-13
</td>
<td style="color: orangered;font-size: 30px">
¥ 580
</td>
<td style="color: gray;font-size: 15px">
2.9折
</td>
</tr>
</table>
</div>
</form>
</div>
<!--明星航空 -->
<div style="margin-top: 400px">
<form>
<h2 align="center" id="air-star">明星航空</h2>
<table align="center" style="border: 3px solid gainsboro;width: 1500px">
<tr>
<td style="border: 1px gray solid">
<img src="素材/厦门航空.jpg" width="200" height="150">
</td>
<td style="border: 1px gray solid">
<img src="素材/四川航空.jpg" width="200" height="150">
</td>
<td style="border: 1px gray solid">
<img src="素材/红土航空.jpg" width="200" height="150">
</td>
<td style="border: 1px gray solid">
<img src="素材/中国南方航空.jpg" width="200" height="150">
</td>
<td style="border: 1px gray solid">
<img src="素材/中国东方航空.jpg" width="200" height="150">
</td>
<td style="border: 1px gray solid">
<img src="素材/海南航空.jpg" width="200" height="150">
</td>
<td style="border: 1px gray solid">
<img src="素材/深圳航空.jpg" width="200" height="150">
</td>
</tr>
</table>
</form>
</div>
<!--常见问题 -->
<div>
<p align="left" style="margin-bottom: 5px;font-weight: normal;font-size: large">常见问题</p>
<hr color="lightseagreen" size="4px"/>
<form>
<table align="center" style="margin-left: 100px">
<tr>
<td width="350px">
<h3>乘客类型限制</h3>
<p style="width: 200px">本旅游网暂时只支持购买成人和儿童客票，成人票≥12周岁，2周岁≤儿童票＜12周岁，暂不支持2周岁（不含）以下婴儿乘机人购票。</p>
</td>
<td width="350px">
<h3>机票价格</h3>
<p style="width: 200px">机票价格为实时计价，可能会发生价格或舱位变更，请以支付前显示的价格为准，并尽快完成支付。支付之前请仔细查看退改签规则和实际价格。</p>
</td>
<td width="350px">
<h3>支付方式</h3>
<p style="width: 200px">支持部分银行借记卡、信用卡等支付，购买机票暂时只支持一次性付款，暂不支持分期付款。</p>
</td>
<td width="350px">
<h3>证件有效期</h3>
<p style="width: 200px">在填写资料时，请您确认您所选择的航班起飞日期在您的证件有效期内，否则会影响您的正常出行。</p>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
运行结果：
641
12-20
01-09
01-21
暂无认证
到【灌水乐园】发言
