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

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

WBOY

Release： 2016-06-24 11:29:15

Original

1217 people have browsed it

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

 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>

Copy after login

案例效果：

总结：

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

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

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

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

2、border-radius: 50%;

3、border-radius: px；

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