要求：
使用 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>密 码：</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;
}