京东首页商品布局 | 美观且高效地展示商品

2023-11-15 03:26:50

京东，作为国内领先的电商巨头，其首页的商品布局可谓是精妙绝伦，既美观又高效地展示了海量的商品，为用户提供了便捷的购物体验。在本文中，我们将深入了解京东首页的商品布局，并学习如何使用浮动来实现这种布局。

搭建最外层的 HTML 结构以及样式

<div id="header">
  <div class="logo"></div>
  <div class="nav-menu"></div>
  <div class="search-box"></div>
</div>

<div id="main">
  <div class="product-list"></div>
  <div class="marketing-info"></div>
</div>

<div id="footer">
  <div class="site-info"></div>
  <div class="copyright"></div>
</div>

#header {
  width: 100%;
  height: 100px;
  background-color: #ffffff;
}

#main {
  width: 100%;
  margin-top: 100px;
  background-color: #f2f2f2;
}

#footer {
  width: 100%;
  height: 100px;
  background-color: #000000;
}

添加商品列表元素

接下来，我们需要在主体部分添加商品列表元素。京东首页的商品列表采用了一个浮动布局，这意味着商品列表项将水平排列，并且在遇到容器的边缘时自动换行。

<div class="product-list">
  <div class="product-item">
    <div class="product-image"></div>
    <div class="product-info">
      <div class="product-name"></div>
      <div class="product-price"></div>
    </div>
  </div>

  <div class="product-item">
    <div class="product-image"></div>
    <div class="product-info">
      <div class="product-name"></div>
      <div class="product-price"></div>
    </div>
  </div>

  <!-- more product items -->
</div>

.product-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.product-item {
  width: 200px;
  height: 300px;
  margin: 10px;
  border: 1px solid #cccccc;
}

.product-image {
  width: 100%;
  height: 200px;
  background-color: #cccccc;
}

.product-info {
  width: 100%;
  height: 100px;
  padding: 10px;
}

.product-name {
  font-size: 16px;
  font-weight: bold;
}

.product-price {
  font-size: 14px;
  color: #ff0000;
}