近年来，在线购买杂货变得越发流行。本项目旨在创建一个用户友好且响应式的在线杂货购买网站。用户可以浏览各种分类，将商品添加到购物车，并前往结账，从而获得便捷、高效的购物体验。
!Grocery Website preview在线杂货店
前置条件：
方法：
- 首先，我们设置项目目录结构，为 HTML、CSS 和 JavaScript 分别建立独立文件。
- 然后，我们使用 HTML 设计网站的布局和结构，融入
（页眉）、导航菜单、商品展示、购物车和结账等部分。 - 使用 CSS 为网站设置样式，以增强视觉吸引力，并确保不同页面间的一致性。
- 使用 JavaScript 实现交互特性和功能，例如添加商品到购物车、更新数量和计算总额。
- 全面测试网站，以确保在不同设备和浏览器上的功能和响应性。
- 将网站部署到 Web 托管服务，使其在线可访问。
示例：使用下面的代码开发一个包含 HTML、CSS 和 JavaScript 的杂货网站。
HTML
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
* {
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f3f4f6;
color: #333;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
display: flex;
justify-content: space-between;
}
header {
background: linear-gradient(to right, #11998e, #38ef7d);
color: #ffffff;
padding: 20px 0;
text-align: center;
margin-bottom: 20px;
width: 100%;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
header h1 {
font-size: 2.5rem;
margin: 0;
}
header nav ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
gap: 20px;
}
header nav ul li {
display: inline;
}
header nav ul li a {
color: #ffffff;
text-decoration: none;
font-size: 1.2rem;
transition: color 0.3s ease;
}
header nav ul li a:hover {
color: #f3f4f6;
}
#products {
margin-bottom: 20px;
flex: 1;
}
.product {
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 20px;
margin-bottom: 20px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: transform 0.3s ease;
}
.product:hover {
transform: translateY(-5px);
}
.product img {
width: 100%;
max-width: 200px;
height: auto;
margin-bottom: 1rem;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.product h3 {
font-size: 1.5rem;
margin: 0;
}
.product p {
color: #666666;
margin-bottom: 0.5rem;
}
.product button {
background: linear-gradient(to right, #11998e, #38ef7d);
color: #ffffff;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
outline: none;
}
.product button:hover {
background: linear-gradient(to right, #0c8976, #30c270);
}
#cart {
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 20px;
width: 300px;
}
#cart h2 {
font-size: 2rem;
margin-bottom: 1rem;
color: #333;
}
#cart-items {
list-style-type: none;
padding: 0;
margin: 0;
}
.car