建缘首页
Portal
进入论坛
BBS
京东专区
JD
淘宝天猫
Taobao
设计交流
Design
QQ群
登录
/ 注册
用户名
Email
自动登录
找回密码
密码
登录
立即注册
只需一步,快速开始
搜索
搜索
热搜
电商设计
京东装修
天猫装修
淘宝装修
素材下载
运营交流
建缘设计
软件下载
本版
文章
帖子
用户
本版
文章
帖子
用户
发布
每日签到
运营交流
代码特效
基础教程
需求问答
运营交流
代码特效
基础教程
需求问答
作品欣赏
技术交流
素材下载
字体下载
软件下载
好友
帖子
收藏
道具
勋章
任务
淘帖
留言板
设置
我的收藏
退出
腾讯QQ
微信登录
进入论坛
›
京东专区
›
代码特效
›
查看内容
赞
1
建缘设计
管理员
42391
积分
1403
帖子
12
精华
【炫酷下拉导航】京东增强版下拉黑色炫酷导航,颜色可自己调整
【店招】带轮播搜索的白色简洁店招代码分享
【立体导航】京东测试有效,实现超有立体感的导航代码
锚点教程,实现页面内的跳转,淘宝天猫京东都适用
【搜索】京东自定义搜索框代码范例及获取自己家搜索地址的方法!
【导航】蓝色清爽下拉带图片轮播导航代码分享
【移动导航】京东导航特效—背景跟随鼠标移动,亲测有效
【侧滑】可以关闭的侧滑代码分享超有创意哦
【轮播】京东海尔旗舰店创意轮播代码分享
【轮播/菜单】1920全屏轮播悬浮二级分类菜单代码分享
【5月14日更新可用】京东店招显示超110px
2017-01-12
•
【全屏轮播】文字按钮全屏轮播特效代码分享
•
【侧滑】经典简洁侧滑悬浮商品轮播代码特效
•
【模板】【轮播】自适应轮播代码分享,含模
[图片特效]
京东科沃斯旗舰店店铺底部简洁代码特效分享
©
建缘设计
管理员
/ 2018-9-20 15:40 /
2 人收藏
版权:
保留作者信息
代码风格:京东科沃斯旗舰店店铺底部简洁代码特效分享
适用平台:
使用方法:自定义模块
代码预览
加群学习 >
代码如下:
复制代码
<style>
.user_pageBottom{
margin:20px 0 120px 0;
}
.user_pageBottom_ico{
width:1000px;
padding:50px 0;
margin: 0 auto;
}
.user_pageBottom_ico li{
list-style: none;
outline: none;
float: left;
display: block;
text-align: center;
width: 230px;
padding: 0 10px 0 10px;
}
.user_pageBottom_ico li img{
opacity: 0.3;
transition: all ease 1s;
-moz-transition: all ease 1s;
-webkit-transition: all ease 1s;
-o-transition: all ease 1s;
}
.user_pageBottom_ico li span{
display: block;
color: #253746;
font-size: 14px;
opacity: 0.5;
margin-top: 15px;
transition: all ease 1s;
-moz-transition: all ease 1s;
-webkit-transition: all ease 1s;
-o-transition: all ease 1s;
}
.user_pageBottom_ico li:hover img, .user_pageBottom_ico li:hover span{
filter:alpha(opacity:100);
opacity:1;
}
.user_pageBottom_menu{
width: 1920px;
margin: 0 auto;
background: #253746 url("//img10.360buyimg.com/imgzone/jfs/t20275/34/1007443742/1217/bc73b684/5b1ded93Na5624056.gif") 0px 100px repeat-x;
padding: 50px 0;
position: relative;
}
.user_pageBottom_menu .user_pageBottom_list{
width: 1000px;
margin: 0 auto;
}
.user_pageBottom_menu .user_pageBottom_list h6{
display: block;
width: 460px;
height: 92px;
position: absolute;
top: 34px;
left: 460px;
}
.user_pageBottom_menu .user_pageBottom_list ul{
float:left;
width: 800px;
margin-top: 10px;
position: absolute;
top: 32px;
left: 720px;
}
.user_pageBottom_menu .user_pageBottom_list ul li a{
float: left;
margin: 0 35px;
color: #ddd;
font-size: 14px;
}
.user_pageBottom_menu .user_pageBottom_list ul li:hover a{
color: #fff;
}
.user_bottomsloagn{
width: 1920px;
text-align:center;
padding: 50px 0;
}
</style>
<div class="user_pageBottom">
<ul class="user_pageBottom_ico">
<li>
<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>
</li>
<li>
<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>
</li>
<li>
<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>
</li>
<li>
<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>
</li>
</ul>
</div>
<div class="user_pageBottom_menu">
<div class="user_pageBottom_list">
<h6>
<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" />
</h6>
<ul>
<li>
<a href="//mall.jd.com/index-1000002989.html" target="_blank">返回首页</a>
</li>
<li>
<a href="//item.jd.com/6790822.html" target="_blank">热销爆款</a>
</li>
<li>
<a href="//item.jd.com/2676072.html" target="_blank">必抢爆款</a>
</li>
<li>
<a href="//item.jd.com/4930641.html" target="_blank">视觉导航</a>
</li>
<li>
<a href="//item.jd.com/3506353.html" target="_blank">窗宝系列</a>
</li>
<li>
<a href="//mall.jd.com/view_search-410099-5863401-1-0-20-1.html" target="_blank">套装优惠</a>
</li>
</ul>
</div>
</div>
<div class="user_bottomsloagn">
<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" />
</div>
复制代码
点评
陈苑岚
请看t.cn/A6Z0e03H(网址) 肺炎,大规模的死亡和恐惧,看海外真实报道...... git.io/gqqqq (网址)
发表于
昨天 15:27
分享至 :
QQ空间
收藏
回复
装修技术交流①群:326680981(即将满员)②群385402321 ③群170254880
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录
立即注册
2
个回复
倒序浏览
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册