可参照以下代码为模板进行编写：完整的代码1：https://download.csdn.net/download/mingzi1245/12406208 代码2https://download.csdn.net/download/mingzi1245/12406204
html是超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
<form method="post" action="###" name="myform" onsubmit="checkpost()"><label for="name">用户名：</label><input type="text" name="name" id="name" /><br />
<label for="pw">密码：</label><input type="password" name="pw" id="pw" /><br />
<input type="submit" value="提交" />
</form>
<script>
function checkpost(){
if(document.forms[0].name.value=="你要的用户名"&&document.forms[0].pw.value=="你要的密码"){
window.location="你要跳转的地址"
}else{
alert("用户名或密码不正确！")
return false
}
}
</script>
<!doctype html><html>
<head>
<meta charset="utf-8">
<link href="main.css" type="text/css" rel="stylesheet">
<title>登陆界面</title>
</head>
<body>
<div class="login_ico">
<img src="images/login_ico.png">
</div>
<div class="login_putin">
<ul>
<li><input type="text" ></li>
<li><input type="password" ></li>
</ul>
</div>
<div class="login_btn">
<input type="submit" value="登陆">
</div>
</body>
</html>
样式 ：
*{
margin:0
padding:0}
li{
list-style-type:none
margin:0
padding:0}
a{
text-decoration:none
color:#000}
/*---------------------按钮-----------------------------*/
.login_putin ul li input{
margin: 0
width:70%
padding: 1em 2em 1em 5.4em
-webkit-border-radius:.3em
-moz-border-radius: .3em
border: 1px solid #999
}
.login_btn{
width:300px
margin:40px auto 0 auto
}
.login_btn input{
width:100%
margin:0
padding:.5em 0
-webkit-border-radius:.3em
-moz-border-radius: .3em
border:#1263be solid 1px
background:#1b85fd
color:#FFF
font-size:17px
font-weight:bolder
letter-spacing:1em
}
.login_btn input:hover{
background:#1263be
}
