安全初級——網頁

網頁代碼

<!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" requiredclass="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" requiredclass="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 應用上下浮動動畫

4、表單結構

登錄表單包含以下元素：

用戶名輸入框：帶有用戶圖標和必填驗證

密碼輸入框：帶有鎖圖標、顯示/隱藏切換功能

"忘記密碼"鏈接：點擊觸發提示框

登錄按鈕：帶有懸停縮放效果

注冊鏈接：點擊觸發提示框

5、響應式設計

頁面通過以下方式實現響應式布局：

使用 max-w-md 限制卡片最大寬度

clamp() 函數動態調整標題大小

百分比寬度和內邊距適應不同屏幕尺寸

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/92673.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/92673.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/92673.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！