你的位置:首页 > 软件开发 > 网页设计 > 购物车案例——麻雀虽小五脏俱全(小标签 浮动 定位……)

购物车案例——麻雀虽小五脏俱全(小标签 浮动 定位……)

发布时间:2016-01-17 16:00:18
电商时代的到来,许多网页从此便有了购物车图标,虽说不是难点,但是菜鸟的学习总归是要日积月累的,也希望大家多多指教 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <m ...

购物车案例——麻雀虽小五脏俱全(小标签 浮动 定位……)

电商时代的到来,许多网页从此便有了购物车图标,虽说不是难点,但是菜鸟的学习总归是要日积月累的,也希望大家多多指教

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4   <meta charset="UTF-8"> 5   <title>Document</title> 6   <style> 7   *{margin: 0;padding: 0} 8   a{ 9     text-decoration: none;10   }11   .cart {12     width: 100px;13     height: 35px;14     float: right;15     line-height: 35px;16     border: 1px solid #DFDFDF;17     margin: 25px 65px 0 0;18     padding-left: 45px;19     position: relative;20   }21   .cart i {22     position: absolute;23   }24   .icon1 {25     top: 8px;26     left: 12px;27     width: 20px;28     height: 15px;29     background: url(tel.png) no-repeat 0 -90px;30   }31   .icon2 {32     top: 10px;33     right: 10px;34     font: 400 13px/13px "simsun";35     color: #999;36   }37   .icon3 {38     top: -5px;39     width: 16px;40     height: 14px;41     line-height: 14px;42     right: -3px;43     text-align: center;44     color: #fff;45     background-color: #C81623;46     border-radius: 7px 7px 7px 0;47   }48   </style>49 </head>50 <body>51     <div class="cart">52       <a href="#">我的购物车</a>53       <i class="icon1"></i>54       <i class="icon2">&gt;</i>55       <i class="icon3">0</i>56     </div>57 </body>58 </html>

原标题:购物车案例——麻雀虽小五脏俱全(小标签 浮动 定位……)

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录