web前端商品图片展示代码
时间: 2023-06-18 09:08:56 浏览: 65
以下是一个基本的商品图片展示代码示例:
HTML:
```
<div class="product-gallery">
<div class="main-image">
<img src="path/to/main-image.jpg" alt="Product Main Image">
</div>
<div class="thumbnails">
<div class="thumbnail">
<img src="path/to/thumbnail-1.jpg" alt="Thumbnail 1">
</div>
<div class="thumbnail">
<img src="path/to/thumbnail-2.jpg" alt="Thumbnail 2">
</div>
<div class="thumbnail">
<img src="path/to/thumbnail-3.jpg" alt="Thumbnail 3">
</div>
<div class="thumbnail">
<img src="path/to/thumbnail-4.jpg" alt="Thumbnail 4">
</div>
</div>
</div>
```
CSS:
```
.product-gallery {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.main-image {
flex: 1;
margin-right: 20px;
}
.main-image img {
max-width: 100%;
height: auto;
}
.thumbnails {
display: flex;
flex-wrap: wrap;
width: 200px;
}
.thumbnail {
flex: 1;
margin-right: 10px;
}
.thumbnail img {
max-width: 100%;
height: auto;
border: 2px solid #ddd;
cursor: pointer;
}
.thumbnail img:hover {
border-color: #555;
}
```
这个示例中,商品图片展示区域包括一个主图和若干个缩略图,用户可以点击缩略图切换主图显示。可以根据实际需要进行样式的调整。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)