[插件]ZBlog登录页美化

zblog自带的登录样式很显然不是很好看，所以就有了这篇文章！

闲着没事干写了个插件，登录页美化

使用方法很简单，在后台导入插件-开启插件就ok了！

如果你用的主题自带美化则需要关掉才有效果，你也可以放弃本插件！

自带纯净主题关闭方法：主题设置 → 其他设置 → 个性登录 关闭即可

html静态代码之前就分享过了：https://www.liuzhixi.cn/html/62.html 

核心代码

.logo img {
	width:100%;
	height:60px;
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
	background-image:url(这里填logo图片链接);
}
.bg {
	margin:0;
	width:100vw;
	height:100vh;
	background:#ecf0f3;
	display:flex;
	align-items:center;
	text-align:center;
	justify-content:center;
	place-items:center;
	overflow:hidden;
	font-family:poppins;
}
#wrapper {
	position:relative;
	width:350px;
	height:420px;
	border-radius:20px;
	padding:40px;
	box-sizing:border-box;
	background:#ecf0f3;
	box-shadow:14px 14px 20px #cbced1,-14px -14px 20px white;
}
#wrapper .logo {
	height:60px;
	margin:auto;
}
#wrapper .login {
	width:100%;
	margin-top:10px;
	text-align:left;
	margin-top:30px;
}
label,input,button {
	display:block;
	width:100%;
	padding:0;
	border:none;
	outline:none;
	box-sizing:border-box;
}
#wrapper label,dd.checkbox {
	display:none;
}
#wrapper dd {
	margin-bottom:4px;
	margin-top:15px;
	width:100%;
}
#wrapper input {
	background:#ecf0f3;
	padding:10px;
	padding-left:20px;
	height:45px;
	border:none;
	font-size:14px;
	border-radius:45px;
	-webkit-appearance:none;
	box-shadow:inset 6px 6px 6px #cbced1,inset -6px -6px 6px white;
	-webkit-box-shadow:inset 6px 6px 6px #cbced1,inset -6px -6px 6px white;
	-moz-box-shadow:inset 6px 6px 6px #cbced1,inset -6px -6px 6px white;
	width:100%;
}
#wrapper #btnPost {
	margin-top:20px;
	background:#7c9eaf;
	color:#fff;
	height:40px;
	border-radius:20px;
	cursor:pointer;
	font-weight:900;
	box-shadow:6px 6px 6px #cbced1,-6px -6px 6px white;
	transition:0.5s;
}
#wrapper #btnPost:hover {
	box-shadow:none;
}
.login dd.validcode > img {
	position:absolute;
	z-index:9999;
	width:auto;
	height:45px;
	cursor:pointer;
	right:-1px;
	top:0px;
	border-radius:0px 40px 45px 0px;
}

以上就是css全部代码，如果你不放心或者不想用插件，可以直接使用以上代码，本插件没有对html部分修改所以没有其他代码了

更新日志

2023-09-03:新增验证码布局

评论即可获取下载链接：