购物车案例--麻雀虽小五脏俱全（小标签 浮动 定位……）_html/css_WEB-ITnose
- WBOY원래의
- 2016-06-24 11:29:151215검색
电商时代的到来，许多网页从此便有了购物车图标，虽说不是难点，但是菜鸟的学习总归是要日积月累的，也希望大家多多指教
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: 左上角 右上角 右下角 左下角;
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.