前端初学者的登录界面实践-优快云博客

目前开始学前端一些知识，然后就实践做了一个用户登录界面，觉得学语言就得多实践，就做了一个简单的用户登录界面，虽然奇丑，但是也可以看看结构。

HTML码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>用户登录</title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<script>function loginClick() {
			var name=document.login.username.value;
			var pwd=document.login.password.value;
			if(name==null||name.length==0){
				alert("用户名不能为空！");
				return;
			}
			if(pwd==null||pwd.length==0){
				alert("密码不能为空！");
				return;
			}
			document.login.submit();
		}
</script>
	</head>
	<body>
		<div id="Layer1" style="position:absolute; width:100%; height:100%; z-index:-1">  
        <img src="img/bizhi.jpg" height="100%" width="100%" class="blur"/>
        <style>
        	.blur {filter: blur(6px);
        	-webkit-filter: blur(2px); 
        		}
        </style>
     </div>
		<table width="500"  border="1px" border="" align="center" 
			style="background-color:white; background-color:rgba(0,0,0,0.2);">
			<tr height="80" align="middle" valign="middle">
				<td colspan="2" align="middle" height="60">
					<label face="黑体" size="5px" color="azure" class="label_input">用户登录</label>
				</td>
			</tr>
			<tr>
				<td align="middle" height="250">
					<form action="demo.jsp" name="login" method="post" >
						<p><font  class="label_input2">用户名：</font>
						<input type="text" placeholder="电子邮箱/手机号" name="username" class="text_field"></p>
						<br>
						<p><font class="label_input2">密码：</font>
						<input type="password" placeholder="请输入密码" name="password" class="text_field"></p>
						<br><br>
					</form>
				</td>
			</tr>
			<tr>
				<td align="middle" height="60">
						<input type="button" id="btn_login" value="登录" onClick="loginClick()">
						<a id="forget_pwd" href="forget_pwd.html" style="color: blanchedalmond;">忘记密码</a>
				</td>
			</tr>				
	    </table>
	</body>
</html>

CSS：


form p > * {
    display: inline-block;
    vertical-align: middle;
}

 
.label_input {
    font-size: 35px;
    font-family:黑体;
    line-height: 28px;
    text-align: center;
    color: white;
    background-color: cornflowerblue;
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    border-top-right-radius: 7px;
}
 
.label_input2 {
    font-size: 25px;
    font-family:黑体;
    width: 110px;
    height: 30px;
    text-align: center;
    color: white;
    background-color: cornflowerblue;
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
}

.text_field {
    width: 278px;
    height: 28px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border: 0;
}
 
#btn_login {
    font-size: 20px;
    font-family: 黑体;
    width: 120px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    color: white;
    background-color: cornflowerblue;
    border-radius: 6px;
    border: 0;
 
    float: left;
}

底色图片可以随便找一个。