網頁

▼

2019/7/27

HTML 練習 多層<div>區塊

請建立一份HTML文件，檔名為division.html。請用VS Code編輯。

請對以下內容進行修改。
第一層區塊底色改為紅色(red)；
第二層區塊底色改為橘色(orange)；
第三層區塊底色改為黃色(yellow)。

每個區塊元素都加上內邊距20像素(padding:20px;)的效果。

division.html

<!DOCTYPE html>
<html>
<head>
    <style>
    </style>
</head>
<body>

    <div>區塊第一層
        <div>區塊第二層
            <div>區塊第三層</div>
        </div>
    </div>

</body>

</html>

在Chrome瀏覽器開啟效果如下。



提示：
使用行內樣式(Inline style)設定區塊顏色；
使用內部樣式(Internal style)及type selector設定區塊內邊距大小。


解答：

division.html

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            padding:20px;
        }    
    </style>
</head>
<body>

    <div style="background-color:red;">區塊第一層
        <div style="background-color: orange;">區塊第二層
            <div style="background-color: yellow;">區塊第三層</div>
        </div>
    </div>

</body>

</html>

沒有留言:

張貼留言