现代简约风格

这个模板设计简洁、现代，使用了渐变背景和卡片式布局，适合大多数网站。

网页登陆页面模板 html代码下载
（图片来源网络，侵删）

特点：

  • 响应式设计：在手机和电脑上都能完美显示。
  • 现代UI：使用卡片、阴影和圆角，视觉效果清爽。
  • 表单验证：包含基础的HTML5表单验证。
  • 切换功能：可以轻松切换登录和注册表单。

代码 (直接复制保存为 .html 文件即可)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">登录 - 现代简约风格</title>
    <style>
        /* --- 全局样式 --- */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        /* --- 登录/注册容器 --- */
        .container {
            background-color: white;
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
            width: 400px;
            max-width: 90%; /* 在小屏幕上自适应 */
        }
        .container h1 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
        }
        /* --- 表单样式 --- */
        .form-group {
            margin-bottom: 20px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            color: #555;
            font-weight: 600;
        }
        .form-group input {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
            transition: border-color 0.3s;
        }
        .form-group input:focus {
            border-color: #667eea;
            outline: none;
        }
        /* --- 按钮样式 --- */
        .btn {
            width: 100%;
            padding: 12px;
            background-color: #667eea;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .btn:hover {
            background-color: #5a67d8;
        }
        /* --- 切换链接 --- */
        .form-footer {
            text-align: center;
            margin-top: 20px;
            font-size: 14px;
            color: #666;
        }
        .form-footer a {
            color: #667eea;
            text-decoration: none;
            font-weight: bold;
        }
        .form-footer a:hover {
            text-decoration: underline;
        }
        /* --- 注册表单（默认隐藏） --- */
        #register-form {
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 登录表单 -->
        <form id="login-form">
            <h1>用户登录</h1>
            <div class="form-group">
                <label for="login-email">邮箱</label>
                <input type="email" id="login-email" placeholder="请输入您的邮箱" required>
            </div>
            <div class="form-group">
                <label for="login-password">密码</label>
                <input type="password" id="login-password" placeholder="请输入您的密码" required>
            </div>
            <button type="submit" class="btn">登录</button>
            <div class="form-footer">
                还没有账号？ <a href="#" id="show-register">立即注册</a>
            </div>
        </form>
        <!-- 注册表单 -->
        <form id="register-form">
            <h1>用户注册</h1>
            <div class="form-group">
                <label for="register-username">用户名</label>
                <input type="text" id="register-username" placeholder="请输入用户名" required>
            </div>
            <div class="form-group">
                <label for="register-email">邮箱</label>
                <input type="email" id="register-email" placeholder="请输入您的邮箱" required>
            </div>
            <div class="form-group">
                <label for="register-password">密码</label>
                <input type="password" id="register-password" placeholder="请输入您的密码" required>
            </div>
            <button type="submit" class="btn">注册</button>
            <div class="form-footer">
                已有账号？ <a href="#" id="show-login">立即登录</a>
            </div>
        </form>
    </div>
    <script>
        // 获取DOM元素
        const loginForm = document.getElementById('login-form');
        const registerForm = document.getElementById('register-form');
        const showRegisterLink = document.getElementById('show-register');
        const showLoginLink = document.getElementById('show-login');
        // 切换到注册表单
        showRegisterLink.addEventListener('click', (e) => {
            e.preventDefault();
            loginForm.style.display = 'none';
            registerForm.style.display = 'block';
        });
        // 切换到登录表单
        showLoginLink.addEventListener('click', (e) => {
            e.preventDefault();
            registerForm.style.display = 'none';
            loginForm.style.display = 'block';
        });
        // 处理登录表单提交
        loginForm.addEventListener('submit', (e) => {
            e.preventDefault();
            const email = document.getElementById('login-email').value;
            const password = document.getElementById('login-password').value;
            // 这里添加你的登录逻辑，例如发送AJAX请求到后端
            alert(`登录逻辑: 邮箱=${email}, 密码=${password}`);
            console.log('登录表单已提交');
        });
        // 处理注册表单提交
        registerForm.addEventListener('submit', (e) => {
            e.preventDefault();
            const username = document.getElementById('register-username').value;
            const email = document.getElementById('register-email').value;
            const password = document.getElementById('register-password').value;
            // 这里添加你的注册逻辑
            alert(`注册逻辑: 用户名=${username}, 邮箱=${email}, 密码=${password}`);
            console.log('注册表单已提交');
        });
    </script>
</body>
</html>

专业企业风格

这个模板更正式、稳重，适合企业级应用、后台管理系统等场景。

特点：

  • 经典布局：居中布局，色调沉稳（深蓝、灰色）。
  • 清晰的结构、输入框、按钮布局分明。
  • 专注的体验：没有多余的装饰，让用户专注于登录操作。

代码 (直接复制保存为 .html 文件即可)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">登录 - 专业企业风格</title>
    <style>
        /* --- 全局样式 --- */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Helvetica Neue', Arial, sans-serif;
        }
        body {
            background-color: #f4f7f6;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        /* --- 登录容器 --- */
        .login-box {
            background-color: #fff;
            padding: 40px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            width: 380px;
        }
        .login-box h2 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 30px;
            font-weight: 500;
        }
        /* --- Logo区域 --- */
        .logo-container {
            text-align: center;
            margin-bottom: 25px;
        }
        .logo-container img {
            width: 80px;
            height: 80px;
        }
        /* --- 表单样式 --- */
        .input-group {
            margin-bottom: 20px;
            position: relative;
        }
        .input-group input {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 15px;
            transition: border-color 0.3s;
        }
        .input-group input:focus {
            border-color: #3498db;
            outline: none;
        }
        /* --- 按钮样式 --- */
        .login-btn {
            width: 100%;
            padding: 12px;
            background-color: #2c3e50;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .login-btn:hover {
            background-color: #1a252f;
        }
        /* --- 底部链接 --- */
        .login-footer {
            text-align: center;
            margin-top: 20px;
            font-size: 14px;
            color: #7f8c8d;
        }
        .login-footer a {
            color: #3498db;
            text-decoration: none;
        }
        .login-footer a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="login-box">
        <div class="logo-container">
            <!-- 在这里替换成你的Logo图片 -->
            <img src="https://via.placeholder.com/80" alt="公司Logo">
        </div>
        <h2>欢迎登录</h2>
        <form action="#" method="post">
            <div class="input-group">
                <input type="text" name="username" placeholder="请输入用户名/邮箱" required>
            </div>
            <div class="input-group">
                <input type="password" name="password" placeholder="请输入密码" required>
            </div>
            <button type="submit" class="login-btn">登录</button>
        </form>
        <div class="login-footer">
            <a href="#">忘记密码？</a>
        </div>
    </div>
</body>
</html>

如何使用这些模板

  1. 复制代码：选择你喜欢的模板，将上面的全部代码复制下来。
  2. 创建文件：在你的电脑上新建一个文本文件，将复制的代码粘贴进去。
  3. 保存文件：将文件另存为 login.html 或任何你喜欢的 .html 文件名。
  4. 打开预览：用任何现代浏览器（如 Chrome, Firefox, Edge）打开这个 login.html 文件，你就能看到登录页面了。
  5. 自定义修改：
    • 修改文字：直接在HTML中修改 <h1>、<label>、<a> 等标签内的文字。
    • 修改颜色：在 <style> 标签中找到 background-color, color 等属性，修改它们的值。
    • 修改Logo：在模板二中，找到 <img src="..."> 这一行，将 src 属性的值替换为你自己的Logo图片路径。
    • 添加功能：<script> 部分包含了处理表单切换和模拟提交的逻辑，你可以在这里编写真正的AJAX请求，将用户数据发送到你的服务器。

希望这些模板能帮到你！

网页登陆页面模板 html代码下载
（图片来源网络，侵删）