dedecms后台登录界面模板如何实现华丽效果？-网站模板-锦华智联科技

设计思路与美化要点

一个“华丽”的登录界面，通常具备以下特点：

（图片来源网络，侵删）

现代化视觉风格：采用扁平化、卡片式设计，摒弃过时的边框和阴影。
优雅的配色方案：使用低饱和度的颜色作为背景，搭配品牌色作为主色调，整体感觉舒适、专业。
精心的布局：登录表单居中或偏左，右侧可以放置一个品牌介绍、产品截图或装饰性图片。
丰富的交互细节：输入框获得焦点时有边框高亮、图标变化；按钮有悬停效果；加载动画等。
响应式设计：在不同屏幕尺寸下（电脑、平板）都能良好显示。
品牌化元素：可以融入网站 Logo、Slogan 等，增强后台的归属感。

文件位置与修改方法

Dedecms 后台登录界面的核心文件位于：

/dede/templets/login.htm

我们将通过修改这个文件及其关联的 CSS 文件来实现美化。

直接可用的华丽登录模板

下面是一个精心设计的模板,您可以直接复制代码，替换掉 /dede/templets/login.htm 中的所有内容。

（图片来源网络，侵删）

修改 `login.htm` 文件

打开 /dede/templets/login.htm，清空所有内容，然后粘贴以下代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">{dede:global.cfg_webname/} - 管理登录</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="images/login.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    <style>
        /* 为了方便，这里也内联了一些关键样式，实际开发中建议全部放入 login.css */
        body {
            background-image: url('images/login-bg.jpg'); /* 请准备一张背景图放在 images 目录下 */
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="login-box">
            <div class="login-header">
                <a href="/" class="logo">
                    <!-- 在这里放置你的 Logo -->
                    <img src="images/logo.png" alt="{dede:global.cfg_webname/}" />
                </a>
                <h1>欢迎登录</h1>
                <p>管理中心</p>
            </div>
            <form name="form1" action="login.php" method="POST" onSubmit="return checklogin();">
                <input type="hidden" name="dopost" value="login">
                <input type="hidden" name="gotopage" value="<?php echo $gotopage; ?>">
                <div class="input-group">
                    <i class="fa fa-user"></i>
                    <input type="text" name="userid" id="userid" placeholder="用户名" value="<?php echo $userid; ?>">
                </div>
                <div class="input-group">
                    <i class="fa fa-lock"></i>
                    <input type="password" name="pwd" id="pwd" placeholder="密码">
                </div>
                <div class="input-group verify-group">
                    <i class="fa fa-shield"></i>
                    <input type="text" name="vdcode" id="vdcode" placeholder="验证码">
                    <img id="vdimgck" src="../include/vdimgck.php" onclick="this.src='../include/vdimgck.php?'+Math.random();" alt="看不清？点击换一张" style="cursor:pointer;" title="看不清？点击换一张" />
                </div>
                <div class="form-options">
                    <label>
                        <input type="checkbox" name="chkadmin" id="chkadmin" value="1" <?php if($chkadmin) echo 'checked="checked"';?>>
                        <span>记住用户名</span>
                    </label>
                    <a href="resetpassword.php">忘记密码？</a>
                </div>
                <button type="submit" class="login-btn">
                    <span>登 录</span>
                </button>
            </form>
        </div>
        <div class="login-footer">
            <p>&copy; <?php echo date('Y'); ?> <a href="/" target="_blank">{dede:global.cfg_webname/}</a> All Rights Reserved.</p>
        </div>
    </div>
    <!-- 引入 jQuery 用于简单的交互 -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script>
        // 页面加载完成后执行
        $(document).ready(function() {
            // 输入框获得焦点时，图标上移
            $('.input-group input').on('focus', function() {
                $(this).siblings('i').addClass('focused');
            }).on('blur', function() {
                $(this).siblings('i').removeClass('focused');
            });
            // 点击验证码图片刷新
            $('#vdimgck').click(function() {
                this.src = '../include/vdimgck.php?' + Math.random();
            });
        });
        // 这是 Dedecms 原有的登录验证函数，请务必保留
        function checklogin()
        {
            if(document.form1.userid.value == '')
            {
                alert('请输入用户名！');
                document.form1.userid.focus();
                return false;
            }
            if(document.form1.pwd.value == '')
            {
                alert('请输入密码！');
                document.form1.pwd.focus();
                return false;
            }
            if(document.form1.vdcode.value == '')
            {
                alert('请输入验证码！');
                document.form1.vdcode.focus();
                return false;
            }
            return true;
        }
    </script>
</body>
</html>

创建 `login.css` 样式文件

在 /dede/templets/images/ 目录下，新建一个名为 login.css 的文件，并粘贴以下 CSS 代码：

/* 全局样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #333;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f2f5;
}
/* 登录容器 */
.login-container {
    width: 100%;
    max-width: 1200px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}
/* 登录卡片 */
.login-box {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    padding: 40px 50px;
    width: 90%;
    max-width: 400px;
    text-align: center;
}
/* Logo和标题 */
.login-header .logo {
    display: block;
    margin-bottom: 20px;
}
.login-header .logo img {
    height: 50px;
    width: auto;
}
.login-header h1 {
    font-size: 24px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 8px;
}
.login-header p {
    font-size: 14px;
    color: #7f8c8d;
}
/* 输入框组 */
.input-group {
    position: relative;
    margin-bottom: 20px;
    text-align: left;
}
.input-group i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: #95a5a6;
    transition: all 0.3s ease;
}
.input-group input {
    width: 100%;
    padding: 15px 15px 15px 45px;
    font-size: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    outline: none;
    transition: all 0.3s ease;
}
.input-group input:focus {
    border-color: #409eff;
}
.input-group input:focus + i, /* 注意：这里选择器需要根据HTML结构调整，本模板HTML结构不同，所以下面用jQuery处理了 */
.input-group input:focus ~ i {
    color: #409eff;
}
/* 用jQuery实现的图标聚焦效果更简单 */
.input-group i.focused {
    color: #409eff;
    top: 10px;
    font-size: 12px;
    transform: translateY(0);
}
/* 验证码组 */
.verify-group {
    display: flex;
    align-items: center;
}
.verify-group input {
    flex: 1;
}
.verify-group img {
    height: 42px;
    border-radius: 4px;
    margin-left: 10px;
    cursor: pointer;
    border: 1px solid #e0e0e0;
}
/* 表单选项 */
.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    font-size: 13px;
}
.form-options label {
    display: flex;
    align-items: center;
    color: #606266;
    cursor: pointer;
}
.form-options input[type="checkbox"] {
    margin-right: 5px;
    cursor: pointer;
}
.form-options a {
    color: #409eff;
    text-decoration: none;
    transition: color 0.3s;
}
.form-options a:hover {
    color: #66b1ff;
}
/* 登录按钮 */
.login-btn {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    background-color: #409eff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
}
.login-btn:hover {
    background-color: #66b1ff;
}
.login-btn:active {
    background-color: #3a8ee6;
}
/* 页脚 */
.login-footer {
    position: absolute;
    bottom: 20px;
    color: #a0a0a0;
    font-size: 12px;
}
.login-footer a {
    color: #a0a0a0;
    text-decoration: none;
}
.login-footer a:hover {
    color: #606266;
}
/* 响应式设计 */
@media (max-width: 768px) {
    .login-box {
        padding: 30px 40px;
    }
    .login-header h1 {
        font-size: 22px;
    }
}

准备图片资源

您需要在 /dede/templets/images/ 目录下放置以下图片文件：

login-bg.jpg：一张高清的背景图片，用于美化登录页背景。
logo.png：您的网站 Logo，建议使用白色或浅色背景的 Logo，以便在深色背景上显示。

注意：如果不想使用背景图，可以直接删除 login.htm 中 <body> 标签里的 style 样式，CSS 中 body 的 background-color 会被应用。

（图片来源网络，侵删）

高级美化技巧（可选）

如果您想更进一步,可以考虑以下技巧：

添加动态背景：使用 particles.js 或 AOS.js 等库，为登录页添加动态粒子效果或滚动动画，会非常炫酷。
侧边栏布局：将登录表单放在左侧，右侧是一个全屏的、带有关键信息（如网站截图、数据统计、Slogan）的展示面板，这需要更复杂的 HTML 和 CSS 布局。
主题切换：增加一个深色/浅色模式切换按钮，让用户可以根据喜好选择界面主题。
自定义验证码：修改 /include/vdimgck.php 文件，可以改变验证码的字体、颜色、干扰线等样式，使其与整体设计风格更搭。

注意事项

备份原文件：在修改任何系统文件之前，务必备份原始的 login.htm 文件，以防修改出错可以快速恢复。
安全第一：华丽的外表不能牺牲安全性，请确保您的后台入口 /dede/ 没有被轻易猜到，可以尝试修改默认的后台目录名。
浏览器兼容性：如果您需要支持非常老旧的浏览器（如 IE），需要调整 CSS 样式，去除一些现代特性。
升级问题：如果您未来升级 Dedecms 程序，login.htm 文件可能会被覆盖，建议您在升级后重新应用此美化模板，或者将自定义的模板文件重命名，然后修改 config.php 中的相关配置来指向您的自定义模板。

通过以上步骤,您就可以轻松地为您的 Dedecms 后台打造一个既美观又专业的登录界面了。

dedecms后台登录界面模板如何实现华丽效果？

设计思路与美化要点

文件位置与修改方法

直接可用的华丽登录模板

修改 login.htm 文件

创建 login.css 样式文件

准备图片资源

高级美化技巧（可选）

注意事项

修改 `login.htm` 文件

创建 `login.css` 样式文件