效果预览
在线访问
文件目录
图片素材
素材
素材
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>掘金登录小案例</title> <!-- bootstrap4图标库引入 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css"> <!-- css文件引入 --> <link rel="stylesheet" href="./index.css"> <!-- 网站图标 --> <link rel="shortcut icon" href="http://zhouql.vip/images/tou/t1.png" type="image/x-icon"> </head> <body> <div id="app"> <form action="" method="get"> <button></button> <h2>手机登录</h2> <p><input type="text" name="" autofocus id="phone" placeholder="请输入手机号"></p> <p><input type="password" name="" id="pwd" placeholder="验证码"></p> <p><input type="submit" value="登录"></p> <a href="">其他登录方式</a> <p><span>注册登录即表示同意 <small>用户协议，隐私政策</small></span></p> </form> <img class="t1" src="./images/4f6f6f316cde4398d201cd67e44ddea3.svg" alt=""> <img class="t2" src="./images/500c1180a96859e5c54a5359f024a397.svg" alt=""> </div> <script> document.querySelector('#phone').addEventListener('focus',function(){ document.querySelector('.t2').style.display = "block"; }); document.querySelector('#phone').addEventListener('blur',function(){ document.querySelector('.t2').style.display = "none"; }); document.querySelector('#pwd').addEventListener('focus',function(){ document.querySelector('.t1').style.display = "block"; }); document.querySelector('#pwd').addEventListener('blur',function(){ document.querySelector('.t1').style.display = "none"; }); document.querySelector('button').addEventListener('click',function(e){ document.body.style.backgroundColor = "#fff"; document.querySelector('#app').style.display = "none"; e.preventDefault(); }); </script> </body> </html>
css
*{ margin: 0; padding: 0; box-sizing: border-box; } body{ display: flex; align-items: center; justify-content: center; min-height: 100vh; background-color: #aaabab; } #app{ position: relative; height: 290px; width: 350px; background-color: #fff; } #app form{ position: relative; padding: 20px; } #app form h2{ color: #333333; font-size: 18px; user-select: none; } #app form p input{ width: 100%; height: 38px; color: #828282; border: 1px solid #ddd; padding-left: 8px; margin-top: 18px; border-radius: 2px; outline: none; } #app form p:nth-of-type(3) input{ background-color: #007fff; color: #edf6ff; } #app form a{ text-decoration: none; color: #198fff; margin: 10px 0; display: inline-block; font-size: 15px; } #app form p span{ margin-top: 10px; font-size: 14px; color: #847f7a; } #app form p span small{ font-size: 14px; color: #198fff; } button{ position: absolute; top: 20px; right: 20px; border: none; background-color: transparent; cursor: pointer; } button::after{ font-family: "bootstrap-icons"; content: '\F62A'; font-size: 24px; color: #afafaf; } #app img{ position: absolute; width: 100px; left: 50%; transform: translateX(-50%); display: none; } #app img:nth-of-type(1){ top: -64px; } #app img:nth-of-type(2){ top: -62px; }
