頭像

850游戏为什么没人抓

來源:js.html?/714.html 素材火管理員 2016-01-27 18:18瀏覽(101)收藏

這個底部懸浮層菜單是仿照京東商品詳情的http://item.m.jd.com/product/1451400.html,菜單按鈕有關注、加入購物車、購物車和立即購買。#carNum裏麵可加入購物車數量,為空表示購物車裏麵沒有商品。

素材火QQ群:35291327,在線充值,或聯係QQ416148489直接充值

css仿京東底部菜單按鈕懸浮層
查看演示 下載資源: 3下載資源 下載積分: 1

850棋牌

<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>

850棋牌

.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
}
聲明:本文為原創文章,如需轉載,請注明來源sucaihuo.com並保留原文鏈接:js.html?/714.html
如果您覺得本文的內容對您的學習有所幫助,您可以掃描下麵的二維碼請我喝杯茶,感謝!
alipay轉賬
評論4
頭像
  • 頭像3樓
    03-06 10:22
    5852305
    這個效果很好啊
  • 頭像板凳
    03-06 08:46
    dansham
    不錯啊,
  • 頭像椅子
    03-05 10:27
    toease
    純css的,不錯哦
  • 頭像沙發
    03-05 08:38
    keith68_huang
    不錯的網站。。。