CSS是一種很強大的網頁設計語言，它可以用來實現最漂亮的網站。今天，我們將一起學習如何使用CSS來實現購物車代碼。

/* 設置購物車圖標樣式 */
.cart-icon {
width: 30px;
height: 30px;
background-image: url('cart-icon.png');
background-size: cover;
}
/* 設置購物車數量樣式 */
.cart-count {
display: inline-block;
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
text-align: center;
color: white;
font-size: 12px;
line-height: 20px;
margin-left: -12px;
margin-top: -10px;
}
/* HTML代碼 */
<div class="cart-icon">
<span class="cart-count">3</span>
</div>

在上面的代碼中，我們首先設置了購物車圖標的樣式，使用background-image屬性來引入購物車圖標的圖片。接下來，我們用display:inline-block將購物車數量樣式設置為行內塊級元素，并給它一個背景色和文本顏色。最后，我們將購物車數量樣式向左和向上移動，以適應購物車圖標的位置。

最后，我們將HTML代碼包裝在div元素中，包含購物車圖標和購物車數量。這樣就可以在網頁上顯示一個漂亮的購物車圖標和相應的購物車數量。