要求：
使用 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;
}原始碼地址：點擊查看
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/262946.html
標籤：其他
上一篇：CSS基礎：簡述CSS盒模型
下一篇：Vue 腳手架錯誤