找回密码
 立即注册

QQ登录

只需一步,快速开始

  • 代码风格:京东科沃斯旗舰店店铺底部简洁代码特效分享
  • 适用平台: 
  • 使用方法:自定义模块
  • 可否做成模板:点击查看定制详情

代码如下:

复制代码
  1. <style>
  2.                         .user_pageBottom{
  3.                                 margin:20px 0 120px 0;
  4.                                 }
  5.                         .user_pageBottom_ico{
  6.                                 width:1000px;
  7.                                 padding:50px 0;
  8.                                 margin: 0 auto;
  9.                         }
  10.                         .user_pageBottom_ico li{
  11.                                 list-style: none;
  12.                                 outline: none;
  13.                                 float: left;
  14.                                 display: block;
  15.                                 text-align: center;
  16.                                 width: 230px;
  17.                                 padding: 0 10px 0 10px;
  18.                                 }
  19.                         .user_pageBottom_ico li img{
  20.                                 opacity: 0.3;
  21.                                 transition: all ease 1s;
  22.                                 -moz-transition: all ease 1s;
  23.                                 -webkit-transition: all ease 1s;
  24.                                 -o-transition: all ease 1s;
  25.                                 }
  26.                         .user_pageBottom_ico li span{
  27.                                 display: block;
  28.                                 color: #253746;
  29.                                 font-size: 14px;
  30.                                 opacity: 0.5;
  31.                                 margin-top: 15px;
  32.                                 transition: all ease 1s;
  33.                                 -moz-transition: all ease 1s;
  34.                                 -webkit-transition: all ease 1s;
  35.                                 -o-transition: all ease 1s;
  36.                                 }
  37.                         .user_pageBottom_ico li:hover img, .user_pageBottom_ico li:hover span{
  38.                                 filter:alpha(opacity:100);
  39.                                 opacity:1;
  40.                                 }
  41.                         .user_pageBottom_menu{
  42.                                 width: 1920px;
  43.                                 margin: 0 auto;
  44.                                 background: #253746 url("//img10.360buyimg.com/imgzone/jfs/t20275/34/1007443742/1217/bc73b684/5b1ded93Na5624056.gif") 0px 100px repeat-x;
  45.                                 padding: 50px 0;
  46.                                 position: relative;
  47.                         }
  48.                         .user_pageBottom_menu .user_pageBottom_list{
  49.                                 width: 1000px;
  50.                                 margin: 0 auto;
  51.                         }
  52.                         .user_pageBottom_menu .user_pageBottom_list h6{
  53.                                 display: block;
  54.                                 width: 460px;
  55.                                 height: 92px;
  56.                                 position: absolute;
  57.                                 top: 34px;
  58.                                 left: 460px;
  59.                                 }
  60.                         .user_pageBottom_menu .user_pageBottom_list ul{
  61.                                 float:left;
  62.                                 width: 800px;
  63.                                 margin-top: 10px;
  64.                                 position: absolute;
  65.                                 top: 32px;
  66.                                 left: 720px;
  67.                                 }
  68.                         .user_pageBottom_menu .user_pageBottom_list ul li a{
  69.                                 float: left;
  70.                                 margin: 0 35px;
  71.                                 color: #ddd;
  72.                                 font-size: 14px;
  73.                                 }
  74.                         .user_pageBottom_menu .user_pageBottom_list ul li:hover a{
  75.                                 color: #fff;
  76.                                 }
  77.                         .user_bottomsloagn{
  78.                                 width: 1920px;
  79.                                 text-align:center;
  80.                                 padding: 50px 0;
  81.                                 }
  82.             </style>
  83. <div class="user_pageBottom">
  84.         <ul class="user_pageBottom_ico">
  85.                 <li>
  86.                         <img src="//img10.360buyimg.com/cms/jfs/t21658/120/1021853717/1751/f633a88c/5b1de0bfN36d8ccc2.png!q90.jpg" alt=" bland_ico7.png" width="80" /><span>7天无理由退换货</span>
  87.                 </li>
  88.                 <li>
  89.                         <img src="//img11.360buyimg.com/cms/jfs/t26143/342/173992146/6453/16deec09/5b87b427N1e376212.png!q90.jpg" alt=" bland_ico4.9.png" ks_mark="y" class="" ks_natural="y" width="80" /><span>专业客服</span>
  90.                 </li>
  91.                 <li>
  92.                         <img src="//img10.360buyimg.com/cms/jfs/t24049/312/2663867149/5088/99aa4c64/5b87b427N896eca6f.png!q90.jpg" alt=" bland_ico63.png" ks_mark="y" class="" ks_natural="y" width="80" /><span>京东自营急速配送</span>
  93.                 </li>
  94.                 <li>
  95.                         <img src="//img10.360buyimg.com/cms/jfs/t25729/288/1056446695/4870/45603f27/5b87b427Nc67e7bc4.png!q90.jpg" alt=" bland_ico100.png" ks_mark="y" class="" ks_natural="y" width="80" /><span>正规发票</span>
  96.                 </li>
  97.         </ul>
  98. </div>
  99. <div class="user_pageBottom_menu">
  100.         <div class="user_pageBottom_list">
  101.                 <h6>
  102.                         <img src="//img10.360buyimg.com/cms/jfs/t21814/231/988666794/5441/13bf2a56/5b1ded47Nb300b980.png!q90.jpg" alt="" ks_mark="y" class="" width="200px" height="40px" />
  103.                 </h6>
  104.                 <ul>
  105.                         <li>
  106.                                 <a href="//mall.jd.com/index-1000002989.html" target="_blank">返回首页</a>
  107.                         </li>
  108.                         <li>
  109.                                 <a href="//item.jd.com/6790822.html" target="_blank">热销爆款</a>
  110.                         </li>
  111.                         <li>
  112.                                 <a href="//item.jd.com/2676072.html" target="_blank">必抢爆款</a>
  113.                         </li>
  114.                         <li>
  115.                                 <a href="//item.jd.com/4930641.html" target="_blank">视觉导航</a>
  116.                         </li>
  117.                         <li>
  118.                                 <a href="//item.jd.com/3506353.html" target="_blank">窗宝系列</a>
  119.                         </li>
  120.                         <li>
  121.                                 <a href="//mall.jd.com/view_search-410099-5863401-1-0-20-1.html" target="_blank">套装优惠</a>
  122.                         </li>
  123.                 </ul>
  124.         </div>
  125. </div>
  126. <div class="user_bottomsloagn">
  127.         <img src="//img10.360buyimg.com/cms/jfs/t22210/189/1003828391/8287/53fcdc38/5b1e0916N0d4e7add.png!q90.jpg" alt="" ks_mark="y" class="" ks_natural="y" width="215px" />
  128. </div>
复制代码
1.jpg
分享至 : QQ空间
收藏
装修技术交流①群:326680981(即将满员)②群385402321 ③群170254880

0 个回复