src/main/webapp/static/css/login2.css

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

* {
	/* 初始化 清除页面元素的内外边距 */
	padding: 0;
	margin: 0;
	/* 盒子模型 */
	box-sizing: border-box;
}
body {
	/* 弹性布局 让页面元素垂直+水平居中 */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	/* 让页面始终占浏览器可视区域总高度 */
	height: 100vh;
	/* 背景渐变色 */
	background: linear-gradient(#fff, #999b9e);
}


.login {
	/* 弹性布局 让子元素称为弹性项目 */
	display: flex;
	/* 让弹性项目垂直排列 原理是改变弹性盒子的主轴方向 父元素就是弹性盒子 现在改变后的主轴方向是向下了 */
	flex-direction: column;
	/* 让弹性项目在交叉轴方向水平居中 现在主轴的方向是向下 交叉轴的方向是与主轴垂直 交叉轴的方向是向右 */
	align-items: center;
	width: 400px;
	padding: 40px;
	background-color: rgba(0, 0, 0, 0.2);
	box-shadow: 0 15px 25px rgba(0, 0, 0, 0.4);
	float:right;
	margin-top: 50px;
}
.login h1 {
	color: #fff;
	margin-bottom: 30px;
}
.login .login_box {
	/* 相对定位 */
	position: relative;
	width: 100%;
}
.login .login_box input {
	/* 清除input框自带的边框和轮廓 */
	outline: none;
	border: none;
	width: 100%;
	padding: 10px 0;
	margin-bottom: 30px;
	color: #fff;
	font-size: 16px;
	border-bottom: 1px solid #fff;
	/* 背景颜色为透明色 */
	background-color: transparent;
}
.login .login_box label {
	position: absolute;
	top: 0;
	left: 0;