寫了一段html代碼
實現的效果：
實現右上角有個圖標，鼠標移動到該位置出現手型，點擊會彈出登錄窗口。
功能實現前端，沒有實現后端。
<!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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"><style>/* 遮罩層 */.modal-overlay {transition: opacity 0.3s ease;opacity: 0;pointer-events: none;}.modal-overlay.active {opacity: 1;pointer-events: all;}/* 登錄窗口 */.login-modal {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%) scale(0.95);opacity: 0;pointer-events: none;transition: all 0.3s ease;z-index: 50;}.login-modal.active {transform: translate(-50%, -50%) scale(1);opacity: 1;pointer-events: all;}</style>
</head>
<body class="bg-gray-100 relative"><!-- 右上角登錄圖標 -->
<div class="absolute top-4 right-4 z-10"><button id="loginBtn" class="w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center text-white shadow hover:bg-blue-600 transition cursor-pointer"><i class="fa-solid fa-user text-xl"></i></button>
</div><!-- 登錄窗口遮罩層 -->
<div id="modalOverlay" class="modal-overlay fixed inset-0 bg-black/50"></div><!-- 登錄窗口 -->
<div id="loginModal" class="login-modal bg-white rounded-lg shadow-xl w-full max-w-md p-6"><div class="flex justify-end mb-4"><button id="closeBtn" class="text-gray-500 hover:text-gray-700 transition"><i class="fa-solid fa-times text-xl"></i></button></div><div class="space-y-4"><h2 class="text-2xl font-bold text-center text-gray-800">賬號登錄</h2><div><label for="username" class="block text-sm font-medium text-gray-700 mb-1">用戶名/手機號</label><input type="text" id="username" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition" placeholder="請輸入用戶名或手機號"></div><div><label for="password" class="block text-sm font-medium text-gray-700 mb-1">密碼</label><input type="password" id="password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition" placeholder="請輸入密碼"></div><div class="flex items-center justify-between"><label class="flex items-center text-sm text-gray-600"><input type="checkbox" class="mr-2 h-4 w-4 text-blue-500 focus:ring-blue-500 border-gray-300 rounded">記住我</label><a href="#" class="text-sm text-blue-500 hover:text-blue-600 transition">忘記密碼？</a></div><button class="w-full bg-blue-500 text-white font-medium py-2 px-4 rounded-lg hover:bg-blue-600 transition">登錄</button><div class="text-center text-sm text-gray-600 mt-4">還沒有賬號？<a href="#" class="text-blue-500 hover:text-blue-600 font-medium transition">立即注冊</a></div></div>
</div><script>const loginBtn = document.getElementById('loginBtn');const loginModal = document.getElementById('loginModal');const closeBtn = document.getElementById('closeBtn');const modalOverlay = document.getElementById('modalOverlay');function openLoginModal() {loginModal.classList.add('active');modalOverlay.classList.add('active');document.body.style.overflow = 'hidden';}function closeLoginModal() {loginModal.classList.remove('active');modalOverlay.classList.remove('active');document.body.style.overflow = '';}loginBtn.addEventListener('click', openLoginModal);closeBtn.addEventListener('click', closeLoginModal);modalOverlay.addEventListener('click', closeLoginModal);document.addEventListener('keydown', (e) => {if (e.key === 'Escape' && loginModal.classList.contains('active')) {closeLoginModal();}});
</script>
</body>
</html>
 霍爾有感運行)
)
![[計算機畢業設計]基于深度學習的噪聲過濾音頻優化系統研究](http://pic.xiahunao.cn/[計算機畢業設計]基于深度學習的噪聲過濾音頻優化系統研究)
