1.这个登录的页面是基于beego的共享单车管理系统的页面
1.前端html的代码
<div class="container">
<div class="login-wrapper">
<div class="header">共享单车系统登录</div>
<div class="form-wrapper">
<form>
<span>账号:</span><input type="text" placeholder="请输入账户"id="username" name="username" class="input-item"><br>
<span>密码:</span><input type="password"placeholder="请输入密码" id="password" name="password" class="input-item"><br>
<input type="button" value="Login" id="btn" class="btn">
</form>
</div>
<div class="msg">
Don't have account?
<a href="#">Sign up</a>
</div>
</div>
</div>
<div id="result"></div>
2.css的代码
<style>
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
background-image: url("../static/img/go1.jpg");
}
body {
height: 100%;
}
.container {
height: 100%;
/*background-image: linear-gradient(to right, #999999, #330867);*/
background-image: url("../static/img/go1.jpg");
}
.login-wrapper {
background-color: #abc1ee;
width: 358px;
height: 588px;
border-radius: 15px;
padding: 0 50px;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.header {
font-size: 38px;
font-weight: bold;
text-align: center;
line-height: 200px;
}
.input-item {
display: block;
width: 100%;
margin-bottom: 20px;
border: 0;
padding: 10px;
border-bottom: 1px solid rgb(128,125,125);
font-size: 15px;
outline: none;
}
.input-item::placeholder {
text-transform: uppercase;
}
.btn {
text-align: center;
padding: 10px;
width: 100%;
margin-top: 40px;
background-image: linear-gradient(to right,#abc1ee, #feb);
color: #fff;
}
.msg {
text-align: center;
line-height: 88px;
}
a {
text-decoration-line: none;
/*color: #abc1ee;*/
}
</style>
3.效果图