<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Signin</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.SignNav {
width: 100%;
height: 100%;
position: absolute;
display: flex;
flex-direction: column; flex: 1;
align-items:center;
justify-content:center;
/*background-color: #e9edf6;*/
font-weight: bold;font-weight: normal;font-family: "Trebuchet MS","Myriad Pro",Arial,sans-serif;
background: url(Img/lgbj.jpg) ;
}
.content {
width: 300px;
height: 400px;
box-shadow: 2px 2px 10px #909090;
border:1px solid #93b8bdcc;
border-radius: 9px;
}
.login_title{
color: #405c60;
text-align: center;line-height: 35px;}
</style>
</head>
<body>
<div class="SignNav">
<div class="content">
<div class="login_title" >用户统一登录界面
</div>
<div class="login_fields" >
<!-- 用户名
密码
验证码
登录 -->
</div>
</div>
</div>
</body>
</html>
Effect picture:
the background of the retro book style is centered on the div