完成一套网站页面(至少三个页面)-学校官网、电商,必须包含登录页
我完成的是电商页面,包含三个页面:主页、产品页面、登录页。每个页面都使用相同的导航栏,方便用户在不同页面之间切换。
主页 (index.html)
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>电商网站 - 主页</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="navbar">
<a href="index.html" class="logo">电商LOGO</a>
<a href="products.html">产品</a>
<a href="login.html">登录</a>
</div>
<div class="content">
<h1>欢迎来到我们的电商网站</h1>
<p>这里是电商网站的主页,提供各种优质商品!</p>
</div>
</body>
</html>
产品页面 (products.html)
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>电商网站 - 产品</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="navbar">
<a href="index.html" class="logo">电商LOGO</a>
<a href="products.html">产品</a>
<a href="login.html">登录</a>
</div>
<div class="content">
<h1>我们的产品</h1>
<div class="product">
<h2>产品名称 1</h2>
<p>产品描述 1</p>
<p>价格:¥100</p>
<button>加入购物车</button>
</div>
<div class="product">
<h2>产品名称 2</h2>
<p>产品描述 2</p>
<p>价格:¥200</p>
<button>加入购物车</button>
</div>
<!-- 可以继续添加更多产品 -->
</div>
</body>
</html>
登录页 (login.html)
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>电商网站 - 登录</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="navbar">
<a href="index.html" class="logo">电商LOGO</a>
<a href="products.html">产品</a>
<a href="login.html">登录</a>
</div>
<div class="content">
<h1>登录</h1>
<form action="#" method="post">
<label for="username">用户名:</label><br>
<input type="text" id="username" name="username" required><br><br>
<label for="password">密码:</label><br>
<input type="password" id="password" name="password" required><br><br>
<input type="submit" value="登录">
</form>
</div>
</body>
</html>
CSS (styles.css)
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.navbar {
background-color: #333;
overflow: hidden;
}
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
.navbar .logo {
font-size: 20px;
font-weight: bold;
}
.content {
padding: 20px;
}
.product {
border: 1px solid #ccc;
padding: 10px;
margin: 10px 0;
}
- 将上述代码分别保存为
index.html
、products.html
、login.html
和styles.css
文件。 - 确保所有文件在同一目录下。
- 使用浏览器打开
index.html
文件,你将看到主页,导航栏可以链接到其他页面。
运行结果: