大学生期末大作业|HTML+CSS+JavaScript 登录页面实例：超实用、新手友好、完整源码分享从零开始：用原生 HTML、CSS 和 JS 打造简洁美观的登录页面（附完整代码）新手必看：一

南北极之间

于 2024-10-07 20:20:47 发布

阅读量437

点赞数 14

文章标签： html css 大学生期末大作业前端 html5 javascript

本文链接：https://blog.csdn.net/qq_22182989/article/details/142745682

版权

效果图：
在这里插入图片描述

步骤

在 Web 开发中，登录页面是常见且重要的组件。一个设计良好的登录页面可以提升用户体验，并为网站留下良好的第一印象。今天，我们将一起学习如何使用 HTML、CSS 和 JavaScript（不使用任何框架）来构建一个响应式的登录页面，实现基本的前端验证功能。

一、新建一个 HTML 项目

首先，创建一个新的 HTML 文件，命名为 login.html。你可以使用任何代码编辑器，如 VSCode、Sublime Text 或 Notepad++。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>登录页面示例</title>
</head>
<body>

</body>
</html>

二、创建基本结构

在 <body> 标签中，添加登录表单的基本结构，包括用户名和密码的输入框，以及登录按钮。

<body>
    <div class="login-container">
        <h2>用户登录</h2>
        <form id="login-form">
            <div class="input-group">
                <label for="username">用户名</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="input-group">
                <label for="password">密码</label>
                <input type="password" id="password" name="password" required>
            </div>
            <button type="submit">登录</button>
        </form>
    </div>
</body>

.login-container：用于包裹整个登录表单的容器。
<form>：表单元素，包含用户名和密码的输入。
.input-group：每个输入字段的分组，包括标签和输入框。

三、使用 CSS 美化页面

在 <head> 标签中，添加 <style> 标签，编写页面的样式，使登录页面更加美观。

<head>
    <meta charset="UTF-8">
    <title>登录页面示例</title>
    <style>
        /* 设置页面背景和字体 */
        body {
            background-color: #ecf0f1;
            font-family: Arial, sans-serif;
        }

        /* 登录容器样式 */
        .login-container {
            width: 360px;
            margin: 80px auto;
            padding: 40px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .login-container h2 {
            text-align: center;
            margin-bottom: 30px;
            color: #2c3e50;
        }

        /* 输入组样式 */
        .input-group {
            margin-bottom: 20px;
        }

        .input-group label {
            display: block;
            margin-bottom: 8px;
            color: #34495e;
        }

        .input-group input {
            width: 100%;
            padding: 10px;
            border: 1px solid #bdc3c7;
            border-radius: 4px;
            font-size: 16px;
        }

        /* 登录按钮样式 */
        button[type="submit"] {
            width: 100%;
            padding: 12px;
            background-color: #3498db;
            border: none;
            border-radius: 4px;
            color: #fff;
            font-size: 18px;
            cursor: pointer;
        }

        button[type="submit"]:hover {
            background-color: #2980b9;
        }

        /* 响应式设计 */
        @media screen and (max-width: 480px) {
            .login-container {
                width: 90%;
                padding: 20px;
            }
        }
    </style>
</head>

设置了页面的背景颜色和字体。
为登录容器、输入组和按钮添加了样式，使其居中并具有良好的视觉效果。
添加了简单的响应式设计，使页面在移动设备上显示良好。

四、添加交互功能

为了实现简单的前端验证和交互，我们需要添加 JavaScript 代码。在 <body> 底部，添加 <script> 标签，编写交互逻辑。

<body>
    <!-- 上面的代码 -->
    <!-- ... -->

    <!-- JavaScript 部分 -->
    <script>
        const loginForm = document.getElementById('login-form');

        loginForm.addEventListener('submit', function(event) {
            event.preventDefault(); // 阻止表单的默认提交行为

            const username = document.getElementById('username').value.trim();
            const password = document.getElementById('password').value.trim();

            if (username === '' || password === '') {
                alert('请输入用户名和密码');
                return;
            }

            // 简单的前端验证（演示用）
            if (username === 'admin' && password === '123456') {
                alert('登录成功！');
                // 在此可以跳转到主页或执行其他操作
            } else {
                alert('用户名或密码错误');
            }
        });
    </script>
</body>

event.preventDefault()：阻止表单的默认提交行为，以便我们在前端处理验证逻辑。
前端验证：检查用户名和密码是否为空，并进行简单的验证（实际项目中应使用后端验证）。

五、完整代码

将以上部分组合在一起，得到完整的代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>登录页面示例</title>
    <style>
        /* 设置页面背景和字体 */
        body {
            background-color: #ecf0f1;
            font-family: Arial, sans-serif;
        }

        /* 登录容器样式 */
        .login-container {
            width: 360px;
            margin: 80px auto;
            padding: 40px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .login-container h2 {
            text-align: center;
            margin-bottom: 30px;
            color: #2c3e50;
        }

        /* 输入组样式 */
        .input-group {
            margin-bottom: 20px;
        }

        .input-group label {
            display: block;
            margin-bottom: 8px;
            color: #34495e;
        }

        .input-group input {
            width: 100%;
            padding: 10px;
            border: 1px solid #bdc3c7;
            border-radius: 4px;
            font-size: 16px;
        }

        /* 登录按钮样式 */
        button[type="submit"] {
            width: 100%;
            padding: 12px;
            background-color: #3498db;
            border: none;
            border-radius: 4px;
            color: #fff;
            font-size: 18px;
            cursor: pointer;
        }

        button[type="submit"]:hover {
            background-color: #2980b9;
        }

        /* 响应式设计 */
        @media screen and (max-width: 480px) {
            .login-container {
                width: 90%;
                padding: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h2>用户登录</h2>
        <form id="login-form">
            <div class="input-group">
                <label for="username">用户名</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="input-group">
                <label for="password">密码</label>
                <input type="password" id="password" name="password" required>
            </div>
            <button type="submit">登录</button>
        </form>
    </div>

    <!-- JavaScript 部分 -->
    <script>
        const loginForm = document.getElementById('login-form');

        loginForm.addEventListener('submit', function(event) {
            event.preventDefault(); // 阻止表单的默认提交行为

            const username = document.getElementById('username').value.trim();
            const password = document.getElementById('password').value.trim();

            if (username === '' || password === '') {
                alert('请输入用户名和密码');
                return;
            }

            // 简单的前端验证（演示用）
            if (username === 'admin' && password === '123456') {
                alert('登录成功！');
                // 在此可以跳转到主页或执行其他操作
            } else {
                alert('用户名或密码错误');
            }
        });
    </script>
</body>
</html>