已作答 0 / 15 題
EDM 基礎觀念
1. 寫一個 600px 寬的 table，設定 cellpadding='0'、cellspacing='0'、border='0'、置中對齊。裡面放一列一格，內容寫「歡迎訂閱電子報」。
EDM 基礎觀念
2. 寫一個 img 標籤，圖片網址為 https://via.placeholder.com/300x200，寬度 300px，替代文字為「夏季新品洋裝」，並消除圖片下方的多餘空白。
Table 排版
3. 用 table 做一個兩欄排版：左邊 300px 放「商品圖片區」，右邊 300px 放「商品資訊區」。整體寬 600px，cellpadding/cellspacing/border 都歸零。
Table 排版
4. 做一個巢狀 Table 結構：外層 table 寬 600px，包含兩列。第一列是標題列（背景色 #333333，白色文字「本週推薦」）。第二列裡面再放一個內層 table（寬 100%），內層有一列兩欄（各 50%），分別寫「商品 A」和「商品 B」。
Inline CSS
5. 寫一個 <h1> 標籤，用 inline CSS 設定：文字顏色 #ffffff、字體大小 28px、粗體、置中、無 margin。內容寫「雙十二狂歡節」。
Inline CSS
6. 做一個商品價格顯示：原價用 <p> 標籤（14px、#999999、刪除線），特價用另一個 <p> 標籤（24px、#e74c3c、粗體）。原價寫「NT$ 1,280」，特價寫「NT$ 640」。全部用 inline CSS。
按鈕製作
7. 用 table + td + a 做一個 Email 安全的按鈕：底色 #e74c3c、padding 15px 40px、文字白色 18px 粗體無底線，按鈕文字為「立即搶購」，連結到 https://shop.example.com。
Hero Banner
8. 做一個 Hero Banner：600px 寬的 table，背景色 #2c3e50，padding 40px，置中。包含主標題「年終感恩季」（白色、32px、粗體、無 margin）和副標「滿千折百 限時三天」（#bdc3c7、16px、無 margin）。
商品卡片
9. 做一個左圖右文的商品卡片：table 寬 600px，左邊 td 寬 220px 放一張圖（src='https://via.placeholder.com/200x200'、寬 200、alt='棉質帽T'、display:block），右邊 td 靠上對齊、padding 15px，放商品名「棉質帽T」（18px、#333、粗體）和價格「NT$ 790」（22px、#e74c3c、粗體）。
Footer
10. 做一個 EDM Footer：600px 寬 table，背景色 #f5f5f5，上方 border-top 1px solid #e0e0e0，padding 20px，置中。包含公司名「ABC 購物」和電話「02-8888-9999」（12px、#999999），以及一個「取消訂閱」連結（11px、#999999、有底線）。
跨平台相容
11. 以下圖片標籤在 Email 中有三個問題，請修復：<img src="product.jpg" />。要求：寬度 250px、替代文字「限量聯名球鞋 NT$3,990」、消除底部空白。
跨平台相容
12. 以下按鈕用了 <button> 元素，在 Email 裡不可靠。請用 table+td+a 重寫：底色 #27ae60、padding 12px 35px、文字白色 16px 無底線，文字為「加入購物車」，連結到 #。
完整 EDM
13. 做一個簡易的促銷 EDM 骨架：600px 寬 table，包含三列：(1) Header 列：背景白色、padding 15px、粗體文字「MOMO 商城」。(2) Hero 列：背景色 #e74c3c、padding 30px、置中白色大標題「週年慶」。(3) Footer 列：背景 #f5f5f5、padding 15px、置中顯示「取消訂閱」連結（12px、#999）。
完整 EDM
14. 做一個 2x1 的商品展示區：table 寬 100%，一列兩格（各 50%），每格置中、padding 10px、靠上對齊。左邊放圖片（src='https://via.placeholder.com/180x180'、寬 180、alt='保溫瓶'、display:block、margin:0 auto）和品名「不鏽鋼保溫瓶」（16px、#333）。右邊放圖片（同域名但 text=杯子、alt='馬克杯'）和品名「陶瓷馬克杯」。
綜合應用
15. 修復以下有問題的 EDM 片段，改成 Email 安全的寫法： <div style="display:flex; max-width:600px; margin:0 auto;"> <div style="flex:1;"><img src="a.jpg" /><p class="price">NT$599</p></div> <div style="flex:1;"><img src="b.jpg" /><p class="price">NT$899</p></div> </div> 要求：改用 table layout（寬 600px、置中、歸零）、img 加上 width='200'、alt 和 display:block、p 用 inline CSS（18px、#e74c3c、粗體）取代 class。
確認作答完畢後，點擊交卷