一、效果图：
二、HTML代码：
<!DOCTYPE html> <!-- 定义HTML5文档 -->
<html lang="en"> <!-- 文档语言为英文 -->
<head>
<meta charset="UTF-8"> <!-- 文档编码格式为UTF-8 -->
<title>login</title>
<link rel="stylesheet" type="text/css" href="./css/login.css">
</head>
<body>
<!-- .container>.panel>.content>.switch+form -->
<div class="login_box">
<h2 class="login_h2">LOGIN</h2>
<input class="input_name" type="text" placeholder="请输入用户名">
<input class="input_password" type="text" placeholder="请输入密码">
<button class="button_login">登录</button>
<button class="button_exit">退出</button>
</div>
</body>
</html>
三、CSS代码：
* {
padding: 0;
margin: 0;
}
body {
background-image: url(../image/LoginBackground.jpg);
background-size: cover;
}
.login_box{
background-color: #60ebdf60;
width: 18%;
height: 200px;
margin: auto;
margin-top: 16%;
text-align: center;
border-radius: 10px;
padding: 50px 50px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
overflow: auto;
}
.login_h2 {
margin-top: 0%;
text-align: center;
color: rgb(17, 228, 175);;
}
.input_name{
background-color: transparent;
margin: 3%;
width: 90%;
height: 30px;
text-align: center;
border-radius: 5px;
}
.input_password{
width: 90%;
height: 30px;
margin: 3%;
text-align: center;
border-radius: 5px;
background-color: transparent;
}
.button_login{
text-align: center;
background-color: #3ae4b149;
width: 40%;
height: 30px;
margin: 3%;
border-radius: 5px;
}
.button_exit{
text-align: center;
background-color: #3ae4b149;
width: 40%;
margin: 2%;
height: 30px;
border-radius: 5px;
}
四、项目工程：
001-HTML&CSS登录界面.rar资源-CSDN文库
