电商时代的到来，许多网页从此便有了购物车图标，虽说不是难点，但是菜鸟的学习总归是要日积月累的，也希望大家多多指教
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>
案例效果：
总结：
三角是用大于号做的，购物车是精灵图定位，数量图标是用背景颜色，圆角矩形
1、29行的背景图不会撑开盒子。 2、图片和文字会撑开盒子。（文字比较特殊） 3、在小标签（行内标签）的情况下：
定位之后，不写left属性，默认的地方会出现的padding和a链接中的文字之后。
圆角矩形：四种写法1、border-radius: 1em;
2、border-radius: 50%;
3、border-radius: px；
4、border-radius: 左上角 右上角 右下角 左下角;