搜索
DEDE建站

dede注册页面仿制

99ANYc3cd6
99ANYc3cd6 / / 0 评论 / 3 阅读
作者有点忙，还没来得及写简介......
预计阅读时长 41 分钟
位置： 首页 › DEDE建站 › 正文

DedeCMS 的页面风格通常具有以下特点：

dede注册页面仿制
（图片来源网络，侵删）
  • 布局结构：经典的“左右分栏”或“上下分栏”布局，内容区域居中。
  • 视觉风格：早期以蓝色、灰色为主色调，界面简洁、朴素，带有浓厚的 Web 2.0 时代气息。
  • 表单元素：使用 <table> 进行布局，这是 DedeCMS 及许多早期 CMS 的标志性特征，表单元素（输入框、按钮）样式较为基础。
  • 交互提示：通常使用 alert() 弹窗进行简单的错误或成功提示。

下面,我将分步为您创建一个仿 DedeCMS 风格的注册页面，包含 HTML 结构、CSS 样式和基础的 JavaScript 交互。

第一步：HTML 结构

我们将创建一个包含头部、主体（注册表单）和底部的完整页面，主体部分将使用 <table> 来布局表单元素，这是仿制的核心。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">会员注册 - 仿 DedeCMS 风格</title>
    <!-- 引入我们稍后会写的 CSS 文件 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 1. 页面头部 -->
    <div class="header">
        <div class="logo">
            <a href="/">DedeCMS 仿制站点</a>
        </div>
    </div>
    <!-- 2. 主体内容区 -->
    <div class="main">
        <div class="reg-main">
            <h3>会员注册</h3>
            <!-- 使用 table 布局，这是 DedeCMS 的经典特征 -->
            <form name="userform" id="regForm" action="register.php" method="post" onSubmit="return checkSubmit()">
                <table width="100%" border="0" cellpadding="5" cellspacing="1" bgcolor="#e9e9e9">
                    <tr>
                        <td height="35" align="right" bgcolor="#f7f7f7">用户名：</td>
                        <td bgcolor="#ffffff">
                            <input type="text" name="userid" id="userid" class="intxt" size="30" />
                            <span class="gray">4-12位字符，字母、数字、下划线</span>
                        </td>
                    </tr>
                    <tr>
                        <td height="35" align="right" bgcolor="#f7f7f7">密码：</td>
                        <td bgcolor="#ffffff">
                            <input type="password" name="pwd" id="pwd" class="intxt" size="30" />
                            <span class="gray">6-20位字符，建议使用字母+数字组合</span>
                        </td>
                    </tr>
                    <tr>
                        <td height="35" align="right" bgcolor="#f7f7f7">确认密码：</td>
                        <td bgcolor="#ffffff">
                            <input type="password" name="pwdok" id="pwdok" class="intxt" size="30" />
                        </td>
                    </tr>
                    <tr>
                        <td height="35" align="right" bgcolor="#f7f7f7">电子邮箱：</td>
                        <td bgcolor="#ffffff">
                            <input type="text" name="email" id="email" class="intxt" size="30" />
                            <span class="gray">用于找回密码和接收通知</span>
                        </td>
                    </tr>
                    <tr>
                        <td height="35" align="right" bgcolor="#f7f7f7">验证码：</td>
                        <td bgcolor="#ffffff">
                            <input type="text" name="vdcode" id="vdcode" class="intxt" size="10" />
                            <!-- 仿制 DedeCMS 的验证码图片 -->
                            <img id="vdimgck" src="img.php" alt="看不清？点击换一张" align="absmiddle" style="cursor:pointer" onclick="this.src='img.php?'+Math.random();" />
                        </td>
                    </tr>
                    <tr>
                        <td height="35" align="right" bgcolor="#f7f7f7">&nbsp;</td>
                        <td bgcolor="#ffffff">
                            <input type="checkbox" name="agree" id="agree" value="1" />
                            <label for="agree">我已阅读并同意 <a href="#">《用户协议》</a></label>
                        </td>
                    </tr>
                    <tr>
                        <td height="35" align="right" bgcolor="#f7f7f7">&nbsp;</td>
                        <td bgcolor="#ffffff">
                            <input type="submit" name="submit" value="同意协议并注册" class="coolbg" />
                            <input type="reset" name="reset" value="重 填" class="coolbg" />
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
    <!-- 3. 页面底部 -->
    <div class="footer">
        <p>Copyright &copy; 2025 DedeCMS 仿制站点 All Rights Reserved.</p>
    </div>
    <!-- 引入我们稍后会写的 JavaScript 文件 -->
    <script src="script.js"></script>
</body>
</html>

第二步：CSS 样式

我们为上面的 HTML 添加 CSS 样式，以实现 DedeCMS 经典的视觉风格。

/* style.css */
/* 全局重置和基础样式 */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, "宋体", sans-serif;
    font-size: 12px;
    background-color: #f5f5f5;
    color: #333;
}
a {
    color: #0066cc;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
/* 头部样式 */
.header {
    background-color: #3d80d6;
    height: 70px;
    border-bottom: 2px solid #2d6bb8;
}
.logo {
    width: 960px;
    margin: 0 auto;
    line-height: 70px;
    text-align: center;
}
.logo a {
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
}
区样式 */
.main {
    width: 960px;
    margin: 20px auto;
    background-color: #fff;
    border: 1px solid #dcdcdc;
    border-radius: 3px;
}
.reg-main {
    padding: 20px;
    width: 500px; /* 固定宽度，居中显示 */
    margin: 0 auto;
}
.reg-main h3 {
    text-align: center;
    font-size: 16px;
    margin-bottom: 20px;
    color: #3d80d6;
}
/* 表单样式 - 核心部分 */
.reg-main table {
    border-collapse: collapse;
}
.reg-main td {
    line-height: 25px;
}
.reg-main .intxt {
    border: 1px solid #ccc;
    padding: 4px 5px;
    width: 200px;
    height: 24px;
    font-size: 12px;
    box-sizing: border-box; /* 确保padding不会增加宽度 */
}
.reg-main .gray {
    color: #999;
    margin-left: 5px;
}
.reg-main .coolbg {
    background-color: #3d80d6;
    color: #fff;
    border: none;
    padding: 6px 15px;
    height: 30px;
    cursor: pointer;
    font-size: 12px;
    border-radius: 3px;
}
.reg-main .coolbg:hover {
    background-color: #2d6bb8;
}
/* 底部样式 */
.footer {
    text-align: center;
    margin-top: 20px;
    padding: 20px 0;
    color: #999;
    font-size: 12px;
}

第三步：JavaScript 交互

我们添加一些简单的 JavaScript 来处理表单提交验证和仿制 DedeCMS 的 alert() 提示。

dede注册页面仿制
（图片来源网络，侵删）
// script.js
function checkSubmit() {
    // 获取表单元素
    var userid = document.getElementById('userid');
    var pwd = document.getElementById('pwd');
    var pwdok = document.getElementById('pwdok');
    var email = document.getElementById('email');
    var vdcode = document.getElementById('vdcode');
    var agree = document.getElementById('agree');
    // 用户名验证
    if (userid.value.length < 4 || userid.value.length > 12) {
        alert('用户名长度必须在4-12位之间！');
        userid.focus();
        return false;
    }
    // 密码验证
    if (pwd.value.length < 6 || pwd.value.length > 20) {
        alert('密码长度必须在6-20位之间！');
        pwd.focus();
        return false;
    }
    // 确认密码验证
    if (pwd.value !== pwdok.value) {
        alert('两次输入的密码不一致！');
        pwdok.focus();
        return false;
    }
    // 邮箱格式验证
    var emailReg = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
    if (!emailReg.test(email.value)) {
        alert('请输入有效的电子邮箱地址！');
        email.focus();
        return false;
    }
    // 验证码验证
    if (vdcode.value.length !== 4) {
        alert('请输入4位验证码！');
        vdcode.focus();
        return false;
    }
    // 用户协议验证
    if (!agree.checked) {
        alert('请阅读并同意用户协议！');
        return false;
    }
    // 所有验证通过，可以提交
    // 在实际项目中，这里通常会使用 AJAX 提交数据
    // 为了仿制 DedeCMS 的风格，我们使用 alert 提示成功
    alert('注册成功！正在跳转...');
    return true;
}

第四步：仿制验证码（可选）

img.php 是一个用于生成验证码图片的 PHP 文件，如果你没有 PHP 环境，可以用一张静态图片代替，或者用 JavaScript 生成一个简单的验证码。

使用静态图片 (最简单)

创建一个名为 img.php 的文件，内容如下，它只是输出一张图片。

<?php
// img.php
// 实际项目中，这里会用 GD 库动态生成验证码图片
// 这里我们直接输出一张示例图片
header("Content-type: image/jpeg");
readfile("captcha_sample.jpg"); // 请准备一张名为 captcha_sample.jpg 的图片
?>

使用 JavaScript 生成简单验证码

dede注册页面仿制
（图片来源网络，侵删）

如果你想在前端完成,可以在 HTML 中添加 <script> 标签，并在 script.js 中添加生成验证码的函数。

HTML 修改: 在 <body> 标签结束前添加：

<script>
    // 页面加载时生成验证码
    window.onload = function() {
        generateCaptcha();
    };
    function generateCaptcha() {
        const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
        let captcha = '';
        for (let i = 0; i < 4; i++) {
            captcha += chars.charAt(Math.floor(Math.random() * chars.length));
        }
        document.getElementById('vdimgck').setAttribute('data-captcha', captcha);
        // 在真实场景中，这里会把 captcha 存入 session
    }
</script>

JavaScript 修改: 修改 checkSubmit 函数，增加对 JS 生成验证码的校验。

// 在 script.js 的 checkSubmit 函数中，修改验证码验证部分
// ...
// 验证码验证
var captcha = document.getElementById('vdimgck').getAttribute('data-captcha');
if (vdcode.value.toUpperCase() !== captcha) {
    alert('验证码输入错误！');
    vdcode.focus();
    generateCaptcha(); // 错误后刷新验证码
    vdcode.value = '';
    return false;
}
// ...

你将拥有一个完整的、仿 DedeCMS 风格的注册页面。

  • HTML：使用了 <table> 布局，并包含了所有经典的注册字段。
  • CSS：模仿了 DedeCMS 简洁、朴素的蓝灰色调风格。
  • JavaScript：实现了基础的表单校验和 alert() 提示，符合 DedeCMS 的交互习惯。

你可以将这三个文件（index.html, style.css, script.js）放在同一个文件夹下，用浏览器打开 index.html 即可看到效果。

-- 展开阅读全文 --
头像
srandom函数如何正确使用与种子设置？
« 上一篇 04-12
C语言barrier是什么？如何使用？
下一篇 » 04-12

相关文章

取消
微信二维码
支付宝二维码

目录[+]