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

喜欢ヅ旅行 2022-10-30 11:30 9阅读 0赞

## 要求： ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70][]

## 实现步骤： ##

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

![2021022219060520.png][]

### 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>密   码：</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;
    }

## 源码地址：[点击查看][Link 1] ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70]: /images/20221024/77d9f9a37004478489d6d6c487c0aa8e.png
[2021022219060520.png]: /images/20221024/5adbe6f15e0c4ae59e87523bc29e9f24.png
[Link 1]: https://gitee.com/url_777/mhys-java_web/tree/master/%E7%AC%AC%E4%B8%80%E7%AB%A0/LoginProject