商品列表
以下是我們精選的商品列表:
<!DOCTYPE html> <html> <head> <title>Shopping Page</title> </head> <body> <h1>Shopping List</h1> <ul> <li> <div> <img src="product1.jpg" alt="Product1"> <p>Product 1</p> <p>$10.99</p> </div> </li> <li> <div> <img src="product2.jpg" alt="Product2"> <p>Product 2</p> <p>$19.99</p> </div> </li> <li> <div> <img src="product3.jpg" alt="Product3"> <p>Product 3</p> <p>$15.00</p> </div> </li> </ul> </body> </html>
這是一個(gè)簡(jiǎn)單的購(gòu)物頁面,其中包含三個(gè)商品,每個(gè)商品包含一張圖片、商品名以及價(jià)格信息。通過使用HTML標(biāo)簽,我們可以輕松地創(chuàng)建一個(gè)靜態(tài)頁面展示我們的商品。
在上面的代碼中,我們使用了<ul>和<li>標(biāo)簽來創(chuàng)建商品列表。每個(gè)商品都包含在一個(gè)<li>標(biāo)簽中,并在其內(nèi)部使用<div>包含了商品的信息。其中,<img>標(biāo)簽用于展示圖片,<p>標(biāo)簽用于展示商品名稱和價(jià)格。
當(dāng)用戶點(diǎn)擊商品時(shí),可以通過JavaScript代碼實(shí)現(xiàn)跳轉(zhuǎn)到詳情頁面或者添加到購(gòu)物車等操作。