登录界面想必是我们生活中非常常见的一个网页,最典型的,就比如:游戏登录、邮箱登录,抑或是我们身边的爱云校。
本次,杨老师就带领同学们来学习了如何制作一个简单的登录界面。
”github:https://yangdan1992.github.io/calculator/denglu-1.html
01
CSS——“有头有脸”
搭建网页,通常先要设计它的外观——也就是元素与样式。打开你的Dw后,新建一个html文件,title标记中间改为登录。
首先设置好背景颜色等等
*/*所有样式最高级选择器*/{ margin: 0px; padding:0px; background: #E9E9E9;}
(设置内外边距为0px是为了让元素与网页边缘之间没有空隙)
为了网页的美观,我们要在网页上方拉一条线,你也可以理解为占地方。
在中创建一个div标记class名为“line“:
在head中添加style标记,开始设置其样式(让它看起来是一条好看的线):
.line{ height: 5px; background: #FFDF3D; }
(反正就是装饰物,怎么好看怎么来。记得打分号,接下来将不再提醒)
设置登录界面中间的“功能区“
观察效果图:
logo,标题,和登录操作区以及注册的超链接都集中在网页中间,设置一个div标记存放这些东西,class名“content”:
设置样式(样式都在head里),调整位置
.content{ text-align: center; margin-top: 50px;}
以网页制作的手段插入logo图片:
(此处用到的是img标记,src插入图片,图片的文件夹要与网页的相同才能顺利添加,并且文件夹名和文件名不能出错)
再添加文字“登录”所需要的标记,并设置文字样式:
登录
h1{ color: #676767; font-family: 微软雅黑; margin-top: 20px;}
添加一个form表单标记,将操作区需要的所有标记层次分明地添加出来并设置id、class名:
(placeholder:原本文本框里默认出现的文字)
(需要两个文本框、一个登录按钮)
(直接在标记中设置按钮名字:value=“登录”)
设置样式:
form{ background: #FFFFFF; border:solid 1px #D0D0D0; width: 300px; margin:30px auto; padding:20px 0;} input{ width: 250px; height: 30px; outline: none;/*轮廓*/ border: solid 1px #D0D0D0; border-radius: 10px; background: #fff; margin:10px 0px; font-family: 微软雅黑; font-size: 16px; padding-left: 10px;}.btn{ background: #FFDF3D; width: 87%; color: #FFFFFF; cursor: pointer;}.btn:hover{ background: #F9FF46;}
(用hover,单独使登录按钮有另外的颜色)
当你没有输入用户名密码时,会有警示语出现,文本框之间添加p标记存放:
#remind_u,#remind_p{ color: #FF1E1E; background: #FFFFFF; text-align: left; padding-left: 26px; font-family: 微软雅黑; font-size: 10px;}
最后是超链接(a标记):
没有帐户?
注册
a{ text-decoration: none; color: #005CFF; font-family: 微软雅黑;}#sg2{ color: #4D4D4D;}
样式设置结束。
02
“识别正确”——“功能实现”
Body中打出script标记,首先定义所需变量:
var username = document.getElementById("username");var password = document.getElementById("password");var remind_u = document.getElementById("remind_u");var remind_p = document.getElementById("remind_p");
设置你点进文本框时发生的事件、不点进去时的事件:
利用if...else if...else...,写出控制“警示语”的程序:
function verify_username(){ if(username.value == ""){ remind_u.innerHTML = "请输入用户名!"; }else{ remind_u.innerHTML = ""; }}function verify_password(){ if(password.value == ""){ remind_p.innerHTML = "请输入密码!"; }else{ remind_p.innerHTML = ""; }}function input_username(){ remind_u.innerHTML="";}function input_password(){ remind_p.innerHTML="";}
if和else if后面加小括号,括号里加判断条件,两个=用于判断,一个=用于定义。
然后着手最后几个问题:数据的提交,登录是否成功的判断、网页的跳转。
设置登录按钮被点击时的事件以及以action确定成功登录——也就是提交数据以后刷新到哪个网页
这个网页需要新建一个html文件来制作,你可以仅仅是让上面写上“登录成功”几个大字,当然也可以是别的什么网页——如果你足够聪明的话,这里就不详讲了。别忘了一定要输入正确的文件夹路径。
仍然是定义函数以及if...else if... else...:
function submitText(){ if(username.value==""&& password.value==""){ remind_u.innerHTML = "请输入用户名!"; remind_p.innerHTML = "请输入密码!"; return false; }else if(username.value!=""&& password.value==""){ remind_u.innerHTML = ""; remind_p.innerHTML = "请输入密码!"; return false; }else if(username.value==""&& password.value!=""){ remind_u.innerHTML = "请输入用户名!"; remind_p.innerHTML = ""; return false; }else if(username.value=="xjy"&& password.value=="123456"){ return true; }else{ alert("用户名或密码错误!"); return false; } }
这里是判断输入的用户名和密码是否正确,并相应的决定按下登录按钮时是否刷新,顺便也相应地打出警示语。
&&可以理解为“并且”,因为这时我们需要判断两个条件,&&就是其中的连结。它可以连结两个以上的判断条件。
最后:到这里,登录网页就基本完成了。以此类推,我们也可以制作出注册界面等等。
当然,这次网页制作是没有真正的数据支持的——账户密码都已经在脚本中写好了,真正的登录注册肯定不能把账户密码全部都写到脚本里啊!
页面制作、代码编写、图文撰写:
全能的八年级徐佳怡