登录页面

最新推荐文章于 2024-12-20 16:28:21 发布

原创最新推荐文章于 2024-12-20 16:28:21 发布 · 558 阅读

3 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一个典型的网页登录界面的设计与实现过程，包括使用HTML和CSS构建界面布局，通过表单收集用户输入的用户名和密码，并提供了登录、重置等功能按钮。此外，还实现了简单的用户交互效果。

上部背景图

<table width="95" border="0" align="center" cellpadding="0"
		cellspacing="0">
		<tr>
			<td><img src="images/top_login.jpg" width="596" height="331" /></td>
		</tr>
		<tr>
			<td><table width="100%" border="0" cellspacing="0"
					cellpadding="0">
					<tr>
						<td width="99"><img src="images/login_06.jpg" width="99"
							height="139" /></td>

中部文本框

	<td background="images/bg_form.jpg"><table width="250"
								border="0" align="center" cellpadding="0" cellspacing="0">
								<form id="form1" name="form1" method="post"
									action="login/logon.action" target="_parent">
								<tr>
									<td height="35" align="right">用户名：</td>
									<td><label> <input name="username" id="username"
											type="text" class="textfile" />
									</label></td>
								</tr>
								<tr>
									<td height="35" align="right">密  码：</td>
									<td><label> <input type="password" name="password"
											id="password" class="textfile" />
									</label></td>
								</tr>
								<tr>
									<td height="35"> </td>
									<td><label> 
									       <input type="submit" name="Submit"  class="btn"   value="登录"  />
											 <input type="reset" name="Submit2" class="btn"   value="重置" />
											 <input type="button" name="File" class="btn" value="打开文件夹" onclick="file()"/>
											 <button id="id" onclick="file()" value="wj">wj</button>
									</label></td>
								</tr>
								<tr>
									<td height="30"> </td>
									<td><label> <input type="checkbox" name="checkbox" value="checkbox" />
									</label> 记住密码</td>
								</tr>
								</form>
							</table></td>

底部背景图

<td width="98" align="right"><img src="images/login_08.jpg"
							width="98" height="139" /></td>
					</tr>
				</table></td>
		</tr>
		<tr>
			<td><img src="images/bottom_login.jpg" width="596" height="39" /></td>
		</tr>
	</table>