網頁

▼

2019/7/30

CSS 練習 Simple selectors 綜合練習

請建立一份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來完成以上結果。


解答：

style.css

table, th, td {
    border: solid 1px;
}

th {
    background-color: orange;
}

td {
    background-color: #ccceee;
}

#shopping-list {
    background-color: gold;
}

#shipping-time {
    background-color: greenyellow;
}

.item-desc {
    color: blue;
}

.total-price {
    font-size: 24px;
}

沒有留言:

張貼留言