Board logo

標題: HTML 練習(二) [打印本頁]
作者: 陳育霖    時間: 2023-8-5 02:48     標題: HTML 練習(二)

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

請依下圖設計一個相同的購物網站，圖片寬度為180px、高度為150px，圖片、品名、價格、按鈕皆為超連結。
檔名分別為:index.html、product1.html、product2.html、product3.html、product4.html
各別商品介面的圖片寬為400px、高350px，回首頁寬為60px、高為40px
[attach]16179[/attach]
[attach]16185[/attach]
[attach]16186[/attach]
本帖隱藏的內容需要回復才可以瀏覽

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

本帖隱藏的內容需要回復才可以瀏覽
作者: 蔡幸融    時間: 2023-8-12 14:01

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

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

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

  54. </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>
複製代碼




歡迎光臨 種子論壇 | 高雄市資訊培育協會學員討論區 (http://seed.istak.org.tw/) Powered by Discuz! 7.2