用HTML、CSS、JavaScript制作一个简单购物网站
时间: 2023-11-11 11:05:52 浏览: 33
好的,以下是一个简单的购物网站的示例代码:
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<title>简单购物网站</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>简单购物网站</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">商品列表</a></li>
<li><a href="#">购物车</a></li>
<li><a href="#">我的账户</a></li>
</ul>
</nav>
</header>
<main>
<section class="product-list">
<h2>商品列表</h2>
<ul>
<li>
<img src="https://picsum.photos/200/300?random=1" alt="商品1">
<h3>商品1</h3>
<p>商品描述1</p>
<button>加入购物车</button>
</li>
<li>
<img src="https://picsum.photos/200/300?random=2" alt="商品2">
<h3>商品2</h3>
<p>商品描述2</p>
<button>加入购物车</button>
</li>
<li>
<img src="https://picsum.photos/200/300?random=3" alt="商品3">
<h3>商品3</h3>
<p>商品描述3</p>
<button>加入购物车</button>
</li>
</ul>
</section>
<section class="shopping-cart">
<h2>购物车</h2>
<ul>
<li>
<img src="https://picsum.photos/200/300?random=4" alt="商品4">
<h3>商品4</h3>
<p>商品描述4</p>
<p>价格:$10</p>
<button>删除</button>
</li>
</ul>
<p>购物车总价:$10</p>
<button>结算</button>
</section>
</main>
<footer>
<p>版权所有 © 2021 简单购物网站</p>
</footer>
</body>
</html>
```
CSS:
```css
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
}
header {
background-color: #333;
color: white;
padding: 20px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
nav li {
float: left;
}
nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav li a:hover {
background-color: #111;
}
main {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 20px;
}
.product-list {
flex-basis: 70%;
}
.product-list ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
}
.product-list li {
flex-basis: calc(33.33% - 20px);
margin: 10px;
background-color: white;
padding: 20px;
text-align: center;
box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
}
.product-list img {
max-width: 100%;
max-height: 200px;
margin-bottom: 10px;
}
.shopping-cart {
flex-basis: 25%;
background-color: #f2f2f2;
padding: 20px;
}
.shopping-cart ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.shopping-cart li {
margin-bottom: 20px;
background-color: white;
padding: 10px;
box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
}
.shopping-cart img {
max-width: 100%;
max-height: 100px;
margin-bottom: 10px;
}
.shopping-cart p {
margin: 0;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 20px;
}
```
JavaScript:
```javascript
// TODO: 添加 JavaScript 代码
```
这个示例网站包含了一个简单的导航栏、商品列表、购物车和页脚,可以根据需要进行修改和扩展。注意,这只是一个示例,实际的购物网站需要更复杂的功能和安全性措施。