电商时代的到来,许多网页从此便有了购物车图标,虽说不是难点,但是菜鸟的学习总归是要日积月累的,也希望大家多多指教 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">></i>55 <i class="icon3">0</i>56 </div>57 </body>58 </html>
原标题:购物车案例——麻雀虽小五脏俱全(小标签 浮动 定位……)
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。