(个人)基于深度学习的中国传统特色图像的风格迁移创新实训第八周（1）

本周主要内容是实现登录界面与注册界面的前端编写

首先看一下登录界面的效果图：

本界面中最上方的标题栏与之前的一样，目的是保持风格的一致性：

<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>