<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>龙首观景苑-登录</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/login.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!--导入angularJS文件-->
<script src="js/angular.min.js"></script>
<!--导入jquery-->
<script src="js/jquery-3.3.1.js"></script>
<style>
body
{
background:url(image/8.gif );
background-size:1900px 1000px;
background-repeat:no-repeat;
padding-top:40px;
}
#login_wrap {
100%;
min- 1300px;
overflow: hidden;
position: relative;
}
.login-box {
360px;
height: 450px;
position: absolute;
top: 50px;
left:170px;
background:rgba(49, 29, 3, 0.397);
}
.title {
height: 80px;
line-height: 80px;
background: #f1f0ed36;
font-size: 22px;
padding:0 30px;
}
.title img {
float: left;
margin-top: 12px;
margin-right: 15px;
}
.login_inner {
overflow: hidden;
padding: 30px 50px;
}
.alert {
margin: 0 auto;
padding: 6px 10px;
border: 1px solid transparent;
text-align: left;
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
margin-bottom: 17px;
font-size: 12px;
}
.login_inner form{
100%;
overflow: hidden;
padding-bottom: 15px;
border-bottom: 1px solid #eee;
}
.login_inner input {
display: inline-block;
246px;
height: 26px;
border: 1px solid #d8d8d8;
font-size: 14px;
color: #666;
line-height: 28px;
padding: 6px 0 6px 12px;
box-shadow: 0 0 5px #fff;
outline: none;
transition: box-shadow 0.25s linear 0s;
-webkit-transition: box-shadow 0.25s linear 0s;
margin-bottom: 17px;
}
.verify input {
95px;
margin-right: 20px;
float: left;
margin-bottom: 0;
}
.submit_btn button {
120px;
height: 40px;
border: none;
background-color: #ffa800;
text-align: center;
line-height: 40px;
color: #000;
font-size: 18px;
font-weight: bold;
cursor: pointer;
float: left;
}
.auto_login {
margin-top: 15px;
}
.submit_btn .checkbox {
float: left;
17px;
margin: 7px 5px 0 54px;
}
.submit_btn span {
line-height: 35px;
}
.reg {
border-top: 1px solid #eeeeee;
margin-top: 15px;
100%;
height: 40px;
line-height: 40px;
background: #f1f1f1;
text-align: center;
font-size: 16px;
}
.reg a {
color: #fc7f7f;
}
</style>
</head>
<body>
<!--引入头部-->
<div id="header"></div>
<!-- 头部 end -->
<section id="login_wrap">
<div class="fullscreen-bg" style="background: background-repeat:no-repeat;height:925px;">
</div>
<div class="login-box">
<div class="title">
<img src="image/100.png" alt="">
<span>欢迎登录龙首观景苑</span>
</div>
<div class="login_inner">
<!--登录错误提示消息-->
<!--<div id="errorMsg" class="alert alert-danger" ></div>-->
<form id="loginForm" action="" method="post" accept-charset="utf-8">
<input type="hidden" name="action" value="login"/>
<input name="username" type="text" placeholder="请输入账号" autocomplete="off">
<input name="password" type="text" placeholder="请输入密码" autocomplete="off">
<div class="verify">
<input name="check" type="text" placeholder="请输入验证码" autocomplete="off">
<div> <img src="image/101.png" style="position:relative;top: 5px"></div>
<!--<span><img src="checkCode" alt="" onclick="changeCheckCode(this)"></span>-->
<script type="text/javascript">
//图片点击事件
function changeCheckCode(img) {
img.src="checkCode?"+new Date().getTime();
}
</script>
</div>
<div class="submit_btn">
<button type="button">登录</button>
<div class="auto_login">
<input type="checkbox" name="" class="checkbox">
<span>自动登录</span>
</div>
</div>
</form>
<div class="reg">没有账户？<a href="javascript:;">立即注册</a></div>
</div>
</div>
</section>
<!--引入尾部-->
<div id="footer"></div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.0.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!--导入布局js，共享header和footer-->
<script type="text/javascript" src="js/include.js"></script>
</body>
</html>
效果展示：
