你的位置:首页 > 网页设计

[网页设计]购物车案例——麻雀虽小五脏俱全(小标签 浮动 定位……)


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

 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:   左上角  右上角  右下角  左下角;