在對同學上學期的購物中心HTML前端頁面專案進行學習後，我對它進行了最佳化。在原先的基礎上，給它的註冊、忘記密碼按鈕增加了跳轉介面，使得這兩個功能可以實現跳轉，並且在商品展示頁增加了返回登入頁面的介面。
原始程式碼列表：
最佳化後程式碼列表：
程式碼檔案：
原始登入頁.html：
點選檢視程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="登入頁.css"/>
</head>
<body>
<div class="box">
<h2>網上購物商場</h2>
<div class="input-box">
<label>賬號</label>
<input type="text" id="username"/>
</div>
<div class="input-box">
<label>密碼</label>
<input type="password" id="password"/>
</div>
<div class="btn-box">
<a href="#">忘記密碼？</a>
<div>
<input id="a" type="submit" onclick="a1()" value="登入">
<button>註冊</button>
</div>
</div>
</div>
<script>
function a1(){
var username=document.getElementById("username")
var password=document.getElementById("password")
if(username.value==="admin" && password.value==="123456")
{
alert("登入成功");
window.location.href = "商品展示頁.html";
}
else{
alert("賬號或密碼錯誤");
}
}
</script>
</body>
</html>
進行最佳化後的登入頁.html：
點選檢視程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="登入頁.css"/>
<style>
.btn-box {
margin-left: -16px;
}
</style>
</head>
<body>
<div class="box">
<h2>網上購物商場</h2>
<div class="input-box">
<label>賬號</label>
<input type="text" id="username"/>
</div>
<div class="input-box">
<label>密碼</label>
<input type="password" id="password"/>
</div>
<div class="btn-box">
<a href="忘記密碼頁.html">忘記密碼？</a>
<div style="margin-top: 20px; text-align: center;">
<input id="a" type="submit" onclick="a1()" value="登入" style="margin-right: 3px;">
<button onclick="window.location.href = '註冊頁.html';" style="margin-left: 3px;">註冊</button>
</div>
</div>
</div>
<script>
function a1(){
var username=document.getElementById("username")
var password=document.getElementById("password")
if(username.value==="admin" && password.value==="123456")
{
alert("登入成功");
window.location.href = "商品展示頁.html";
}
else{
alert("賬號或密碼錯誤");
}
}
</script>
</body>
</html>
新增註冊頁.html：
點選檢視程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>註冊</title>
<link rel="stylesheet" href="註冊頁.css"/>
</head>
<body>
<div class="box">
<h2>註冊</h2>
<div class="input-box">
<label>新賬號:</label>
<input type="text" id="new_username" name="new_username">
</div>
<div class="input-box">
<label>新密碼:</label>
<input type="password" id="new_password" name="new_password">
</div>
<div class="btn-box">
<input type="submit" value="註冊">
<a href="登入頁.html" class="back-link">返回登入頁面</a>
</div>
</div>
</body>
</html>
註冊頁.css：
點選檢視程式碼
@charset "utf-8";
*{
margin: 0;
padding: 0;
}
body{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
background: url(2.webp) no-repeat;
background-size: cover;
}
.box{
border-radius: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 350px;
height: 300px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
border-left: 1px solid rgba(255, 255, 255, 0.5);
border-right: 1px solid rgba(255, 255, 255, 0.2);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
background: rgba(50,50,50,0.2);
}
.box > h2{
color: rgba(255, 255, 255, 0.9);
margin-bottom: 20px;
}
.box .input-box{
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
margin-bottom: 10px;
}
.box .input-box > label {
margin-bottom: 5px;
color:rgba(255, 255, 255, 0.9);
font-size: 13px;
}
.box .input-box > input{
box-sizing: border-box;
color:rgba(255, 255, 255, 0.9);
font-size: 14px;
height: 35px;
width: 250px;
background: rgba(255, 255, 255, 0.3);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 5px;
transition: 0.2s;
outline: none;
padding: 0 10px;
letter-spacing: 1px;
}
.box .input-box > input:focus{
border: 1px solid rgba(255, 255, 255, 0.8);
}
.box .btn-box{
width: 250px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.box .btn-box > input[type="submit"]{
width: 120px;
height: 35px;
border: 1px solid rgba(197,81,58,0.8);
background: rgba(197,81,58,0.5);
color: rgba(255, 255, 255, 0.9);
border-radius: 5px;
transition: 0.2s;
}
.box .btn-box > input[type="submit"]:hover{
border: 1px solid rgba(248, 108, 76, 0.8);
background: rgba(248, 108, 76, 0.5);
}
.back-link {
color: #6A5ACD;
text-decoration: none;
margin-top: 10px;
}
.back-link:hover {
text-decoration: underline;
}
新增忘記密碼頁.html：
點選檢視程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>忘記密碼</title>
<link rel="stylesheet" href="忘記密碼頁.css"/>
</head>
<body>
<div class="box">
<h2>忘記密碼</h2>
<div class="input-box">
<label>賬號:</label>
<input type="text" id="username" name="username">
</div>
<div class="input-box">
<label>新密碼:</label>
<input type="password" id="new_password" name="new_password">
</div>
<div class="btn-box">
<input type="submit" value="重置密碼">
<a href="登入頁.html" class="back-link">返回登入頁面</a>
</div>
</div>
</body>
</html>
忘記密碼頁.css：
點選檢視程式碼
@charset "utf-8";
*{
margin: 0;
padding: 0;
}
body{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
background: url(2.webp) no-repeat;
background-size: cover;
}
.box{
border-radius: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 350px;
height: 300px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
border-left: 1px solid rgba(255, 255, 255, 0.5);
border-right: 1px solid rgba(255, 255, 255, 0.2);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
background: rgba(50,50,50,0.2);
}
.box > h2{
color: rgba(255, 255, 255, 0.9);
margin-bottom: 20px;
}
.box .input-box{
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
margin-bottom: 10px;
}
.box .input-box > label {
margin-bottom: 5px;
color:rgba(255, 255, 255, 0.9);
font-size: 13px;
}
.box .input-box > input{
box-sizing: border-box;
color:rgba(255, 255, 255, 0.9);
font-size: 14px;
height: 35px;
width: 250px;
background: rgba(255, 255, 255, 0.3);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 5px;
transition: 0.2s;
outline: none;
padding: 0 10px;
letter-spacing: 1px;
}
.box .input-box > input:focus{
border: 1px solid rgba(255, 255, 255, 0.8);
}
.box .btn-box{
width: 250px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.box .btn-box > input[type="submit"]{
width: 120px;
height: 35px;
border: 1px solid rgba(197,81,58,0.8);
background: rgba(197,81,58,0.5);
color: rgba(255, 255, 255, 0.9);
border-radius: 5px;
transition: 0.2s;
}
.box .btn-box > input[type="submit"]:hover{
border: 1px solid rgba(248, 108, 76, 0.8);
background: rgba(248, 108, 76, 0.5);
}
.back-link {
color: #6A5ACD;
text-decoration: none;
margin-top: 10px;
}
.back-link:hover {
text-decoration: underline;
}
原始商品展示頁.html：
點選檢視程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商品展示頁</title>
<link rel="stylesheet" href="商品展示頁.css">
</head>
<body>
<header>
<div class="d1">
<h1 class="h1">商品展示頁</h1>
<a class="h2" href="購物車頁.html">購物車</a>
<a class="h2" href="幫助中心頁.html">幫助中心</a>
</div>
<nav>
<table id="t1">
<tr>
<td><a href="#category1">家用電器</a></td>
<td><a href="#category2">手機</a></td>
<td><a href="#category3">運營商</a></td>
<td><a href="#category4">耳機</a></td>
<td><a href="#category5">電腦</a></td>
<td><a href="#category6">辦公</a></td>
<td><a href="#category22">相機</a></td>
<td><a href="#category36">圖書</a></td>
<td><a href="#category37">電子書</a></td>
<td><a href="#category38">影像</a></td>
</tr>
<tr>
<td><a href="#category7">傢俱</a></td>
<td><a href="#category8">家居</a></td>
<td><a href="#category9">裝潢</a></td>
<td><a href="#category10">廚房用具</a></td>
<td><a href="#category11">男裝</a></td>
<td><a href="#category12">女裝</a></td>
<td><a href="#category13">童裝</a></td>
<td><a href="#category14">內衣</a></td>
<td><a href="#category15">泳裝</a></td>
<td><a href="#category16">鞋</a></td>
<td><a href="#category17">箱包</a></td>
<td><a href="#category18">鐘錶</a></td>
<td><a href="#category19">珠寶裝飾</a></td>
<td><a href="#category20">運動</a></td>
<td><a href="#category21">戶外</a></td>
</tr>
<tr>
<td><a href="#category23">食品</a></td>
<td><a href="#category24">酒類</a></td>
<td><a href="#category25">生鮮</a></td>
<td><a href="#category26">特產</a></td>
<td><a href="#category27">肉類</a></td>
<td><a href="#category29">蔬菜</a></td>
<td><a href="#category30">烘焙麵包</a></td>
<td><a href="#category31">醬料</a></td>
<td><a href="#category32">飲料</a></td>
<td><a href="#category33">零食</a></td>
<td><a href="#category34">醫療保健</a></td>
<td><a href="#category35">寵物</a></td>
</tr>
</table>
</nav>
</header>
<main>
<section id="category1" class="product-category">
<h2>相機</h2>
<div class="product">
<img src="R-C.jpg" alt="Product 1">
<h3>尼康數碼單反相機</h3>
<p>$2000.00</p>
<button class="btn">購買</button>
</div>
<!-- 其他商品... -->
</section>
<section id="category2" class="product-category">
<h2>電腦</h2>
<div class="product">
<img src="3.jpg" alt="Product 2">
<h3>拯救者筆記本</h3>
<p>$7000.00</p>
<button class="btn">購買</button>
</div>
<!-- 其他商品... -->
</section>
<section id="category3" class="product-category">
<h2>酒類</h2>
<div class="product">
<img src="OIP-C.jpg" alt="Product 3">
<h3>吉貝酒莊紅葡萄酒</h3>
<p>$300.00</p>
<button class="btn">購買</button>
</div>
<!-- 其他商品... -->
</section>
</main>
<footer>
<p>© 2023 商品展示頁</p>
</footer>
</body>
</html>
進行最佳化後的商品展示頁.html：
點選檢視程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商品展示頁</title>
<link rel="stylesheet" href="商品展示頁.css">
</head>
<body>
<header>
<div class="d1">
<h1 class="h1">商品展示頁</h1>
<a class="h2" href="購物車頁.html">購物車</a>
<a class="h2" href="幫助中心頁.html">幫助中心</a>
</div>
<nav>
<table id="t1">
<tr>
<td><a href="#category1">家用電器</a></td>
<td><a href="#category2">手機</a></td>
<td><a href="#category3">運營商</a></td>
<td><a href="#category4">耳機</a></td>
<td><a href="#category5">電腦</a></td>
<td><a href="#category6">辦公</a></td>
<td><a href="#category22">相機</a></td>
<td><a href="#category36">圖書</a></td>
<td><a href="#category37">電子書</a></td>
<td><a href="#category38">影像</a></td>
</tr>
<tr>
<td><a href="#category7">傢俱</a></td>
<td><a href="#category8">家居</a></td>
<td><a href="#category9">裝潢</a></td>
<td><a href="#category10">廚房用具</a></td>
<td><a href="#category11">男裝</a></td>
<td><a href="#category12">女裝</a></td>
<td><a href="#category13">童裝</a></td>
<td><a href="#category14">內衣</a></td>
<td><a href="#category15">泳裝</a></td>
<td><a href="#category16">鞋</a></td>
<td><a href="#category17">箱包</a></td>
<td><a href="#category18">鐘錶</a></td>
<td><a href="#category19">珠寶裝飾</a></td>
<td><a href="#category20">運動</a></td>
<td><a href="#category21">戶外</a></td>
</tr>
<tr>
<td><a href="#category23">食品</a></td>
<td><a href="#category24">酒類</a></td>
<td><a href="#category25">生鮮</a></td>
<td><a href="#category26">特產</a></td>
<td><a href="#category27">肉類</a></td>
<td><a href="#category29">蔬菜</a></td>
<td><a href="#category30">烘焙麵包</a></td>
<td><a href="#category31">醬料</a></td>
<td><a href="#category32">飲料</a></td>
<td><a href="#category33">零食</a></td>
<td><a href="#category34">醫療保健</a></td>
<td><a href="#category35">寵物</a></td>
</tr>
</table>
</nav>
</header>
<main>
<section id="category1" class="product-category">
<h2>相機</h2>
<div class="product">
<img src="R-C.jpg" alt="Product 1">
<h3>尼康數碼單反相機</h3>
<p>$2000.00</p>
<button class="btn">購買</button>
</div>
<!-- 其他商品... -->
</section>
<section id="category2" class="product-category">
<h2>電腦</h2>
<div class="product">
<img src="3.jpg" alt="Product 2">
<h3>拯救者筆記本</h3>
<p>$7000.00</p>
<button class="btn">購買</button>
</div>
<!-- 其他商品... -->
</section>
<section id="category3" class="product-category">
<h2>酒類</h2>
<div class="product">
<img src="OIP-C.jpg" alt="Product 3">
<h3>吉貝酒莊紅葡萄酒</h3>
<p>$300.00</p>
<button class="btn">購買</button>
</div>
<!-- 其他商品... -->
</section>
</main>
<footer>
<p>© 2023 商品展示頁</p>
<a href="登入頁.html" class="back-link">返回登入頁面</a>
</footer>
</body>
</html>
最佳化後的頁面展示：
小結：
在本次最佳化中，我們對登入頁面、註冊頁面和商品展示頁進行了一系列改進。首先，在登入頁面，我們新增了註冊和忘記密碼的按鈕，並使其能夠跳轉到相應頁面。然後，我們修改了註冊頁面和忘記密碼頁面的樣式，使其與登入頁面保持一致，並且新增了返回登入頁面的介面。最後，在商品展示頁，我們新增了返回登入頁面的連結，提供了更好的使用者體驗。透過這些最佳化，頁面間的導航更加清晰明瞭，使用者可以更輕鬆地進行操作，提升了整體使用者體驗。