时间：2023-10-06 02:18:02 | 来源：网站运营
时间：2023-10-06 02:18:02 来源：网站运营
网页制作：一个简易美观的登录界面：
在线咨询
<!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里面，我们主要对登录界面进行了整体布局规划，利用div将内部的窗口、图片、标签、输入框、按钮、链接进行分块，这样方便我们之后用css对其进行准确的调位置、调边距。同时也对重要的几个东西设置了id和class，这也是方便我们之后用css对其进行准确的调颜色、调字体。
/** * 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是用来判断用户名和密码是否正确的，实现起来还算简单。
可以记一下，界面跳转的语句：
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;}原文链接：网页制作：一个简易美观的登录界面_javascript_Kuroko's Development Notes-CSDN博客
关键词：美观,界面,简易
