請建立一份HTML文件,檔名為orderlist.html
。請用VS Code編輯。
orderlist.html
內容如下。
orderlist.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div>
<h2 id="shopping-list">我的購物清單</h2>
<table>
<thead>
<tr>
<th>項目</th>
<th>品號</th>
<th>品名</th>
<th>數量</th>
<th>單價(元)</th>
<th>總價(元)</th>
</tr>
</thead>
<tbody>
<tr>
<td class="list-no">1</td>
<td class="item-no">2018073001</td>
<td class="item-desc">【chicco】Next2Me Dream移動舒適床邊床-巴黎棕</td>
<td class="item-qty">1</td>
<td class="unit-price">5490</td>
<td class="subtotal-price">5490</td>
</tr>
<tr>
<td class="list-no">2</td>
<td class="item-no">2018061090</td>
<td class="item-desc">福義軒 手工芝麻蛋捲 (500克家庭號包裝)</td>
<td class="item-qty">2</td>
<td class="unit-price">285</td>
<td class="subtotal-price">570</td>
</tr>
<tr>
<td class="list-no">3</td>
<td class="item-no">2017120301</td>
<td class="item-desc">Adidas輕量波紋瑜珈墊 - 8mm</td>
<td class="item-qty">1</td>
<td class="unit-price">1680</td>
<td class="subtotal-price">1680</td>
</tr>
<tr>
<td colspan="5">總計</td>
<td class="total-price">7170</td>
</tr>
</tbody>
</table>
</div>
<div>
<h2 id="shipping-time">出貨時間</h2>
<p>20180731 上午11:00</p>
</div>
</body>
</html>
請在External style sheet使用Class selectors來套用CSS樣式,需在瀏覽器顯示如下結果。
第一個標頭底色為金色(gold
)
表格的標頭底色為橘色(orange
);表格一般列的底色為淡紫色(#ccceee
);表格品名文字顏色為藍色(blue
)。
總計金額數字字體大小為24px
第二個標頭底色為黃綠色(greenyellow
)
提示:請觀察每個HTML元素的id
與class
,並搭配Type selector,ID selectors與Class selectors來完成以上結果。
沒有留言:
張貼留言