html简单的登录界面制作

最新推荐文章于 2024-07-21 09:18:50 发布

前端技术

最新推荐文章于 2024-07-21 09:18:50 发布

阅读量6.5k

点赞数 10

本文链接：https://blog.csdn.net/guoxuying/article/details/119488183

版权

html简单的登录界面制作

话不多说，老铁们直接拿代码去用吧。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录界面</title>
		<style>
		    #bg{
			width:30%;
			height:25%;
			top:30%;
			left:60%;
			position:fixed;
			background-image:url('https://b-ssl.duitang.com/uploads/item/201406/28/20140628134651_sWicV.jpeg');
			background-size:60%;
		     } 
		</style>
		<script type="text/javascript" >
		     function check() {
			 var a=document.getElementById('username').value;
			 var b=document.getElementById('password').value;
			 var c=document.getElementById('Username').value;
			 var d=document.getElementById('Password').value;
			 if(a!=c)
			      alert("name error!");
			 else if(b!=d)
			      alert("password error!");
			 else alert("Welcome!");
		     }
		</script>
	</head>
	<body>
	      <div id="bg">
		   <form>
		      <table width="100%">
			 <tr>
				<td style="text-align:right" height:"100px">
				<p>name:</p></td>
				<td><input type="text" id="username">
				<input type="hidden" id="Username" value="201739160412"></td>
			</tr>
			<tr>
				<td style="text-align:right">
				<p>password:</p></td>
				<td><input type="password" id="password">
				<input type="hidden" id="Password" value="123456789"></td>
			</tr>
			<tr>
				 <td>&nbsp;</td>
				  <td><input type="button" value="loading" onclick='check()'></td>
			</tr>
			</table>
		    </form>
		</div>
	</body>
</html>