获取商品列表 HTML + CSS

66-41

已于 2023-07-03 19:28:40 修改

阅读量375

点赞数

文章标签： html css 前端

于 2023-07-01 14:18:07 首次发布

本文链接：https://blog.csdn.net/W256999/article/details/131490069

版权

按照淘宝的列表样式，自行添加删除

html：

 <ul>
      <li class="pc-items-item">
            <a
            target="_blank"
            class="pc-items-item-a"
            >
            <img
              class="pc-items-item-img img-loaded"
              src=""/>
            <div class="pc-items-item-title ">
              <span class="title-text" ></span >
            </div>
              <span class="coupon-price-old">¥58.00</span>
           </a>
      </li> 
 </ul>

css:

  a {
    text-decoration: none;
    }
  a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
  }
     .pc-items-item-a {
    display: inline-block;
    width: 234px;
    height: 366px;
    box-sizing: border-box;
    padding: 22px 20px 0;
    background: #fff;
    position: relative;
  }
    .pc-search-items-list .pc-items-item {
    width: 236px;
    height: 368px;
    box-sizing: border-box;
    display: inline-block;
    font-size: 12px;
    border: 1px solid #f2f2f2;
    border-top: none;
    border-left: none;
    background: #fff;
    vertical-align: top;
  }
.pc-search-items-list {
    width: 1190px;
    font-size: 0;
    font-family: 'helvetica neue',tahoma,'hiragino sans gb',stheiti,'wenquanyi micro hei',sans-serif;
    border-top: 1px solid #f2f2f2;
    border-left: 1px solid #f2f2f2;
}
.pc-items-item-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #9b9b9b;
    line-height: 20px;
    padding-top: 10px;
}
.coupon-price-old{
  margin-left: 4px;
    vertical-align: baseline;
    text-align: left;
    line-height: 25px;
    font-family: PingFangSC-Medium;
    font-size: 18px;
    color: #fd3f31;

}

.pc-items-item {
    text-align: -webkit-match-parent;
    margin-top: 20px;
}
.pc-items-item-a:hover {
    border: 1px solid #fd3f31;
    text-decoration: none;
    transform: translate(-1px,-1px);
}

.pc-items-item-img {
  width: 194px;
  height: 198px;
}
ul{
  /* width: 100%; */
  list-style: none;
  margin-left: 150px;
  display: flex;
  flex-wrap: wrap;
}