找回密码
 立即注册

QQ登录

只需一步,快速开始

  • 代码风格:【商品推荐】京东小米官方旗舰店简洁一排三图划过放大
  • 适用平台:京东 
  • 使用方法:自定义模块
  • 可否做成模板:点击查看定制详情

一排三图的,一排2图的前几天更新了,稍后更新1排四图的

代码如下:

复制代码
  1. <style>
  2. .user-content {
  3.         width: 990px;
  4.         margin:0 auto;
  5.         margin-top: 20px;
  6. }
  7. .user-container{
  8.    width: 1003px;
  9. }
  10. .user-goods-item {
  11.         position: relative;
  12.     float: left;
  13.     width: 320px;
  14.     height: 350px;
  15.     padding-top: 47px;
  16.     margin-right: 14px;
  17.     margin-bottom: 14px;
  18.     text-align: center;
  19.     background: #fff;
  20.     overflow: hidden;
  21.     -webkit-transition: -webkit-box-shadow .5s linear;
  22.     transition: box-shadow .5s linear;
  23. }
  24. .user-goods-item:hover {-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);}
  25. .user-goods-item .user-figure-img {
  26.     width: 220px;
  27.     height: 200px;
  28.     margin: 0 auto 26px;
  29. }
  30. .user-goods-item:hover .user-figure-img img {
  31. -webkit-transition: all 900ms ease;
  32.     -moz-transition: all 900ms ease;
  33.     transition: all 900ms ease;
  34.     -webkit-transform: scale(1.05);
  35.      -moz-transform: scale(1.05);
  36.           transform: scale(1.05);
  37.    }
  38. .user-goods-item .user-desc {
  39.     margin: 0 auto;
  40.     height: 18px;
  41.     width: 80%;
  42.     font-size: 12px;
  43.     text-overflow: ellipsis;
  44.     white-space: nowrap;
  45.     overflow: hidden;
  46.     _zoom: 1;
  47.     color: #b0b0b0;
  48. }
  49. .user-goods-item .utitle a {
  50.     color: #424242;
  51.     text-decoration: none;
  52. }
  53. .user-goods-item .utitle {
  54.     margin: 3px auto;
  55.     width: 80%;
  56.     font-size: 14px;
  57.     font-weight: 400;
  58.     text-overflow: ellipsis;
  59.     white-space: nowrap;
  60.     overflow: hidden;
  61.     _zoom: 1;
  62. }
  63. .user-goods-item .user-price {
  64.     margin: 8px 0 15px;
  65.     color: #ff6700;
  66.     font-size: 18px;
  67. }
  68. .user-btn {
  69.         display: block;
  70.         margin: 30px auto;
  71.         width: 60%;
  72.         line-height: 35px;
  73.         height: 35px;
  74.         font-size: 14px;
  75.         background: #ff6700;
  76.         color: #fff;
  77.         text-decoration: none;
  78. }
  79. .user-btn:hover {
  80.         color: #fff;
  81. }
  82. .user-tag {
  83.         position: absolute;
  84.     top: 10px;
  85.     left: 20%;
  86.     z-index: 2;
  87.     margin-left: -50px;
  88.     font-size: 14px;
  89.     text-align: center;
  90.     color: #fff;
  91.     width: 80px;
  92.     height: 32px;
  93.     background: #fe5654;
  94.     border-radius: 100%;
  95.     line-height: 16px;
  96.     padding: 24px 0;
  97.     flex-pack: center;
  98.     -webkit-box-pack: center;
  99.     -webkit-justify-content: center;
  100.     -ms-flex-pack: center;
  101.     justify-content: center;
  102.     box-align: center;
  103.     -webkit-box-align: center;
  104.     -webkit-align-items: center;
  105.     -ms-flex-align: center;
  106.     align-items: center;
  107.     flex-align: center;
  108.     -webkit-box-align: center;
  109.     -webkit-align-items: center;
  110.     -ms-flex-align: center;
  111.     align-items: center;
  112.     display: box;
  113.     display: -webkit-box;
  114.     display: -webkit-flex;
  115.     display: -ms-flexbox;
  116.     display: flex;
  117.     box-orient: horizontal;
  118.     box-pack: center;
  119.     box-align: center;
  120. }
  121. .user-goods-item:hover .user-caption {
  122.         opacity: 1;
  123.         bottom: 10px;
  124.         transform: translateY(-100px);
  125.         -webkit-transform:translateY(-100px);
  126.         -moz-transform:translateY(-100px);
  127.         -ms-transform:translateY(-100px);
  128.         -o-transform:translateY(-100px);
  129. }
  130. .user-goods-item .user-caption {
  131.         cursor: pointer;
  132.         position: absolute;
  133.         opacity: 0;
  134.         top: 407px;
  135.         height: 90px;
  136.         width: 100%;
  137.         color: #fff;
  138.         background: rgba(0,0,0,0.3);
  139.         -webkit-transition:all 0.15s ease-in-out;
  140.         -moz-transition:all 0.15s ease-in-out;
  141.         -o-transition:all 0.15s ease-in-out;
  142.         -ms-transition:all 0.15s ease-in-out;
  143.         transition:all 0.15s ease-in-out;
  144. }
  145.                 </style>
  146. <div class="j-module user-content" module-function="autoLayout" module-param="{node:'li', spacingType:'margin', size:0.5}">
  147.         <div class="user-container">
  148.                                 <div class="user-goods-item">
  149.                         <div class="user-figure user-figure-img">
  150.                                 <a href="//item.jd.com/4620979.html" target="_blank" class="e-attention" >
  151.                                         <img class="" src="//img14.360buyimg.com/n6/jfs/t19774/192/1133399344/428808/7d6febca/5abb6b5bN151761c1.jpg" alt="小米(MI)小米电视4A 32英寸 L32M5-AZ 1GB+4GB 四核处理器 高清人工智能网络液晶平板电视" height="220" width="220" ks_mark="y">
  152.                                 </a>
  153.                         </div>
  154.                         <p class="user-desc"></p>
  155.                         <h2 class="utitle"><a href="">小米(MI)小米电视4A 32英寸 L32M5-AZ 1GB+4GB 四核处理器 高清人工智能网络液晶平板电视</a></h2>
  156.                         <p class="user-desc">小尺寸旗舰机,1GB+4GB大内存,是大容量的电视机也是有速度的游戏机,搭载智能系统,打造卧室神器!小米电视更多惊喜请戳哦~</p>
  157.                         <p class="user-price"><span class="jdNum d-jd-price">879.00</span>元</p>
  158.                                                 <div class="user-caption"><a class="user-btn" href="//cart.jd.com/gate.action?pid=4620979&pcount=1&ptype=1&" >立即购买</a></div>
  159.                 </div>
  160.                                 <div class="user-goods-item">
  161.                         <div class="user-figure user-figure-img">
  162.                                 <a href="//item.jd.com/4609652.html" target="_blank" class="e-attention" >
  163.                                         <img class="" src="//img14.360buyimg.com/n6/jfs/t21781/36/199579376/412700/86cd449f/5b02804dN66004d73.jpg" alt="小米(MI)小米电视4A  55英寸 L55M5-AZ/L55M5-AD  2GB+8GB  HDR 4K超高清 人工智能网络液晶平板电视" height="220" width="220" ks_mark="y">
  164.                                 </a>
  165.                         </div>
  166.                         <p class="user-desc"></p>
  167.                         <h2 class="utitle"><a href="">小米(MI)小米电视4A  55英寸 L55M5-AZ/L55M5-AD  2GB+8GB  HDR 4K超高清 人工智能网络液晶平板电视</a></h2>
  168.                         <p class="user-desc"> 2G+8G大内存  4K超高清  4X 55英寸现货充足----》 #标配蓝牙语音遥控,详情点击#</p>
  169.                         <p class="user-price"><span class="jdNum d-jd-price">2297.00</span>元</p>
  170.                                                 <div class="user-caption"><a class="user-btn" href="//cart.jd.com/gate.action?pid=4609652&pcount=1&ptype=1&" >立即购买</a></div>
  171.                 </div>
  172.                                 <div class="user-goods-item">
  173.                         <div class="user-figure user-figure-img">
  174.                                 <a href="//item.jd.com/6297347.html" target="_blank" class="e-attention" >
  175.                                         <img class="" src="//img13.360buyimg.com/n6/jfs/t17050/106/1124838205/250590/7e63050a/5abb6be2N853106d9.jpg" alt="小米(MI)小米电视4A 50英寸 L50M5-AD 2GB+8GB HDR 4K超高清 蓝牙语音遥控 人工智能语音网络液晶平板电视" height="220" width="220" ks_mark="y">
  176.                                 </a>
  177.                         </div>
  178.                         <p class="user-desc"></p>
  179.                         <h2 class="utitle"><a href="">小米(MI)小米电视4A 50英寸 L50M5-AD 2GB+8GB HDR 4K超高清 蓝牙语音遥控 人工智能语音网络液晶平板电视</a></h2>
  180.                         <p class="user-desc">人工智能语音系统支持语音搜片&标配蓝牙语音遥控器,4K+HDR&杜比音效&海量片源&超丰富接口,娱乐体验再升级!小米电视更多惊喜请戳哦~</p>
  181.                         <p class="user-price"><span class="jdNum d-jd-price">1899.00</span>元</p>
  182.                                                 <div class="user-caption"><a class="user-btn" href="//cart.jd.com/gate.action?pid=6297347&pcount=1&ptype=1&" >立即购买</a></div>
  183.                 </div>
  184.                                 
  185.                         </div>
  186. </div>
复制代码
2.jpg
分享至 : QQ空间
收藏
装修技术交流①群:326680981(即将满员)②群385402321 ③群170254880

0 个回复