一个简单的html登录界面。
时间:2021-1-28
效果图:
css样式:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录样式</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;}
body{background:url(bg.jpg);font-family: "微软雅黑", sans-serif;}
.headtop{background:url(topbg.jpg);height:28px;}
.login {
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -150px;
width:300px;
height:300px;
}
.login h1 { color:#555555; text-shadow: 0px 10px 8px #CDC673; letter-spacing:2px;text-align:center;margin-bottom:20px; }
input{
padding:10px;
width:100%;
color:white;
margin-bottom:10px;
background-color:#555555;
border: 1px solid black;
border-radius:4px;
letter-spacing:2px;
}
form button{
width:100%;
padding:10px;
background-color:#CDC673;
border:1px solid black;
border-radius:4px;
cursor:pointer;
}
</style>
</head>
<body>
<div class="headtop"></div>
<div class="login">
<h1>Login</h1>
<form action="" method="post">
<input type="text" name="user" placeholder="用户名" required="required">
<input type="password" name="password" placeholder="密 码" required="required">
<button type="submit">登录</button>
</form>
</div>
</body>
</html>
git:simpleLoginStyle