css仿京东底部菜单按钮悬浮层

收藏

这个底部悬浮层菜单是仿照京东商品详情的http://item.m.jd.com/product/1451400.html，菜单按钮有关注、加入购物车、购物车和立即购买。#carNum里面可加入购物车数量，为空表示购物车里面没有商品。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

底部菜单html

<div class="cart-concern-btm-fixed four-column" id="cart1" style="display: table;"> 
    <div class="concern-cart"> 
        <a  id="payAttention" class="love-heart-icn J_ping"> 
            <em  class="btm-act-attention"></em> 
            <span>关注</span> 
        </a> 
        <a id="toCart" class="cart-car-icn"> 
            <em id="shoppingCart" class="btm-act-icn"> 
                <i id="carNum" class="order-numbers">3</i> 
            </em> 
            <span>购物车</span> 
        </a> 
    </div> 
    <div class="action-list"> 
        <a id="add_cart" class="yellow-color" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);"> 加入购物车 </a> 
        <a id="directorder" class="red-color " style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">立即购买</a> 
    </div> 
</div>

底部悬浮导航样式

.cart-concern-btm-fixed { 
    bottom: 0; 
    height: 50px; 
    left: 0; 
    position: fixed; 
    text-align: center; 
    width: 100%; 
    z-index: 10; 
} 
 
.four-column .concern-cart { 
    width: 42%; 
} 
.concern-cart { 
    background-color: rgba(0, 0, 0, 0.8); 
} 
.concern-cart, .action-list { 
    float: left; 
} 
 
.concern-cart a { 
    color: #d4d4d4; 
    font-size: 10px; 
} 
.concern-cart a, .action-list a { 
    width: 50%; 
} 
.concern-cart a, .action-list a { 
    display: inline-block; 
    float: left; 
    height: 50px; 
    line-height: 50px; 
} 
 
.focus-container { 
    display: inline-block; 
    text-align: center; 
    width: 40px; 
} 
 
.focus-container .focus-icon { 
    margin-bottom: -18px; 
    text-align: center; 
} 
 
.focus-out { 
    background-position: 0 0; 
    display: inline-block; 
    height: 19px; 
    width: 21px; 
} 
 
.concern-cart a span { 
    display: block; 
    height: 18px; 
    line-height: 13px; 
    text-align: center; 
} 
.focus-info { 
    color: #d4d4d4; 
    font-size: 10px; 
} 
em.btm-act-icn { 
    background: url("../images/sprits_btm_new.png") no-repeat scroll 0 0; 
    display: block; 
    height: 24px; 
    margin: 8px auto 0; 
    position: relative; 
    width: 25px; 
} 
.cart-car-icn .btm-act-icn { 
    background-position: 0 -23px; 
    background-size: 50px 50px; 
} 
 
.order-numbers { 
    background-color: white; 
    border-radius: 8px; 
    color: #f15353; 
    display: inline-block; 
    font-size: 8px; 
    font-style: normal; 
    line-height: 12px; 
    padding: 0 5px; 
    position: absolute; 
    right: -10px; 
    top: -5px; 
} 
 
.four-column .action-list { 
    width: 58%; 
} 
 
.action-list a { 
    color: #fff; 
    font-size: 15px; 
} 
.yellow-color { 
    background-color: #ffb03f; 
} 
.red-color { 
    background-color: #f15353; 
} 
em.btm-act-attention { 
    background:  url("../images/focus-icon.png") no-repeat scroll 0 0 / 100px 100px; 
    display: inline-block; 
    height: 19px; 
    width: 21px; 
    background-position: 0 0; 
    margin:10.6px 0 2px 
}