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

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

 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>

案例效果：

 

总结：

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

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

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

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

2、border-radius:   50%;

3、border-radius:  px；

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

 

posted @ 2016-01-17 15:35  goweb  阅读(1292)  评论(0)  编辑  收藏  举报