用html写一个响应式,左边是商品介绍,商品介绍下面有一个按钮,背景色是蓝色,文字是产品彩页,按钮是半圆,右边是五张商品图片排列在一起,点击某张图片,左右商品介绍内容会变,默认选中第一个商品介绍,选中商品会有边框
时间: 2023-05-19 11:07:24 浏览: 62
以下是一个简单的响应式 HTML 代码,实现了您所描述的布局和功能:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商品介绍</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.container {
display: flex;
flex-wrap: wrap;
}
.left {
flex: 1;
padding: 20px;
background-color: #f2f2f2;
}
.right {
flex: 1;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
padding: 20px;
background-color: #fff;
}
.product {
margin: 10px;
width: 150px;
height: 150px;
border: 2px solid #ccc;
cursor: pointer;
transition: border-color 0.3s ease-in-out;
}
.product:hover, .product.selected {
border-color: #007bff;
}
.button {
display: block;
margin-top: 20px;
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border-radius: 20px 0 0 20px;
text-decoration: none;
font-weight: bold;
text-align: center;
transition: background-color 0.3s ease-in-out;
}
.button:hover {
background-color: #0062cc;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<h1>商品介绍</h1>
<p>这里是商品介绍的内容。</p>
<a href="#" class="button">产品彩页</a>
</div>
<div class="right">
<div class="product selected">
<img src="https://via.placeholder.com/150x150" alt="商品1">
</div>
<div class="product">
<img src="https://via.placeholder.com/150x150" alt="商品2">
</div>
<div class="product">
<img src="https://via.placeholder.com/150x150" alt="商品3">
</div>
<div class="product">
<img src="https://via.placeholder.com/150x150" alt="商品4">
</div>
<div class="product">
<img src="https://via.placeholder.com/150x150" alt="商品5">
</div>
</div>
</div>
<script>
const products = document.querySelectorAll('.product');
const button = document.querySelector('.button');
let selectedProduct = products[0];
products.forEach(product => {
product.addEventListener('click', () => {
selectedProduct.classList.remove('selected');
product.classList.add('selected');
selectedProduct = product;
});
});
button.addEventListener('click', () => {
alert('您点击了产品彩页按钮!');
});
</script>
</body>
</html>
```
这个代码使用了 Flexbox 布局,左边的商品介绍部分和右边的商品图片部分都是一个 flex 容器,左边的按钮使用了半圆形的 border-radius,点击图片时使用 JavaScript 切换选中状态并更新左边的商品介绍内容。