標題:
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
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>購物介面</h1>
<table>
<tr>
<td>
<a href="product1.html">
<img src="apple.jpg" alt="蘋果" class="index">
<p>價格: $40</p>
<p>商品名稱: 蘋果</p>
</a>
<button class="buy">購買</button>
<button class="cart">加入購物車</button>
</td>
<td>
<a href="product2.html">
<img src="banana.jpg" alt="香蕉" class="index">
<p>價格: $20</p>
<p>商品名稱: 香蕉</p>
</a>
<button class="buy">購買</button>
<button class="cart">加入購物車</button>
</td>
</tr>
<tr>
<td>
<a href="product3.html">
<img src="grape.jpg" alt="葡萄" class="index">
<p>價格: $80</p>
<p>商品名稱: 葡萄</p>
</a>
<button class="buy">購買</button>
<button class="cart">加入購物車</button>
</td>
<td>
<a href="product4.html">
<img src="cherry.jpg" alt="櫻桃" class="index">
<p>價格: $100</p>
<p>商品名稱: 櫻桃</p>
</a>
<button class="buy">購買</button>
<button class="cart">加入購物車</button>
</td>
</tr>
</table>
</body>
</html>
複製代碼
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<a href="prh02.html">
<button class="index">回首頁</button>
</a>
<h1>蘋果商品介面</h1>
<table>
<tr>
<td>
<img src="apple.jpg" alt="蘋果" class="product">
</td>
<td>
<h1>日本富士頻果</h1>
<h3>價格: $40</h3>
<button class="buy">購買</button>
<button class="cart">加入購物車</button>
</td>
</tr>
</table>
</body>
</html>
複製代碼
歡迎光臨 種子論壇 | 高雄市資訊培育協會學員討論區 (http://istak.org.tw/seed/)
Powered by Discuz! 7.2