使用 Eclipse 创建一个静态的登录页面

最新推荐文章于 2024-07-01 03:28:33 发布

明金同学

最新推荐文章于 2024-07-01 03:28:33 发布

阅读量1.7w

点赞数 36

本文链接：https://blog.csdn.net/weixin_44893902/article/details/113862893

版权

Java Web程序设计练习专栏收录该内容

5 篇文章 2 订阅

订阅专栏

要求：

使用 Eclipse 创建一个静态的登录页面

实现步骤：

在 Eclipse 中，点击“File”，显示菜单，选择“New” “Other”
点击“Other”菜单项，显示“New（新建）”对话框，展开“Web”节点，选择“Static Web Project”创建css目录并在css目录中添加style.css文件
点击“Static Web Project”节点，弹出“New Static Web Project”界面，创建静态 Web 项目 LoginProject
点击“Finish”按钮后，新建“LoginProject”项目成功，在该项目的“WebContent”目录中，新建HTML“login.html”页面，添加html代码
新建 login.css 文件，定义整个登录页面的背景

login.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户登录</title>
<link rel="stylesheet" type="text/css" href="css/login.css"/>
</head>
<body>
	<div class="page">
		<div class="loginwarp">
			<div class="logo">用户登录</div>
			<div class="logo_from">
				<form id="login" name="logo" method="post">
					<ul>
						<li class="login-item"><span>用户名：</span>
							<input type="text" name="username" id="username" value="" class="login-input" />
						</li>
						<li class="login-item"><span>密&nbsp;&nbsp;&nbsp;码：</span>
							<input type="text" name="password" id="password" value="" class="login-input" />
						</li>
						<li class="login-sub">
							<input type="submit" name="submit" value="登录" />
							<input type="reset" name="reset" value="重置" />
						</li>
					</ul>
				</form>
			</div>
		</div>
	</div>
</body>
</html>

login.css

body{
	background: #ddd;
}
ol,ul,li{
	list-style: none;
}
.loginwarp{
	margin: 250px auto;
	width: 400px;
	padding: 30px 50px;
	background: #fff;
	overflow: hidden;
	font-size: 14px;
}
.loginwarp .logo{
	width: 100%;
	height: 44px;
	line-height: 44px;
	font-size: 20px;
	text-align: center;
	border-bottom: 1px solid #ddd;
}
.loginwarp .login_from{
	margin-top: 15px;
}
.login-item{
	padding: 2px 8px;
	border: 1px solid #666;
	border-radius: 8px;
	margin-top: 10px;
}
.login-input{
	height: 35px;
	border: none;
	line-height: 35px;
	width: 200px;
	font-size: 14px;
	outline: none;
}
.login-sub{
	text-align: center;
}
.login-sub input{
	margin-top: 15px;
	background: #45b547;
	line-height: 35px;
	width: 150px;
	color: #FFFFFF;
	font-size: 16px;
	border: none;
	border-radius: 5px;
}