css中的登陆界面 |css 或者

＜!-- HTML部分 --＞
＜div class="login"＞
　＜form＞
　　＜h1＞登录＜/h1＞
　　＜label＞用户名:＜/label＞
　　＜input type="text" name="username" required＞
　　＜label＞密码:＜/label＞
　　＜input type="password" name="password" required＞
　　＜input type="submit" value="登录"＞
　＜/form＞
＜/div＞
＜!-- CSS部分 --＞
.login {
　　position: absolute;
　　top: 50%;
　　left: 50%;
　　transform: translate(-50%, -50%);
　　background: #fff;
　　width: 400px;
　　padding: 30px;
　　border-radius: 5px;
　　box-shadow: 0 0 10px rgba(0,0,0,.3);
}
.login h1 {
　　font-size: 36px;
　　font-weight: 700;
　　margin-bottom: 30px;
}
.login label {
　　display: block;
　　font-size: 20px;
　　font-weight: 700;
　　margin-bottom: 10px;
}
.login input[type="text"],
.login input[type="password"] {
　　display: block;
　　width: 100%;
　　padding: 10px;
　　border-radius: 5px;
　　border: none;
　　margin-bottom: 20px;
}
.login input[type="submit"] {
　　display: block;
　　background: #333;
　　color: #fff;
　　padding: 10px;
　　border-radius: 5px;
　　border: none;
　　width: 100%;
　　cursor: pointer;
}
.login input[type="submit"]:hover {
　　background: #444;
}

这是一个简单而有效的设计，它包括了一个登录表单和一个标题。它被放在整个页面的中心，让用户可以直接从中心区域登陆。CSS代码则包括了表单和标题的样式，使其看起来更好，并使它们更易于使用。