一个简单的登录页面包含输入框、登录按钮，大概长成这样子下图的样子：
image.png
学习html你可以将浏览器当成一张白纸，用各种适合的html标签组合，并将这些标签放在指定的位置，组装成你想要的效果。
一个简单的登录页面大概包含这些标签：
div块：学过PS的可以将div理解为图层，我们可以在div上添加各种元素，是我们的画板；
input输入框：接收用户输入的内容；
button按钮：可以理解为一个开关，按一下会关灯，再按一下关灯，用来执行用户的动作；
一、 用html写出一个简单的登录页面
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="txt/html; charset=utf-8" />
</head>
<body>
<div>
<div>
<input type="" name="" placeholder="请输入用户名">
</div>
<div>
<input type="" name="" placeholder="请输入密码">
</div>
<div>
<button>登录</button>
<button>取消</button>
</div>
</div>
</body>
</html>
关键代码也就几行，在浏览器中的效果如下：
image.png
这样，我们就有了一个简单的登录页面。
二、 用css定义html页面样式
拿画画来举栗，光有html代码组成的登录页面，好比素描出一个大致轮廓。如果我们需要给他上色，我们就需要另外的知识——css层叠样式表 (Cascading Style Sheets)，字面上来看css定义了html元素的样式，如：颜色、大小等外观。
css样式可以嵌套在html代码中，我们称之为内联样式。也可以单独写在文件后缀为.css的文件中，然后在html代码引用css文件，我们称之为外联样式，详细css样式的引用及不用引用方式的优先级我们放在下期来学习。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="txt/html; charset=utf-8" />
<style type="text/css">
.content{width:400px;height: 250px;border: 1px solid rgb(254,105,8);background: #eee;margin: 0 auto;border-radius: 3px;margin-top: 250px;}
.username{width: 350px;height: 30px;margin-left: 25px;margin-top: 25px;border: 1px solid #ccc}
.password{width: 350px;height: 30px;margin-left: 25px;margin-top: 25px;border: 1px solid #ccc}
.btn_div{text-align: center;margin-top: 25px;}
.btn_login{width: 100px;height:30px;border:0px;background:rgb(254,105,8);cursor: pointer;color:#FFF;}
.btn_cancel{width: 100px;height:30px;border:0px;background:rgb(254,105,8);cursor: pointer; margin-left: 25px;color:#FFF;}
</style>
</head>
<body>
<div class="content">
<div>
<input class="username" type="" name="" placeholder="请输入用户名">
</div>
<div>
<input class="password" type="" name="" placeholder="请输入密码">
</div>
<div class="btn_div">
<button class="btn_login">登录</button>
<button class="btn_cancel">取消</button>
</div>
</div>
</body>
</html>
看看效果：
image.png
实例中的css知识点：
css选择器
width：定义元素的宽
height：定义元素的高
border：定义元素的边框
background：定义元素的背景颜色
margin：定义元素的边距
color：定义元素内文本的颜色
text-align：定义元素内文本的对齐方式
三、 用js实现简单交互
这里的交互是指用户在执行某个操作之后，浏览器给用户反馈的结果。你在输入用户名、密码之后，点击登录按钮之后如果浏览器没有任何反应，那就好比对牛弹琴。你想要浏览器去相应你的操作就需要js，使用js定义一个方法，去监听登录按钮的点击事件，当登录按钮被点击时，收集用户输入的用户名和密码，并进行判断，最后再将结果反馈给用户。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="txt/html; charset=utf-8" />
<style type="text/css">
.content{width:400px;height: 250px;border: 1px solid rgb(254,105,8);background: #eee;margin: 0 auto;border-radius: 3px;margin-top: 250px;}
.username{width: 350px;height: 30px;margin-left: 25px;margin-top: 25px;border: 1px solid #ccc}
.password{width: 350px;height: 30px;margin-left: 25px;margin-top: 25px;border: 1px solid #ccc}
.btn_div{text-align: center;margin-top: 25px;}
.btn_login{width: 100px;height:30px;border:0px;background:rgb(254,105,8);cursor: pointer;color:#FFF;}
.btn_cancel{width: 100px;height:30px;border:0px;background:rgb(254,105,8);cursor: pointer; margin-left: 25px;color:#FFF;}
</style>
</head>
<body>
<div class="content">
<div>
<input id="username" class="username" type="" name="" placeholder="请输入用户名">
</div>
<div>
<input id="password" class="password" type="" name="" placeholder="请输入密码">
</div>
<div class="btn_div">
<button class="btn_login" id="login">登录</button>
<button class="btn_cancel" id="cancel">取消</button>
</div>
</div>
<script type="text/javascript">
var loginObj=document.getElementById("login");//获取登录按钮对象
var cancelObj=document.getElementById("cancel");//获取取消按钮对象
loginObj.onclick=function(){//登录按钮点击方法
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username=="admin"&&password=="admin") {
alert("登录成功！");
}else{
alert("登录失败！");
}
}
cancelObj.onclick=function(){//取消按钮点击方法
document.getElementById("username").value="";
document.getElementById("password").value="";
}
</script>
</body>
</html>
实现效果：
登录图.gif
image.png
网友评论