用纯html+bootstarp写一个电脑店的商品展示页面
时间: 2023-12-17 16:03:12 浏览: 37
好的,以下是一个使用纯HTML和Bootstrap编写的电脑店商品展示页面的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>商品展示页面</title>
<!-- 引入Bootstrap样式 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
</head>
<body>
<div class="container py-5">
<h1 class="text-center mb-5">电脑店商品展示</h1>
<div class="row row-cols-1 row-cols-md-3 g-4">
<!-- 商品卡片 -->
<div class="col">
<div class="card h-100">
<img src="https://picsum.photos/200/200" class="card-img-top" alt="商品图片">
<div class="card-body">
<h5 class="card-title">商品名称1</h5>
<p class="card-text">商品描述1</p>
<p class="card-text">价格:¥1000</p>
<a href="#" class="btn btn-primary">立即购买</a>
</div>
</div>
</div>
<!-- 商品卡片 -->
<div class="col">
<div class="card h-100">
<img src="https://picsum.photos/200/200" class="card-img-top" alt="商品图片">
<div class="card-body">
<h5 class="card-title">商品名称2</h5>
<p class="card-text">商品描述2</p>
<p class="card-text">价格:¥2000</p>
<a href="#" class="btn btn-primary">立即购买</a>
</div>
</div>
</div>
<!-- 商品卡片 -->
<div class="col">
<div class="card h-100">
<img src="https://picsum.photos/200/200" class="card-img-top" alt="商品图片">
<div class="card-body">
<h5 class="card-title">商品名称3</h5>
<p class="card-text">商品描述3</p>
<p class="card-text">价格:¥3000</p>
<a href="#" class="btn btn-primary">立即购买</a>
</div>
</div>
</div>
</div>
</div>
<!-- 引入Bootstrap库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.1/js/bootstrap.min.js"></script>
</body>
</html>
```
注:以上代码需要同时引入Bootstrap库才能正常运行。由于图片资源来自于第三方库,因此每次刷新页面可能会显示不同的图片。