码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2015-07-13 20:26:12      阅读:84      评论: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
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!