Crear una página de inicio de sesión HTML, CSS
Interfaz
código login.html :
<!DOCTYPE html>
<html lang="en">
<head>
<title>学籍管理登录</title>
<!-- Bootstrap core CSS -->
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="sign-up-from">
<img src="default.jpg">
<h1>系统登录</h1>
<form>
<input type="email" class="input-box" placeholder="请输入账号">
<input type="password" class="input-box" placeholder="请输入密码">
<p><span><input type="checkbox" checked ='checked'></span> 我同意服务条款</p>
<button type="button" class="signUp-btn">登录</button>
<hr>
<p class="or">OR</p>
<!-- <button type="button" class="twitter-btn">注册</button> -->
<p>没有账号点击这里 <a href="register.html" >注册</a></p>
<p class="cyjt">© 创业锦泰信息科技2020-20xx</p>
</form>
</div>
</body>
</html>
código style.css :
body
{
margin: 0;
padding: 0;
font-family: sans-serif;
background-image: url(background1.jpg);
background-size: cover;
background-position: center;
}
.sign-up-from
{
width: 300px;
box-shadow: 0 0 3px 0 rgba(0,0,0,0.3);
background: #fff;
padding: 20px;
margin: 8% auto 0;
text-align: center;
}
.sign-up-from h1
{
color: #1c8abc;
margin-bottom: 30px;
}
.input-box
{
border-radius: 20px;
padding: 10px;
margin: 10px 0;
width: 90%;
border: 1px solid #999;
outline: none;
}
.input-box2
{
border-radius: 20px;
padding: 10px;
margin: 10px 0;
width: 90%;
border: 1px solid #999;
outline: none;
}
.input-box3
{
border-radius: 20px;
padding: 10px;
margin: 10px 0;
width: 90%;
border: 1px solid #999;
outline: none;
}
button
{
color: #fff;
width: 100%;
padding: 10px;
border-radius: 20px;
font-size: 15px;
margin: 10px 0;
border: none;
outline: none;
cursor: pointer;
}
.signUp-btn
{
background-color: #1c8abc;
}
.twitter-btn
{
background-color: #21afde;
}
a
{
text-decoration: none;
}
hr
{
margin-top: 20px;
width: 80%;
}
.or
{
background: #fff;
width: 30px;
margin: -19px auto 10px;
}
img
{
width: 70px;
border-radius: 30px;
margin-top: -70px;
}
.cyjt
{
font-size: 15px;
color: #aaa;
}
Imagen de referencia:
default.jpg
background1.jpg
código fuente de la página de inicio de sesión:
[se ha compartido personalmente, los fans pueden descargar]