css模拟实现淘宝商品页面列表展示

实现淘宝商品页面列表展示可以使用CSS的Flexbox布局来实现。

首先，我们需要一个商品列表容器，可以使用一个div元素来作为容器，设置宽度和高度，以及设置display:flex，使其成为flex容器。

<div class="goods-list">
  <!-- 商品列表项 -->
  <div class="goods-item"></div>
  <div class="goods-item"></div>
  <div class="goods-item"></div>
  <div class="goods-item"></div>
  <div class="goods-item"></div>
</div>

.goods-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.goods-item {
  width: 30%;
  height: 300px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
}

上面的代码中，我们使用了flex-wrap属性将商品列表容器中的商品项进行自动换行。使用justify-content属性设置商品项之间的间距，这里我们使用space-between，表示在每个商品项之间平均分配空间。设置每个商品项的宽度为30%，高度为300px，并且设置margin-bottom属性为20px，使每个商品项之间有一定的间距。

接下来，我们可以使用CSS的伪类选择器:hover来实现商品项的鼠标悬停效果。

.goods-item:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

最后，我们可以使用CSS的动画效果来为商品项添加过渡动画。

.goods-item {
  width: 30%;
  height: 300px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  transition: box-shadow 0.3s ease-in-out;
}

.goods-item:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  transform: translateY(-5px);
}

上面的代码中，我们使用了transition属性为商品项添加了一个box-shadow属性的过渡效果，使鼠标悬停时商品项上方出现阴影。使用transform属性将商品项向上移动5px，让鼠标悬停时产生一定的视觉反馈。

综上所述，我们可以使用上面的代码块来实现淘宝商品页面列表展示。