可以的,以下是一个简单的商品购买界面的 HTML 和 CSS 和 js
时间: 2024-04-30 09:23:10 浏览: 7
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>商品购买界面</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>商品购买界面</h1>
</header>
<main>
<div class="product">
<img src="product.jpg" alt="商品图片">
<h2>商品名称</h2>
<p>商品描述</p>
<p class="price">$100</p>
<button class="add-to-cart">加入购物车</button>
</div>
</main>
<footer>
<p>© 2021 商品购买界面</p>
</footer>
<script src="script.js"></script>
</body>
</html>
```
CSS代码:
```
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
main {
padding: 20px;
}
.product {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
}
.product img {
max-width: 100%;
}
.product h2 {
margin-top: 10px;
margin-bottom: 5px;
font-size: 24px;
}
.product p {
margin: 0;
}
.product .price {
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
}
.product .add-to-cart {
background-color: #333;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 18px;
cursor: pointer;
}
.product .add-to-cart:hover {
background-color: #444;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
```
JavaScript代码:
```
const addButton = document.querySelector('.add-to-cart');
addButton.addEventListener('click', addToCart);
function addToCart() {
alert('商品已加入购物车!');
}
```