[7B2主题美化]登录界面美化教程

5天前更新

046220

[7B2主题美化]登录界面美化教程
在这篇文章教程中，我将为7B2主题的登录界面进行美化和优化。通过简单的 CSS 和模板修改，您可以使登录界面看起来更加专业且富有吸引力。
我将分享CSS代码调整背景、按钮和布局等元素，提升用户体验，让每位用户在登录时感受到更流畅的界面交互。
不管你的是个人博客还是企业网站，都能通过这一教程为登录界面增添独特的视觉效果。

美化方法

第一步：打开目录/b2/Assets/fontend/style.css这个文件，把下面的CSS代码到style.css这个文件：

[登录可见]隐藏内容 – 管理员可见

/* 登陆弹窗美化美化开始*/
.login-box-content {
    margin-top: 0;
    width: auto;
    display: flex;
    position: relative;
 
    min-width: 750px;
    border-radius: 15px;  /* 圆角大小，可以根据需要调整 */
    overflow: hidden;     /* 确保内容不会溢出圆角区域 */
}
 
.aibk_com_login {
    width: 50%;
    position: relative;
    background: url(https://img.alicdn.com/imgextra/i3/2076639522/O1CN01YKrVDB2KD8MG3oOP7_!!2076639522.jpg);
    background-size: cover;
    background-position: center 0;
}
 
.login-box-content .login-box-top {
    width: 50%;
    padding: 30px 30px 25px;
}
 
.wxlogin-sidebar {
    position: absolute;
    bottom: 0;
    width: 50%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.8) 100%);
}
 
.wxlogin-sidebar h3 {
    font-size: 20px; /* 设置标题字体大小 */
    line-height: 1.5; /* 设置标题的行高 */
    margin-bottom: 10px; /* 标题下方的间距 */
    color: #fff; /* 设置标题文字颜色 */
}
 
.wxlogin-sidebar p {
    font-size: 14px; /* 设置段落文字大小 */
    line-height: 1.8; /* 设置段落的行高 */
    margin-bottom: 8px; /* 每一段之间的间距 */
    color: rgba(255, 255, 255, 0.8); /* 设置段落文字颜色 */
}
 
.wxlogin-sidebar > div {
    padding: 30px;
}
@media screen and (max-width: 768px) {
    .aibk_com_login {
        display: none;
    }
 
    .login-box-content {
        min-width: auto;
    }
 
    .login-box-content .login-box-top {
        width: 100%;
    }
 
    .wxlogin-sidebar {
        display: none;
    }
}
/* 登陆弹窗美化 结束*/

background: url(https://img.alicdn.com/imgextra/i3/2076639522/O1CN01YKrVDB2KD8MG3oOP7_!!2076639522.jpg);这里的链接是背景图片链接，大家可以换上自己喜欢的图片

第二步：打开目录/b2/Modules/Templates/VueTemplates.php这个文件，搜索：modal-content login-box-content在这个代码下一行加上：

<div class=\"wxlogin-sidebar\"><div><h3>🌸 清源极客</h3><p>🌼 一个专业的软件分享平台。</p><p>🌼 绿色软件，破解软件，破解APP。</p><p>🌼 与您共探互联网和技术的变革。</p></div></div>

[7B2主题美化]登录界面美化教程

修改完成后，记得按下 CTRL+F5 强制刷新浏览器，或者清除浏览器缓存，才能看到修改后的效果！

重要提示

如有解压密码： 看下载页、看下载页、看下载页。
源码工具资源类具有可复制性： 建议具有一定思考和动手能力的用户购买。
请谨慎考虑： 小白用户和缺乏思考动手能力者不建议赞助。
虚拟商品购买须知： 虚拟类商品，一经购买打赏赞助，不支持退款。请谅解，谢谢合作！

文章版权声明 1、本网站名称：好代码
2、本站永久网址：https://65dns.net
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ205528190进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END