您当前的位置：首页 > 计算机 > 编程开发 > Html+Div+Css（前端）
CSS实现jd的商品列表，附完整代码！

时间：01-15来源：作者：点击数：25
前言

今天，我们综合以前学习的知识，来写一下 jd 的商品列表，如下。
其实很多这种列表啊，都是类似的，比如，tb的，无非是增加了少许文字，改下宽度和间距，加个边框，通过定位或者背景增加一些小周边等。写多了就熟能生巧了。
OK，咱们的效果如下。
那来一起看看代码吧。
代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jd Example</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        color: #333;
        box-sizing: border-box;
      }
      i {
        font-style: normal;
      }
      a {
        text-decoration: none; /* 去除下划线 */
      }
      li {
        list-style-type: none; /* 去除列表项的默认样式 */
      }
      img {
        display: block;
        width: 100%; /* 图片宽度设置为100% ，免得很多图要根据父级设置宽高了*/
      }
      /* 清除浮动样式 */
      .clearfix::after {
        content: '';
        display: table;
        clear: both;
      }
      /* 以上为CSS重置部分 */
      body {
        background-color: #f4f4f4;
      }

      img {
        display: block;
        width: 100%;
      }
      .container {
        margin: 50px auto 10px auto;
        width: 1200px;
      }
      .container > .product-list {
        float: left;
        width: 230px;
        margin: 0px 12.5px 15px 0px;
        background-color: #fff;
      }
      .container > .product-list:nth-child(5n) {
        margin-right: 0px;
      }
      .container .product-img {
        transition: all 0.3s; // 添加过渡效果
      }
      .container .product-list:hover .product-img {
        opacity: 0.5;
      }
      .txt-box {
        padding: 0px 20px;
      }
      .container .product-list .txt-line1 {
        margin: 5px 0px;
        line-height: 24px;
        height: 48px;
        color: #333;
        font-size: 14px;
        /* 设置超出2行显示省略号 */
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .txt-icon1 {
        background-color: #e1251b;
        border-radius: 2px;
        color: #fff;
        padding: 0 5px;
        margin-right: 4px;
        line-height: 16px;
        height: 16px;
        font-size: 12px;
        display: inline-block;
        font-family: Helvetica Neue, Hiragino Sans GB, SimSun, serif;
      }
      .txt-line2 {
        padding: 5px 0px;
      }
      .price-icon {
        vertical-align: middle;
        font-size: 12px;
        font-weight: 700;
        font-family: MicrosoftYahei-regular, Arial, Helvetica, sans-serif;
        color: #e1251b;
      }
      .price {
        font-size: 20px;
        font-weight: 700;
        font-family: arial, sans-serif;
        color: #e1251b;
      }
    </style>
  </head>
  <body>
    <div class="container clearfix">
      <div class="product-list">
        <img src="img/list-img1.png" class="product-img" alt="" />
        <div class="txt-box">
          <p class="txt-line1"><i class="txt-icon1">自营</i>摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
          <div class="txt-line2"><i class="price-icon">￥</i><span class="price">888.88</span></div>
        </div>
      </div>
      <div class="product-list">
        <img src="img/list-img1.png" class="product-img" alt="" />
        <div class="txt-box">
          <p class="txt-line1">摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
          <div class="txt-line2"><i class="price-icon">￥</i><span class="price">888.88</span></div>
        </div>
      </div>
      <div class="product-list">
        <img src="img/list-img1.png" class="product-img" alt="" />
        <div class="txt-box">
          <p class="txt-line1"><i class="txt-icon1">自营</i>摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
          <div class="txt-line2"><i class="price-icon">￥</i><span class="price">888.88</span></div>
        </div>
      </div>
      <div class="product-list">
        <img src="img/list-img1.png" class="product-img" alt="" />
        <div class="txt-box">
          <p class="txt-line1">摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
          <div class="txt-line2"><i class="price-icon">￥</i><span class="price">888.88</span></div>
        </div>
      </div>
      <div class="product-list">
        <img src="img/list-img1.png" class="product-img" alt="" />
        <div class="txt-box">
          <p class="txt-line1"><i class="txt-icon1">自营</i>摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
          <div class="txt-line2"><i class="price-icon">￥</i><span class="price">888.88</span></div>
        </div>
      </div>
      <div class="product-list">
        <img src="img/list-img1.png" class="product-img" alt="" />
        <div class="txt-box">
          <p class="txt-line1"><i class="txt-icon1">自营</i>摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
          <div class="txt-line2"><i class="price-icon">￥</i><span class="price">888.88</span></div>
        </div>
      </div>
      <div class="product-list">
        <img src="img/list-img1.png" class="product-img" alt="" />
        <div class="txt-box">
          <p class="txt-line1"><i class="txt-icon1">自营</i>摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
          <div class="txt-line2"><i class="price-icon">￥</i><span class="price">888.88</span></div>
        </div>
      </div>
      <div class="product-list">
        <img src="img/list-img1.png" class="product-img" alt="" />
        <div class="txt-box">
          <p class="txt-line1"><i class="txt-icon1">自营</i>摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
          <div class="txt-line2"><i class="price-icon">￥</i><span class="price">888.88</span></div>
        </div>
      </div>
      <div class="product-list">
        <img src="img/list-img1.png" class="product-img" alt="" />
        <div class="txt-box">
          <p class="txt-line1"><i class="txt-icon1">自营</i>摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
          <div class="txt-line2"><i class="price-icon">￥</i><span class="price">888.88</span></div>
        </div>
      </div>
      <div class="product-list">
        <img src="img/list-img1.png" class="product-img" alt="" />
        <div class="txt-box">
          <p class="txt-line1"><i class="txt-icon1">自营</i>摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
          <div class="txt-line2"><i class="price-icon">￥</i><span class="price">888.88</span></div>
        </div>
      </div>
      <div class="product-list">
        <img src="img/list-img1.png" class="product-img" alt="" />
        <div class="txt-box">
          <p class="txt-line1"><i class="txt-icon1">自营</i>摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
          <div class="txt-line2"><i class="price-icon">￥</i><span class="price">888.88</span></div>
        </div>
      </div>
      <div class="product-list">
        <img src="img/list-img1.png" class="product-img" alt="" />
        <div class="txt-box">
          <p class="txt-line1"><i class="txt-icon1">自营</i>摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
          <div class="txt-line2"><i class="price-icon">￥</i><span class="price">888.88</span></div>
        </div>
      </div>
      <div class="product-list">
        <img src="img/list-img1.png" class="product-img" alt="" />
        <div class="txt-box">
          <p class="txt-line1"><i class="txt-icon1">自营</i>摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
          <div class="txt-line2"><i class="price-icon">￥</i><span class="price">888.88</span></div>
        </div>
      </div>
      <div class="product-list">
        <img src="img/list-img1.png" class="product-img" alt="" />
        <div class="txt-box">
          <p class="txt-line1"><i class="txt-icon1">自营</i>摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
          <div class="txt-line2"><i class="price-icon">￥</i><span class="price">888.88</span></div>
        </div>
      </div>
      <div class="product-list">
        <img src="img/list-img1.png" class="product-img" alt="" />
        <div class="txt-box">
          <p class="txt-line1"><i class="txt-icon1">自营</i>摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
          <div class="txt-line2"><i class="price-icon">￥</i><span class="price">888.88</span></div>
        </div>
      </div>
      <div class="product-list">
        <img src="img/list-img1.png" class="product-img" alt="" />
        <div class="txt-box">
          <p class="txt-line1"><i class="txt-icon1">自营</i>摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
          <div class="txt-line2"><i class="price-icon">￥</i><span class="price">888.88</span></div>
        </div>
      </div>
      <div class="product-list">
        <img src="img/list-img1.png" class="product-img" alt="" />
        <div class="txt-box">
          <p class="txt-line1"><i class="txt-icon1">自营</i>摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色</p>
          <div class="txt-line2"><i class="price-icon">￥</i><span class="price">888.88</span></div>
        </div>
      </div>
    </div>
  </body>
</html>