当前位置：首页 > news >正文

前端的测试

news 2025/7/23 11:56:20

<!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 CSS配置tailwind.config = {theme: {extend: {colors: {primary: '#165DFF',    //主色调（蓝色）secondary: '#4080FF',neutral: '#F5F7FA',dark: '#1D2129',},fontFamily: {inter: ['Inter', 'system-ui', 'sans-serif'],},},}}</script><style type="text/tailwindcss">#自定义CSS工具类@layer utilities {.content-auto {content-visibility: auto;}.card-shadow {    //卡片阴影效果box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1);}.input-focus {   	//输入框获得焦点时的样式@apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;}.btn-hover { 	//按钮悬停动画效果（轻微上浮+阴影加深）@apply hover:shadow-lg hover:-translate-y-0.5 transition-all duration-300;}}</style>
</head><body class="font-inter bg-gradient-to-br from-neutral to-gray-100 min-h-screen flex items-center justify-center p-4">
// min-h-screen : 确保页面至少占满整个屏幕高度
// flex items-center justify-center : 使用Flex布局将登录卡片居中
//max-w-md : 限制卡片最大宽度，在大屏幕上不会太宽
//rounded-2xl : 卡片圆角设计，现代感更强<div class="w-full max-w-md"><!-- 登录卡片 --><div class="bg-white rounded-2xl p-8 card-shadow transform transition-all duration-500 hover:shadow-xl"><!-- 标题区域 --><div class="text-center mb-8"><h1 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark mb-2">欢迎回来</h1><p class="text-gray-500">请登录您的账号</p></div><!-- 登录表单 --><form id="loginForm" class="space-y-6"><!-- 用户名输入框 --><div class="space-y-2"><label for="username" class="block text-sm font-medium text-gray-700">账号</label><div class="relative"><div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400"><i class="fa fa-user"></i></div>     <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"placeholder="请输入账号">            //required : HTML5表单验证，确保用户必须填写</div> </div><!-- 密码输入框 --><div class="space-y-2"><label for="password" class="block text-sm font-medium text-gray-700">密码</label><div class="relative"><div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400"><i class="fa fa-lock"></i></div><input type="password" id="password" name="password" requiredclass="w-full pl-10 pr-10 py-3 border border-gray-300 rounded-lg input-focus"placeholder="请输入密码"><button type="button" id="togglePassword" class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-primary"><i class="fa fa-eye-slash"></i></button></div></div><!-- 记住我和忘记密码 --><div class="flex items-center justify-between"><div class="flex items-center"><input id="remember-me" name="remember-me" type="checkbox"class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"><label for="remember-me" class="ml-2 block text-sm text-gray-700">记住我</label></div><div class="text-sm"><a href="#" class="font-medium text-primary hover:text-secondary">忘记密码?</a></div></div><!-- 登录按钮 --><div><button type="submit"class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary btn-hover">登录</button></div></form><!-- 注册链接 --><div class="mt-6 text-center text-sm text-gray-600">还没有账号? <a href="#" class="font-medium text-primary hover:text-secondary">立即注册</a></div></div></div><!-- JavaScript --><script>// 密码显示/隐藏切换const togglePassword = document.getElementById('togglePassword');const passwordInput = document.getElementById('password');togglePassword.addEventListener('click', function() {// 切换密码可见性const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';passwordInput.setAttribute('type', type);  //通过修改 type 属性切换密码框显示状态// 切换图标this.querySelector('i').classList.toggle('fa-eye');  //使用 classList.toggle() 切换图标this.querySelector('i').classList.toggle('fa-eye-slash');});// 表单提交处理const loginForm = document.getElementById('loginForm');loginForm.addEventListener('submit', function(e) {e.preventDefault();   //e.preventDefault() : 阻止页面刷新const username = document.getElementById('username').value;const password = document.getElementById('password').value;// 在实际应用中，这里会发送登录请求到服务器alert(`账号: ${username}\n密码: ${password}\n\n登录功能已触发，实际应用中会发送请求到服务器`);});</script>
</body>
</html>

: 声明文档类型为HTML5: HTML根元素， lang="zh-CN" 表示页面使用中文: 包含页面元数据（如字符集、标题）和外部资源: 包含用户可见的页面内容