首页 > 其他 > 详细

购物车悬浮 + 购物数量显示

时间:2015-07-13 20:25:22      阅读:235      评论:0      收藏:0      [点我收藏+]

技术分享

 

上代码:

html界面

    <div class="cart">
        <div class="cart-num">99</div>
        <a href="#"><img class="cart-img" src="images/gwc.png"></a>
    </div>

css 样式

.cart{position: fixed; width: 40px; height: 40px; line-height:40px;top:20px;right:20px; z-index: 99999; border-radius: 180px; background-color: #787878; opacity: 0.8;}
.cart-img{ width: 32px; height: 32px; padding: 5px; margin: 4px 2px 2px 3px;}
.cart-num{position:absolute; margin:0; line-height: 12px; font-size: 0.55rem; color: #ffffff; padding: 0; top:-1px; right: -1px; width:13px; height: 13px; border: 1px solid #ea4b35; background-color: #ea4b35; z-index:999999; border-radius: 180px;}

 

购物车悬浮 + 购物数量显示

原文:http://www.cnblogs.com/zxyun/p/4643550.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!