返回列表 發帖

HTML 練習(二)

本帖最後由 陳育霖 於 2023-8-12 13:43 編輯

請依下圖設計一個相同的購物網站,圖片寬度為180px、高度為150px,圖片、品名、價格、按鈕皆為超連結。
檔名分別為:index.html、product1.html、product2.html、product3.html、product4.html
各別商品介面的圖片寬為400px、高350px,回首頁寬為60px、高為40px



本帖隱藏的內容需要回復才可以瀏覽

本帖隱藏的內容需要回復才可以瀏覽

本帖隱藏的內容需要回復才可以瀏覽
附件: 您需要登錄才可以下載或查看附件。沒有帳號?註冊

  1. <!DOCTYPE html>
  2. <html>

  3. <head>
  4.     <link rel="stylesheet" href="styles.css">
  5. </head>

  6. <body>
  7.     <h1>購物介面</h1>
  8.     <table>
  9.         <tr>
  10.             <td>
  11.                 <a href="product1.html">
  12.                     <img src="apple.jpg" alt="蘋果" class="index">
  13.                     <p>價格: $40</p>
  14.                     <p>商品名稱: 蘋果</p>
  15.                 </a>
  16.                 <button class="buy">購買</button>
  17.                 <button class="cart">加入購物車</button>
  18.             </td>
  19.             <td>
  20.                 <a href="product2.html">
  21.                     <img src="banana.jpg" alt="香蕉" class="index">
  22.                     <p>價格: $20</p>
  23.                     <p>商品名稱: 香蕉</p>
  24.                 </a>
  25.                 <button class="buy">購買</button>
  26.                 <button class="cart">加入購物車</button>
  27.             </td>
  28.         </tr>
  29.         <tr>
  30.             <td>
  31.                 <a href="product3.html">
  32.                     <img src="grape.jpg" alt="葡萄" class="index">
  33.                     <p>價格: $80</p>
  34.                     <p>商品名稱: 葡萄</p>
  35.                 </a>
  36.                 <button class="buy">購買</button>
  37.                 <button class="cart">加入購物車</button>
  38.             </td>
  39.             <td>
  40.                 <a href="product4.html">
  41.                     <img src="cherry.jpg" alt="櫻桃" class="index">
  42.                     <p>價格: $100</p>
  43.                     <p>商品名稱: 櫻桃</p>
  44.                 </a>
  45.                 <button class="buy">購買</button>
  46.                 <button class="cart">加入購物車</button>
  47.             </td>
  48.         </tr>
  49.     </table>
  50. </body>

  51. </html>
複製代碼
  1. <html>
  2.     <head>
  3.         <link rel="stylesheet" href="styles.css">
  4.     </head>
  5.     <body>
  6.         <a href="prh02.html">
  7.             <button class="index">回首頁</button>
  8.         </a>
  9.         <h1>蘋果商品介面</h1>
  10.         <table>
  11.             <tr>
  12.                 <td>
  13.                     <img src="apple.jpg" alt="蘋果" class="product">
  14.                 </td>
  15.                 <td>
  16.                     <h1>日本富士頻果</h1>
  17.                     <h3>價格: $40</h3>
  18.                     <button class="buy">購買</button>
  19.                     <button class="cart">加入購物車</button>
  20.                 </td>
  21.             </tr>
  22.         </table>
  23.     </body>
  24. </html>
複製代碼

TOP

返回列表