找回密码
 立即注册

QQ登录

只需一步，快速开始

进入论坛 › 京东专区 › 代码特效 › 查看内容

建缘设计

管理员

[图片特效] 京东科沃斯旗舰店店铺底部简洁代码特效分享

© 建缘设计 管理员   /  2018-9-20 15:40  /   1 人收藏 版权：保留作者信息

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

    • 代码如下：

    复制代码
    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 个回复