课设时候做的一个机票预订系统前端项目，运用了HTML、CSS、JavaScript、JavaWeb、数据库等技术。可以完整地实现登录、注册、个人信息管理、订票、退票、管理员安排航班、修改航班等功能。
完整的项目文件（前端、后端、数据库）：项目下载
下面是登录的首页面效果，实现的完整代码在图片下。
实现效果：
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>机票预订系统</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
text-align: center;
color: #414142;
background-image: url("https://hbimg.huabanimg.com/fe820d2a699b413b4926a04aefebcdba93ed9f8a4e9f1c-usfveF_fw658");
background-size:cover;
}
/*右侧注册登录部分开始*/
.top{
width: 100%;
height: 58px;
box-shadow: 2px 5px 6px rgb(239,241,242);
}
.logo{
width: 140px;
height: 58px;
margin: 0 150px;
float: left;
}
.logo img{
float: left;
width: 58px;
height: 58px;
border-radius: 50%;
}
.logo p{
font-size: 19px;
line-height: 58px;
color:black;
font-family: "楷体";
}
.top-right{
width: 500px;
position:absolute;
right:0px;
}
.top-right a{
color:black;
}
div[class^=box]{
font-family: "楷体";
height: 58px;
float: left;
font-size: 28px;
margin-right: 50px;
line-height: 58px;
border-radius: 8px;
}
div[class^=box]:hover{
background: rgb(239,241,242);
}
/*右侧注册登录部分结束*/
.index_center{
text-align: center;
font-family: "华文楷体","楷体";
color: rgb(102,252,255);
font-size: 64px;
margin-top: 80px;
margin-bottom: 53px;
}
.city{
margin-right: 930px;
margin-bottom: 20px;
font-weight:bold;
}
h1,em,#information{
display: block;
font-size: 25px;
font-weight: normal;
margin: 2em auto;
}
a{
font-style: normal;
text-decoration: none;
font-size: 20px;
}
#container{
margin: 0 auto;
width: 1024px;
}
.wrapper{
display: inline-block;
width: 310px;
height: 160px;
vertical-align: top;
margin: 0em 1.5em 2em 0;
cursor: pointer;
position: relative;
font-family: Tahoma,Arial;
-webkit-perspective: 4000px;
-moz-perspective: 4000px;
-ms-perspective: 4000px;
-o-perspective: 4000px;
perspective: 4000px;
}
.item{
width:220px;
height: 160px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform .6s;
-moz-transition: -moz-transform .6s;
-ms-transition: -ms-transform .6s;
-o-transition: -o-transform .6s;
transition: transform .6s;
}
.item:hover{
-webkit-transform: translateZ(-80px) rotateX(95deg);
-moz-transform: translateZ(-80px) rotateX(95deg);
-ms-transform: translateZ(-80px) rotateX(95deg);
-o-transform: translateZ(-80px) rotateX(95deg);
transform: translateZ(-80px) rotateX(95deg);
}
.item img {
display: block;
position: absolute;
top: 0;
border-radius: 3px;
box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
-webkit-transform: translateZ(80px);
-moz-transform: translateZ(80px);
-ms-transform: translateZ(80px);
-o-transform: translateZ(80px);
transform: translateZ(80px);
-webkit-transition: all .6s;
-moz-transition: all .6s;
-ms-transition: all .6s;
-o-transition: all .6s;
transition: all .6s;
width: 220px;
height: 160px;
}
.item .information {
display: block;
position: absolute;
top: 0;
height: 160px;
width: 220px;
text-align: left;
border-radius: 15px;
font-size: 23px;
text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
box-shadow: none;
background: rgba(236,241,244,0.8);
-webkit-transform: rotateX(-90deg) translateZ(80px);
-moz-transform: rotateX(-90deg) translateZ(80px);
-ms-transform: rotateX(-90deg) translateZ(80px);
-o-transform: rotateX(-90deg) translateZ(80px);
transform: rotateX(-90deg) translateZ(80px);
-webkit-transition: all .6s;
-moz-transition: all .6s;
-ms-transition: all .6s;
-o-transition: all .6s;
transition: all .6s;
}
.information strong {
display: block;
margin: .2em 0 .5em 0;
font-size: 20px;
font-family: "Oleo Script";
}
.item:hover img {
box-shadow: none;
border-radius: 15px;
}
.item:hover .information {
box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
border-radius: 3px;
}
</style>
</head>
<body>
<div class="top">
<div class="logo">
<a href="https://blog.csdn.net/zag666 " target="blank">
<img src="style/self.jpg">
<p>个人信息</p>
</a>
</div>
<div class="top-right">
<div class="box1">
<span><a href="register.jsp">用户注册</a></span>
</div>
<div class="box2">
<span><a href="login.jsp">用户登陆</a></span>
</div>
<div class="box3">
<span><a href="Adminlogin.jsp">管理员登陆</a></span>
</div>
</div>
</div>
<div class="index_center">机票预订系统欢迎您</div>
<div class="city">热门城市：</div>
<div id="container">
<div class="wrapper">
<a href="login.jsp">
<div class="item">
<img src="style/beijing.JPG">
<span class="information">
<strong>北京</strong>景点：故宫、八达岭长城、颐和园<br>美食：北京烤鸭、奶油炸糕、驴打滚
</span>
</div>
</a>
</div>
<div class="wrapper">
<a href="login.jsp">
<div class="item">
<img src="style/guangzhou.JPG">
<span class="information">
<strong>广州</strong>景点：长隆野生动物世界<br>美食：濑粉，白切鸡
</span>
</div>
</a>
</div>
<div class="wrapper">
<a href="login.jsp">
<div class="item">
<img src="style/dibai.JPG">
<span class="information">
<strong>迪拜</strong>景点:帆船酒店、哈利法塔<br>美食:阿拉伯沙律、小拼盘
</span>
</div>
</a>
</div>
<div class="wrapper">
<a href="login.jsp">
<div class="item">
<img src="style/sanya.JPG">
<span class="information">
<strong>三亚</strong>景点:亚龙湾、三亚亚特兰蒂斯水世界<br>美食:冬瓜海螺汤、和乐蟹
</span>
</div>
</a>
</div>
<div class="wrapper">
<a href="login.jsp">
<div class="item">
<img src="style/mosike.JPG">
<span class="information">
<strong>莫斯科</strong>景点：红场、克里姆林宫大剧院<br>美食：莫斯科卡瓦斯
</span>
</div>
</a>
</div>
<div class="wrapper">
<a href="login.jsp">
<div class="item">
<img src="style/pujidao.JPG" >
<span class="information">
<strong>普吉岛</strong>景点：皇帝岛、芭东海滩<br>美食：泰式椰汁鸡汤
</span>
</div>
</a>
</div>
</div>
</body>
</html>
