三十的博客

仿购物网站商品列表布局

发布时间
阅读量 加载中...

学习淘宝和京东网页商品列表布局。

效果预览

此演示仅在桌面端浏览器中可用

淘宝实现思路

html 
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      .w {
        width: 80%;
        margin: 10px auto;
      }

      .container {
        display: flex;
        flex-wrap: wrap;
        margin-left: -8px;
        margin-right: -8px;
      }

      .item {
        flex: 0 0 16.6666667%;
        height: 100px;
        margin-bottom: 10px;
        padding: 0 8px;
      }

      .context {
        width: 100%;
        height: 100%;
        background-color: paleturquoise;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
      }
      .footer {
        width: 80%;
        height: 20px;
        background-color: black;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <div class="w">
      <div class="container">
        <div class="item">
          <div class="context">1</div>
        </div>
        <div class="item">
          <div class="context">2</div>
        </div>
        <div class="item">
          <div class="context">3</div>
        </div>
        <div class="item">
          <div class="context">4</div>
        </div>
        <div class="item">
          <div class="context">5</div>
        </div>
        <div class="item">
          <div class="context">6</div>
        </div>
        <div class="item">
          <div class="context">7</div>
        </div>
        <div class="item">
          <div class="context">8</div>
        </div>
        <div class="item">
          <div class="context">9</div>
        </div>
        <div class="item">
          <div class="context">10</div>
        </div>
        <div class="item">
          <div class="context">11</div>
        </div>
        <div class="item">
          <div class="context">12</div>
        </div>
        <div class="item">
          <div class="context">13</div>
        </div>
        <div class="item">
          <div class="context">14</div>
        </div>
        <div class="item">
          <div class="context">15</div>
        </div>
        <div class="item">
          <div class="context">16</div>
        </div>
      </div>
    </div>
    <footer class="footer"></footer>
  </body>
</html>

京东实现思路

html 
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }

      .container {
        width: 80%;
        margin: 10px auto;
        display: flex;
        flex-wrap: wrap;
        border: 1px solid #ccc;
      }

      .item {
        height: 100px;
        background-color: paleturquoise;
        flex: 1;
        min-width: calc(16.666667% - 16px);
        max-width: calc(16.666667% - 16px);
        margin: 0 8px 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
      <div class="item">10</div>
      <div class="item">11</div>
      <div class="item">12</div>
      <div class="item">13</div>
      <div class="item">14</div>
      <div class="item">15</div>
      <div class="item">16</div>
    </div>
  </body>
</html>
#Flex #Css