本周主要内容是实现登录界面与注册界面的前端编写
首先看一下登录界面的效果图:
本界面中最上方的标题栏与之前的一样,目的是保持风格的一致性:
<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" onfocus="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" onfocus="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" onclick="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>