好的，下面是
一个HTML5、
CSS3、JavaScript实现的多
页面网站的思路和实现代码：
1. 思路
- 确定网站整体结构和设计，包括导航栏、
页面布局、颜色搭配等。
- 使用
HTML5 和
CSS3 创建网站的
页面，包括首页、产品列表页、产品详情页和联系我们页。
- 使用 JavaScript 实现网站的一些交互效果，如轮播图、下拉菜单、表单验证等。
- 使用响应式设计，适应不同的屏幕大小和设备类型。
2.
页面结构和代码
（1）首页
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-s
cale=1.0" />
<title>首页</title>
<link rel="stylesheet" href="style.
css" />
<script src="script.js"></script>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="products.html">产品</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</nav>
</header>
<main>
<div class="slider">
<img src="images/slide1.jpg" alt="Slide 1" />
<img src="images/slide2.jpg" alt="Slide 2" />
<img src="images/slide3.jpg" alt="Slide 3" />
</div>
<section>
<h2>欢迎光临我们的网站</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
faucibus, nisl eu convallis faucibus, odio ligula feugiat elit, et
pulvinar nisl nisl eget metus. Mauris a neque sit amet mauris
consequat luctus. Fusce laoreet, velit quis ultrices dictum, nisl
mauris convallis metus, sit amet venenatis nunc turpis sit amet
turpis.
</p>
</section>
</main>
<footer>
<p>© 2021 My Website. All rights reserved.</p>
</footer>
</body>
</html>
```
（2）产品列表页
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-s
cale=1.0" />
<title>产品列表</title>
<link rel="stylesheet" href="style.
css" />
<script src="script.js"></script>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="products.html">产品</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</nav>
</header>
<main>
<h1>产品列表</h1>
<ul class="product-list">
<li>
<a href="product.html">
<img src="images/product1.jpg" alt="Product 1" />
<h2>产品 1</h2>
<p>这是产品 1 的描述。</p>
</a>
</li>
<li>
<a href="product.html">
<img src="images/product2.jpg" alt="Product 2" />
<h2>产品 2</h2>
<p>这是产品 2 的描述。</p>
</a>
</li>
<li>
<a href="product.html">
<img src="images/product3.jpg" alt="Product 3" />
<h2>产品 3</h2>
<p>这是产品 3 的描述。</p>
</a>
</li>
</ul>
</main>
<footer>
<p>© 2021 My Website. All rights reserved.</p>
</footer>
</body>
</html>
```
（3）产品详情页
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-s
cale=1.0" />
<title>产品详情</title>
<link rel="stylesheet" href="style.
css" />
<script src="script.js"></script>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="products.html">产品</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</nav>
</header>
<main>
<h1>产品 1</h1>
<div class="product-detail">
<img src="images/product1.jpg" alt="Product 1" />
<div>
<h2>产品 1</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
faucibus, nisl eu convallis faucibus, odio ligula feugiat elit, et
pulvinar nisl nisl eget metus. Mauris a neque sit amet mauris
consequat luctus. Fusce laoreet, velit quis ultrices dictum, nisl
mauris convallis metus, sit amet venenatis nunc turpis sit amet
turpis.
</p>
<p>价格：$100</p>
<form>
<label for="quantity">数量：</label>
<input type="number" id="quantity" name="quantity" min="1" max="10" />
<button type="submit">加入购物车</button>
</form>
</div>
</div>
</main>
<footer>
<p>© 2021 My Website. All rights reserved.</p>
</footer>
</body>
</html>
```
（4）联系我们页
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-s
cale=1.0" />
<title>联系我们</title>
<link rel="stylesheet" href="style.
css" />
<script src="script.js"></script>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="products.html">产品</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</nav>
</header>
<main>
<h1>联系我们</h1>
<form id="contact-form">
<label for="name">姓名：</label>
<input type="text" id="name" name="name" required />
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" required />
<label for="message">留言：</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">发送</button>
</form>
</main>
<footer>
<p>© 2021 My Website. All rights reserved.</p>
</footer>
</body>
</html>
```
3.
CSS 代码
```
css
* {
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
margin: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
nav li {
margin-right: 20px;
}
nav a {
color: #fff;
text-decoration: none;
}
main {
padding: 20px;
}
.slider {
display: block;
position: relative;
height: 400px;
overflow: hidden;
}
.slider img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.slider img:first-child {
opacity: 1;
}
.section {
margin-bottom: 20px;
}
.product-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
}
.product-list li {
margin-right: 20px;
margin-bottom: 20px;
flex-basis:
calc(33.33% - 20px);
}
.product-list li:last-child {
margin-right: 0;
}
.product-list a {
display: block;
text-decoration: none;
}
.product-list img {
width: 100%;
height: auto;
}
.product-detail {
display: flex;
margin-top: 20px;
}
.product-detail img {
flex-basis: 50%;
margin-right: 20px;
}
.product-detail div {
flex-basis: 50%;
}
form label {
display: block;
margin-bottom: 5px;
}
form input[type="text"],
form input[type="email"],
form textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
form button[type="submit"] {
display: block;
padding: 10px;
background-color: #333;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
form button[type="submit"]:hover {
background-color: #444;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
```
4. JavaScript 代码
```javascript
// 轮播图
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("slider")[0].getElementsByTagName("img");
for (i = 0; i < slides.length; i++) {
slides[i].style.opacity = 0;
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1;
}
slides[slideIndex - 1].style.opacity = 1;
setTimeout(showSlides, 5000);
}
// 下拉菜单
function toggleMenu() {
document.getElementById("menu").classList.toggle("show");
}
window.onclick = function (event) {
if (!event.target.matches(".menu-button")) {
var dropdowns = document.getElementsByClassName("menu");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains("show")) {
openDropdown.classList.remove("show");
}
}
}
};
// 表单验证
var contactForm = document.getElementById("contact-form");
var nameInput = document.getElementById("name");
var emailInput = document.getElementById("email");
var messageInput = document.getElementById("message");
contactForm.addEventListener("submit", function (event) {
if (!validateName() || !validateEmail() || !validateMessage()) {
event.preventDefault();
}
});
function validateName() {
if (nameInput.value.trim() === "") {
setErrorFor(nameInput, "姓名不能为空");
return false;
} else {
setSuccessFor(nameInput);
return true;
}
}
function validateEmail() {
var email = emailInput.value.trim();
if (email === "") {
setErrorFor(emailInput, "邮箱不能为空");
return false;
} else if (!isEmail(email)) {
setErrorFor(emailInput, "请输入有效的邮箱地址");
return false;
} else {
setSuccess
5962
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
