本周主要内容是实现登录界面与注册界面的前端编写
首先看一下登录界面的效果图:
本界面中最上方的标题栏与之前的一样,目的是保持风格的一致性:
<h1 style="color:white;font-size:40px;font-weight:bold;">
IMAGE STYLE TRANSFER</h1>
#b{
background-image: url(image/1.jpg);
background-repeat: no-repeat;
background-size: 100% 60px;
background-attachment:scroll;
}
h1{
text-align: center;
position: relative;
top:-20px;
}
下面是login的标题,是简单的文字,设置了style
<tr valign="middle" align="center">
<td colspan="0" height="10" valign="middle" top="10" align="center"><font
face="MV Boli" weight="bold" size="40px" color="#196ed1 "
style="padding-left: 600px; top:30px; vertical-align: middle" >login</font></td>
</tr>
文字框中的内容为:
<fieldset style="width:500px;
height:260px;
left:400px;
top:50px;
position:relative;
">
<table background="image\4.jpg " width="500" height="260" left="400" top="4000" align="center">
<tr height="30" >
<td></td>
</tr>
<tr>
<td>
<table>
<form method ="POST" action="" name="frmLogin" style="top:20px; ">
<tr>
<td style="font-size: 30px; font-family: MV Boli;">User Name:</td>
<td><input type="text" name="username" id="username" value="Your name" size="15" maxlength="15" οnfοcus="if (this.value=='Your name') this.value='';" style="width:160px; height:23px; "
/></td>
</tr>
<tr>
<td style="font-size: 30px; font-family:MV Boli;">Password:</td>
<td><input type="password" name="password" id="password" value="Your password" size="15" maxlength="15" οnfοcus="if (this.value=='Your password' ) this.value='';" style="width:160px; height:23px; "/></td>
</tr>
<tr>
<td style="font-size: 30px;font-family: MV Boli;" >
<input type="checkbox" name="zlogin" value="1" />
Auto Login</td>
</tr>
</form>
</table>
<table>
<tr>
<td>
<tr>
<td ><input type="submit" name="login" value="login"
onClick="validateLogin()"/></td>
<td style="font-size: 30px;font-family: MV Boli;width: 30px;height: 15px;" ><input type="button" name="button" value="register" οnclick="window.location.href='register.html'"></td>
</tr>
</td>
</tr>
</table>
</td>
</tr>
</table>
</fieldset>
需要用js实现判断是否输入了数据内容:
<script language="javascript">
function validateLogin(){
var sUserName = document.getElementById("username").value ;
var sPassword = document.getElementById("password").value ;
if ((sUserName =="") || (sUserName=="Your name")){
alert("Please input username!");
return false ;
}
if ((sPassword =="") || (sPassword=="Your password")){
alert("Please input Password!");
return false ;
}
}
</script>