电商时代的到来，许多网页从此便有了购物车图标，虽说不是难点，但是菜鸟的学习总归是要日积月累的，也希望大家多多指教
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: 左上角 右上角 右下角 左下角;