安全初级——网页

最新推荐文章于 2025-08-14 15:32:16 发布

原创最新推荐文章于 2025-08-14 15:32:16 发布 · 273 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#安全 #css #javascript

网页代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#6B7280',
                        accent: '#3B82F6',
                        light: '#F3F4F6',
                        dark: '#1F2937'
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
            }
            .input-focus {
                @apply focus:ring-2 focus:ring-primary/50 focus:border-primary focus:outline-none;
            }
            @keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-50px); }
}
        }
    </style>
</head>
<body class="bg-black font-inter min-h-screen flex items-center justify-center p-4 text-white">
    <div class="w-full max-w-md">
        <div class="bg-gradient-to-br from-blue-200 to-blue-400 rounded-2xl p-8 shadow-xl transition-all duration-300 animate-float duration-2000 cubic-bezier(0.2, 0.8, 0.2, 1)">
            <div class="text-center mb-8">
                <h1 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-white">用户登录</h1>
                <p class="text-blue-100 mt-2">欢迎回来，请登录您的账号</p>
            </div>

            <form id="loginForm" class="space-y-6">
                <div>
                    <label for="username" class="block text-sm font-medium text-blue-100 mb-1">用户名</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                            <i class="fa fa-user"></i>
                        </span>
                        <input type="text" id="username" name="username" required
                            class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg input-focus transition-all"
                            placeholder="请输入用户名">
                    </div>
                </div>

                <div>
                    <div class="flex justify-between items-center mb-1">
                        <label for="password" class="block text-sm font-medium text-blue-100">密码</label>
                        <a href="#" class="text-sm text-primary hover:text-primary/80 transition-colors" id="forgotPassword">忘记密码?</a>
                    </div>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                            <i class="fa fa-lock"></i>
                        </span>
                        <input type="password" id="password" name="password" required
                            class="w-full pl-10 pr-10 py-3 border border-gray-300 rounded-lg input-focus transition-all"
                            placeholder="请输入密码">
                        <button type="button" id="togglePassword" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600 transition-colors">
                            <i class="fa fa-eye"></i>
                        </button>
                    </div>
                </div>

                <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-all transform hover:scale-[1.02] active:scale-[0.98] focus:ring-4 focus:ring-primary/20">
                    登录
                </button>
            </form>

            <div class="mt-8 text-center">
                <p class="text-blue-100">
                    还没有账号? <a href="#" class="text-primary font-medium hover:text-primary/80 transition-colors" id="registerLink">立即注册</a>
                </p>
            </div>
        </div>
    </div>

    <script>
        // 密码显示/隐藏切换
        const togglePassword = document.getElementById('togglePassword');
        const passwordInput = document.getElementById('password');

        togglePassword.addEventListener('click', () => {
            const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
            passwordInput.setAttribute('type', type);
            togglePassword.querySelector('i').classList.toggle('fa-eye');
            togglePassword.querySelector('i').classList.toggle('fa-eye-slash');
        });

        // 表单提交处理
        const loginForm = document.getElementById('loginForm');
        loginForm.addEventListener('submit', (e) => {
            e.preventDefault();
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;

            // 简单的表单验证
            if (!username || !password) {
                alert('请输入用户名和密码');
                return;
            }

            // 这里可以添加实际的登录逻辑
            alert(`登录成功！用户名: ${username}`);
        });

        // 忘记密码链接
        document.getElementById('forgotPassword').addEventListener('click', (e) => {
            e.preventDefault();
            alert('忘记密码功能将在后续版本中实现');
        });

        // 注册链接
        document.getElementById('registerLink').addEventListener('click', (e) => {
            e.preventDefault();
            alert('注册功能将在后续版本中实现');
        });

        // 添加输入框获得焦点时的动画效果
        const inputs = document.querySelectorAll('input');
        inputs.forEach(input => {
            input.addEventListener('focus', () => {
                input.parentElement.classList.add('scale-[1.01]');
                input.parentElement.style.transition = 'transform 0.2s ease';
            });
            input.addEventListener('blur', () => {
                input.parentElement.classList.remove('scale-[1.01]');
            });
        });
    </script>
</body>
</html>

生成效果

核心部分

文档声明与根元素

- <!DOCTYPE html> 声明文档类型为HTML5
- <html lang="zh-CN"> 定义根元素并指定页面语言为简体中文

头部区域<head>：包含页面数据及自愿引用

主题内容<body>：使用Flex布局实现内容居中，包含登录卡片容器

核心组件结构

标题区域：包含页面标题和欢迎文本

登录表单：包含用户名/密码输入框、表单验证和提交按钮

辅助链接：包含"忘记密码"和"立即注册"功能链接

交互脚本：位于页面底部，处理表单提交、密码显示切换等交互逻辑

部分解释

1、头部文档（head）

`index.html` 的头部区域定义了页面元数据和外部资源引用：

使用 <meta charset="UTF-8"> 指定字符编码

通过 <meta name="viewport"> 设置响应式视口

引入Tailwind CSS和Font Awesome图标库

配置Tailwind自定义主题（颜色、字体等）

定义浮动动画关键帧和工具类

2、页面主体（body）

主体部分采用黑色背景（ bg-black ）和白色文字（ text-white ），通过Flex布局将内容垂直和水平居中：<body class="bg-black font-inter min-h-screen flex items-center justify-center p-4 text-white">

3、登录卡片容器

核心登录区域使用蓝色渐变背景（ bg-gradient-to-br from-blue-200 to-blue-400 ）和浮动动画（ animate-float ）：<div class="bg-gradient-to-br from-blue-200 to-blue-400 rounded-2xl p-8 shadow-xl transition-all duration-300 animate-float duration-2000 cubic-bezier(0.2, 0.8, 0.2, 1)">

rounded-2xl 创建圆角效果

shadow-xl 添加阴影深度

animate-float 应用上下浮动动画