Claim:
Use Eclipse to create a static login page
Implementation steps:
- In Eclipse, click "File" to display the menu, select "New" "Other"
- Click the "Other" menu item to display the "New" dialog box, expand the "Web" node, select "Static Web Project" to create a css directory and add the style.css file to the css directory
- Click the "Static Web Project" node, the "New Static Web Project" interface pops up, and create a static Web project LoginProject
- After clicking the "Finish" button, the new "LoginProject" project is successfully created. In the "WebContent" directory of the project, create a new HTML "login.html" page and add html code
- Create a new login.css file to define the background of the entire login page
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;
}