電商時代的到來，許多網頁從此便有了購物車圖標，雖說不是難點，但是菜鳥的學習總歸是要日積月累的，也希望大家多多指教 1 2 3 4 5 Document 6 49 50 51 52 我的購物車53 54 ...
電商時代的到來，許多網頁從此便有了購物車圖標，雖說不是難點，但是菜鳥的學習總歸是要日積月累的，也希望大家多多指教
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: 左上角 右上角 右下角 左下角;
