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
}