购物车案例--麻雀虽小五脏俱全（小标签 浮动 定位……）_html/css_WEB-ITnose

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

 1  2  3  4      5      6     49 50 51         
52             我的购物车53             54             >55             056         
57 58 

案例效果：

总结：

三角是用大于号做的，购物车是精灵图定位，数量图标是用背景颜色，圆角矩形

1、29行的背景图不会撑开盒子。 2、图片和文字会撑开盒子。（文字比较特殊） 3、在小标签（行内标签）的情况下：

定位之后，不写left属性，默认的地方会出现的padding和a链接中的文字之后。

圆角矩形：四种写法1、border-radius: 1em;

2、border-radius: 50%;

3、border-radius: px；

4、border-radius: 左上角 右上角 右下角 左下角;