超级可爱的登录页面（html+css+js）
生活随笔
收集整理的這篇文章主要介紹了
超级可爱的登录页面（html+css+js）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
ps：前端嫩牛，技術肯定不如大牛，如果有什么不足的地方，請您提出寶貴的意見，感謝！
一、作品介紹
本作品是我獨立完成的一個 個人網站的登錄頁面，實現了動態透明輸入框、背景圖自適應瀏覽器窗口、模擬登錄驗證、驗證錯誤提示等功能。
1、主要技術：HTML、CSS、jQuery
2、主頁面
3、驗證錯誤提示
錯誤類型不一樣，提示文字也不一樣，這里舉例說明未輸入用戶名和密碼的情況
二、代碼部分
1、html 代碼( login.html )
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>登錄界面</title><link rel="stylesheet" type="text/css" href="css/login.css" /></head><body><p class="wel">Welcome to my personal website.</p><!-- 登錄表單 --><form class="login" method="post"><h1>Login</h1><input type="text" name="username" id="username" placeholder="Username" autocomplete="off" /><input type="password" name="password" id="password" placeholder="Password" /><!--驗證錯誤提示--><div id="error"></div><input type="button" name="sub" id="sub" value="Login" /></form>/* js 代碼比較少，沒必要寫成單獨的js文件 */<script type="text/javascript" src="js/jquery-3.4.1.js"></script><script type="text/javascript">/******************* 本地模擬登錄驗證 *******************/$(".login #sub")[0].onclick = function() {var user = $(".login #username")[0].value; //獲取 username 的輸入值var pass = $(".login #password")[0].value; 獲取 password 的輸入值if(user == '123' && pass == 123) {window.location.href = "https://www.baidu.com/";} else if(user == '' || pass == '') {$("#error").text("*賬號或密碼不能為空");} else {$("#error").text("*賬號或密碼有誤，請重新輸入");}}//點擊 username 和 password 輸入框時，清除錯誤提示$(".login #username")[0].onclick = function() {$("#error").text('');}$(".login #password")[0].onclick = function() {$("#error").text('');}</script></body></html>2、css 代碼( login.css )
html {height: 100%; }/* 背景圖片樣式 */ body {margin: 0;padding: 0;background-image: url(../images/bg.gif);background-size: 100% 100%;}/* Welcome to my personal website. 樣式 */ .wel {color: rgba(255,255,255,.7);font-size: 50px;text-align: center; }/* 登錄區域樣式 */ .login {width: 300px;padding: 10px 40px 5px 40px;top: 30%;left: 10%;background: rgba(255,255,255,.2); /*實現半透明效果 */box-shadow: 15px 15px 25px rgba(255,255,255,.5); /* 實現盒子陰影效果 */border-radius: 50%; /* 圓形 */text-align: center;position: fixed; /* 固定定位 */ }/* Login 字體樣式 */ .login h1 {color: rgba(255,255,255,.7);text-transform: uppercase;font-weight: 600; }/* 登錄輸入框樣式 */ .login #username, #password {border: 0;background: none;display: block;font-size: 18px;margin: 20px auto;text-align: center;border: 2px solid rgba(255,255,255,.5); /* 邊框屬性 */padding: 14px 10px;width: 200px;outline: none;color: rgba(255,255,255,.5); /* 字體顏色 */border-radius: 24px;transform: 0.25s; /* 動畫時間 */ } /* 點擊到輸入框時，輸入框的樣式 */ .login #username:focus, #password:focus {width: 240px; }/* 錯誤提示樣式 */ .login #error {width: 100%;height: 20px;color: red; }/* login登錄按鈕樣式 */ .login #sub {background: none;display: block;font-size: 18px;margin: 20px auto;text-align: center;border: 2px solid rgba(255,255,255,.5);padding: 14px 30px;outline: none;color: rgba(255,255,255,.5);border-radius: 24px;cursor: pointer; /* 光標移動到Login按鈕時，變成小手形狀 */ }/* 鼠標移入到登錄按鈕的樣式 */ .login #sub:hover {background-color: skyblue; }總結
以上是生活随笔為你收集整理的超级可爱的登录页面（html+css+js）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： autobahn + Python 简易
- 下一篇： Flex 布局语法教程