Web前端网页设计与制作（想起来哪里写哪里版）

本文技术栈基于Html+Css+JavaScript制作web页面以及功能实现的部分设计与展示，实际的网站开发会涉及更多的细节，包括但不限于用户认证、数据库存储、前端框架的使用、响应式设计、安全性措施等。

废话不说，直接看源码

1.index

首页：包含导航栏和一些基本介绍。
菜单页面：列出所有可选购的商品。
商品详情页面：当用户点击某个商品时，会展示该商品的详细信息，如价格、介绍等。
购物车页面：展示用户已选择的商品，并提供跳转至支付界面的选项。
支付界面：提供支付方式选择，如微信和支付宝。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>菜单页面</title><link rel="stylesheet" href="css/second.css">
</head>
<body><header><nav><ul><li><a href="menu.html">首页</a></li><li>菜单</a></li><li><a href="second_shopping.html" id="cart-link">购物车</a></li><li><a href="about.html">关于</a></li></ul></nav></header><section id="product-section"><div class="product-item"><h2>红烧肉</h2><img src="img/l1.jpg" alt="红烧肉" class="product-image"><p>价格：￥35</p><p>介绍：红烧肉是一道经典的中式美食，味道鲜美，肉质鲜嫩。</p><button class="add-to-cart" data-product='{"name": "红烧肉", "price": 35}'>加入购物车</button></div><div class="product-item"><h2>黄烧肉</h2><img src="img/l1.jpg" alt="黄烧肉" class="product-image"><p>价格：￥35</p><p>介绍：黄烧肉是一道经典的中式美食，味道鲜美，肉质鲜嫩。</p><button class="add-to-cart" data-product='{"name": "黄烧肉", "price": 35}'>加入购物车</button></div><div class="product-item"><h2>绿烧肉</h2><img src="img/l1.jpg" alt="绿烧肉" class="product-image"><p>价格：￥35</p><p>介绍：绿烧肉是一道经典的中式美食，味道鲜美，肉质鲜嫩。</p><button class="add-to-cart" data-product='{"name": "绿烧肉", "price": 35}'>加入购物车</button></div><div class="product-item"><h2>粉烧肉</h2><img src="img/l3.jpg" alt="粉烧肉" class="product-image"><p>价格：￥35</p><p>介绍：粉烧肉是一道经典的中式美食，味道鲜美，肉质鲜嫩。</p><button class="add-to-cart" data-product='{"name": "粉烧肉", "price": 35}'>加入购物车</button></div><div class="product-item"><h2>黑烧肉</h2><img src="img/l2.jpg" alt="黑烧肉" class="product-image"><p>价格：￥35</p><p>介绍：黑烧肉是一道经典的中式美食，味道鲜美，肉质鲜嫩。</p><button class="add-to-cart" data-product='{"name": "黑烧肉", "price": 35}'>加入购物车</button></div></section><footer><p>&copy; 2024 简易购物网站</p></footer><script src="js/second.js"></script>
</body>
</html>

Css

/* 重置浏览器默认样式 */
* {margin: 0;padding: 0;box-sizing: border-box;
}body {font-family: 'Arial', sans-serif;line-height: 1.6;background-color: #f4f4f4;color: #333;
}/* 导航栏样式 */
header {background-color: #333;color: #fff;padding: 10px 20px;text-align: center;
}nav ul {list-style: none;display: flex;justify-content: space-around;
}nav ul li a {text-decoration: none;color: #fff;padding: 10px 15px;transition: background-color 0.3s ease;
}nav ul li a:hover {background-color: #555;
}/* 商品详情部分样式 */
#product-section {display: flex;flex-wrap: wrap;justify-content: space-around;margin: 20px;padding: 20px;background: #fff;box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}.product-item {flex-basis: calc(20% - 20px);margin: 10px;text-align: center;padding: 20px;background: #f9f9f9;border: 1px solid #ddd;border-radius: 5px;
}.product-image {max-width: 100%;height: auto;margin-bottom: 20px;
}.product-item h2 {color: #d62828;margin-bottom: 10px;
}.product-item p {margin-bottom: 15px;
}/* 按钮样式 */
.add-to-cart {display: inline-block;padding: 10px 20px;background-color: #5cb85c;color: white;border: none;border-radius: 5px;cursor: pointer;transition: background-color 0.3s ease;
}.add-to-cart:hover {background-color: #4cae4c;
}/* 页脚样式 */
footer {background-color: #333;color: #fff;text-align: center;padding: 20px 0;position: relative;bottom: 0;width: 100%;
}

Js

document.querySelectorAll('.add-to-cart').forEach(button => {button.addEventListener('click', function() {const productData = JSON.parse(this.getAttribute('data-product'));let cart = JSON.parse(localStorage.getItem('cart')) || [];cart.push(productData);localStorage.setItem('cart', JSON.stringify(cart));alert('商品已添加到购物车！');document.getElementById('cart-link').textContent = `购物车 (${cart.length})`;});
});window.onload = function() {const cartItems = JSON.parse(localStorage.getItem('cart')) || [];document.getElementById('cart-link').textContent = `购物车 (${cartItems.length})`;
};

2.index

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>购物车</title><link rel="stylesheet" href="css/shopping.css">
</head>
<body><header><nav><ul><li><a href="index.html">首页</a></li></ul></nav></header><section id="cart"><h2>购物车</h2><ul id="cart-items"></ul><p id="total">总计：￥0</p> <button id="clear-cart">清空购物车</button> <button id="checkout">结算</button> </section><footer><p>&copy; 2024 简易购物网站</p></footer><script src="js/shopping.js"></script>
</body>
</html>

此处购物车页面没有做页面美化，只是提供了个大致Model哈便于演示功能设计，加个Style和一些美化元素即可

Css

/* 重置浏览器默认样式 */
* {margin: 0;padding: 0;box-sizing: border-box;
}body {font-family: 'Arial', sans-serif;line-height: 1.6;background-color: #f4f4f4;color: #333;
}/* 导航栏样式 */
header {background-color: #333;color: #fff;padding: 10px 20px;text-align: center;
}nav ul {list-style: none;display: flex;justify-content: space-around;
}nav ul li a {text-decoration: none;color: #fff;padding: 10px 15px;transition: background-color 0.3s ease;
}nav ul li a:hover {background-color: #555;
}/* 购物车列表样式 */
#cart-items {list-style: none;padding: 0;margin-top: 20px;
}#cart-items li {background: #fff;margin-bottom: 10px;padding: 10px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}/* 按钮样式 */
button {display: block;margin: 10px 0;padding: 10px 20px;background-color: #007bff;color: white;border: none;border-radius: 5px;cursor: pointer;transition: background-color 0.3s ease;
}button:hover {background-color: #0056b3;
}/* 页脚样式 */
footer {background-color: #333;color: #fff;text-align: center;padding: 20px 0;position: relative;bottom: 0;width: 100%;
}

Js

window.onload = function() {displayCart();
};function displayCart() {const cartItems = JSON.parse(localStorage.getItem('cart')) || [];const cartList = document.getElementById('cart-items');let total = 0;cartList.innerHTML = ''; // 清空现有的列表cartItems.forEach((item, index) => {const itemElement = document.createElement('li');itemElement.textContent = `${item.name} - ￥${item.price}`;cartList.appendChild(itemElement);total += item.price; // 计算总价});// 显示总价const totalDisplay = document.getElementById('total');totalDisplay.textContent = `总计：￥${total}`;
}// 清空购物车按钮事件
document.getElementById('clear-cart').addEventListener('click', function() {if (confirm('确定要清空购物车吗？')) {localStorage.removeItem('cart');window.location.reload(); // 重新加载页面}
});// 结算按钮事件
document.getElementById('checkout').addEventListener('click', function() {if (confirm('确认结算吗？')) {// 这里可以添加实际的结算逻辑，比如调用支付APIalert('结算成功！');localStorage.removeItem('cart'); // 清空购物车window.location.href = 'index.html'; // 结算后跳转到首页}
});

此处没有做实际的支付功能，只是模拟支付场景，这个示例提供了一个基本的购物车功能，用户可以点击“加入购物车”将商品添加到购物车列表中，点击“结账”会弹出支付成功的提示并清空购物车。实际的支付过程需要与支付服务提供商的API进行集成，这通常涉及到服务器端的逻辑和安全性考虑。

主页以及关于部分，直接连接另外Html页面，根据自己需求书写内容以及样式即可，这里就不一一展示了

仅供参考，提供思路方法，如有不足，欢迎指正，书写不易，喜欢点赞收藏呦~~

补充：

要在购物车页面显示商品的图片，需要在购物车页面的JavaScript中处理商品信息，并在HTML中为每个商品创建一个包含图片和文本的列表项。以下是实现这一功能的完整代码示例。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>购物车</title><link rel="stylesheet" href="css/second.css">
</head>
<body><header><nav><ul><li><a href="index.html">首页</a></li><li><a href="menu.html">菜单</a></li><li><a href="second_shopping.html" id="cart-link">购物车</a></li><li><a href="about.html">关于</a></li></ul></nav></header><section id="cart"><h2>购物车</h2><ul id="cart-items"></ul><p id="total">总计：￥0</p><button id="clear-cart">清空购物车</button><button id="checkout">结算</button></section><footer><p>&copy; 2024 简易购物网站</p></footer><script src="js/shopping.js"></script>
</body>
</html>

/* 重置浏览器默认样式 */
* {margin: 0;padding: 0;box-sizing: border-box;
}body {font-family: 'Arial', sans-serif;line-height: 1.6;background-color: #f4f4f4;color: #333;
}/* 导航栏样式 */
header {background-color: #333;color: #fff;padding: 10px 20px;text-align: center;
}nav ul {list-style: none;display: flex;justify-content: space-around;
}nav ul li a {text-decoration: none;color: #fff;padding: 10px 15px;transition: background-color 0.3s ease;
}nav ul li a:hover {background-color: #555;
}/* 购物车列表样式 */
#cart-items {list-style: none;padding: 0;margin-top: 20px;
}#cart-items li {background: #fff;margin-bottom: 10px;padding: 10px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);display: flex;align-items: center;
}#cart-items img {width: 50px; /* 根据需要调整图片大小 */height: auto;margin-right: 10px;
}/* 按钮样式 */
button {display: block;margin: 10px 0;padding: 10px 20px;background-color: #007bff;color: white;border: none;border-radius: 5px;cursor: pointer;transition: background-color 0.3s ease;
}button:hover {background-color: #0056b3;
}/* 页脚样式 */
footer {background-color: #333;color: #fff;text-align: center;padding: 20px 0;position: relative;bottom: 0;width: 100%;
}

window.onload = function() {displayCart();
};function displayCart() {const cartItems = JSON.parse(localStorage.getItem('cart')) || [];const cartList = document.getElementById('cart-items');let total = 0;cartList.innerHTML = ''; // 清空现有的列表cartItems.forEach((item, index) => {const itemElement = document.createElement('li');const itemImage = document.createElement('img');itemImage.src = `img/${item.name}.jpg`; // 假设图片文件名与商品名称相同itemImage.alt = item.name;itemImage.style.width = '50px'; // 根据需要调整图片大小itemElement.appendChild(itemImage);itemElement.textContent += ` ${item.name} - ￥${item.price}`;cartList.appendChild(itemElement);total += item.price; // 计算总价});// 显示总价const totalDisplay = document.getElementById('total');totalDisplay.textContent = `总计：￥${total}`;
}// 清空购物车按钮事件
document.getElementById('clear-cart').addEventListener('click', function() {if (confirm('确定要清空购物车吗？')) {localStorage.removeItem('cart');window.location.reload(); // 重新加载页面}
});// 结算按钮事件
document.getElementById('checkout').addEventListener('click', function() {if (confirm('确认结算吗？')) {// 这里可以添加实际的结算逻辑，比如调用支付APIalert('结算成功！');localStorage.removeItem('cart'); // 清空购物车window.location.href = 'index.html'; // 结算后跳转到首页}
});