時間：2023-10-06 02:18:02 | 來源：網(wǎng)站運營
時間：2023-10-06 02:18:02 來源：網(wǎng)站運營
網(wǎng)頁制作：一個簡易美觀的登錄界面：
在線咨詢
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>登錄頁面</title> <link rel="stylesheet" type="text/css" href="login.css"/> <script type="text/javascript" src="login.js"></script></head> <body><div id="login_frame"> <p id="image_logo"><img src="images/login/fly.png"></p> <form method="post" action="login.js"> <p><label class="label_input">用戶名</label><input type="text" id="username" class="text_field"/></p> <p><label class="label_input">密碼</label><input type="text" id="password" class="text_field"/></p> <div id="login_control"> <input type="button" id="btn_login" value="登錄" οnclick="login();"/> <a id="forget_pwd" href="forget_pwd.html">忘記密碼？</a> </div> </form></div> </body></html>說明：login.js
在這個html里面，我們主要對登錄界面進行了整體布局規(guī)劃，利用div將內(nèi)部的窗口、圖片、標簽、輸入框、按鈕、鏈接進行分塊，這樣方便我們之后用css對其進行準確的調(diào)位置、調(diào)邊距。同時也對重要的幾個東西設置了id和class，這也是方便我們之后用css對其進行準確的調(diào)顏色、調(diào)字體。
/** * Created by Kay on 2016/3/8. */function login() { var username = document.getElementById("username"); var pass = document.getElementById("password"); if (username.value == "") { alert("請輸入用戶名"); } else if (pass.value == "") { alert("請輸入密碼"); } else if(username.value == "admin" && pass.value == "123456"){ window.location.href="welcome.html"; } else { alert("請輸入正確的用戶名和密碼！") }}說明：login.css
這個js是用來判斷用戶名和密碼是否正確的，實現(xiàn)起來還算簡單。
可以記一下，界面跳轉的語句：
window.location.href="welcome.html";
其次就是對輸入框的返回值的獲取，這里我們用到了document.getElementById的知識點，通過document的對象方法來獲得指定ID值的對象。這里要注意是byId，所以前面的html里的username和password要設id值，而不是name值，不然獲取不到的！
關于document的介紹可以點擊該鏈接：詳解JavaScript Document對象
body { background-image: url("images/login/loginBac.jpg");; background-size: 100%; background-repeat: no-repeat;} #login_frame { width: 400px; height: 260px; padding: 13px; position: absolute; left: 50%; top: 50%; margin-left: -200px; margin-top: -200px; background-color: rgba(240, 255, 255, 0.5); border-radius: 10px; text-align: center;} form p > * { display: inline-block; vertical-align: middle;} #image_logo { margin-top: 22px;} .label_input { font-size: 14px; font-family: 宋體; width: 65px; height: 28px; line-height: 28px; text-align: center; color: white; background-color: #3CD8FF; border-top-left-radius: 5px; border-bottom-left-radius: 5px;} .text_field { width: 278px; height: 28px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border: 0;} #btn_login { font-size: 14px; font-family: 宋體; width: 120px; height: 28px; line-height: 28px; text-align: center; color: white; background-color: #3BD9FF; border-radius: 6px; border: 0; float: left;} #forget_pwd { font-size: 12px; color: white; text-decoration: none; position: relative; float: right; top: 5px; } #forget_pwd:hover { color: blue; text-decoration: underline;} #login_control { padding: 0 28px;}說明：
這個css就是最難部分了，界面之所以能達到如此美觀的效果，比如登錄的窗口要在屏幕居中顯示、背景透明、框的四個角要有一點弧度、登錄按鈕與輸入框上下對齊等等。
background-size: 100%;background-repeat: no-repeat;②讓一個div塊在整個屏幕居中：width: 400px;height: 260px;padding: 13px;position: absolute;left: 50%;top: 50%;margin-left: -200px;margin-top: -200px(其中的margin-left:和margin-top最好是設為width和height的一半值，那樣是完全居中的效果，當然記得前面要加個負號！)
text-align: center;border-top-left-radius: 5px;border-bottom-left-radius: 5px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;background-color: rgba(240, 255, 255, 0.5);form p > * { display: inline-block; vertical-align: middle;}text-decoration: underline; width: 120px; height: 28px; line-height: 28px; text-align: center;<div id="login_control"> <input type="button" id="btn_login" value="登錄" οnclick="login();"/> <a id="forget_pwd" href="forget_pwd.html">忘記密碼？</a> </div>#login_control { padding: 0 28px;}原文鏈接：網(wǎng)頁制作：一個簡易美觀的登錄界面_javascript_Kuroko's Development Notes-CSDN博客
關鍵詞：美觀,界面,簡易
微信公眾號
版權所有? 億企邦 1997-2025 保留一切法律許可權利。
