網頁

▼

2019/7/26

HTML <div> 區塊元素 Division element 簡介

在HTML網頁可使用區塊元素(Division element)<div>來定義區塊。

<div>元素本身並無特殊意義，也不帶特殊的樣式效果，其用途是把網頁中的內容畫分成不同區塊。<div>最常做為容器來包裹其他的HTML元素，然後搭配CSS樣式表為每個區塊提供所需的樣式效果。


先來看看<div>的原始效果。

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

    <div>ABC</div>

</body>
</html>

在瀏覽器開啟畫面如下



使用Chrome開發人員工具觀察，可以看到<div>的原始樣式如下，只有display:block區塊樣式而以。

div {
    display: block;
}


下面的HTML文件中，使用<div>將兩個標題(<h1>)及所屬的段落分為兩個區塊。然後每個區塊中的段落(<p>)再用<div>包裹為一個區塊。

如此在網頁排版或樣式調整時，就能直接操作<div>對不同區塊進行修改，而不用修改特定HTML標籤原有的CSS。

division.html

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

    <div>
        <h1>區塊一標題</h1>
        <div>
            <p>區塊一段落文字</p>
        </div>
    </div>

    <div>
        <h1>區塊二標題</h1>
        <div>
            <p>區塊二段落文字</p>
        </div>
    </div>

</body>
</html>

顯示效果如下。由於<div>本身不帶樣式，且這邊也沒加上額外的CSS樣式，因此顯示結果與沒有使用<div>包裹時相同。




接著幫外層的<div>加上不同的底色。這邊使用CSS selectors（CSS選擇器）的ID selector（ID選擇器）修改最外兩個<div>的底色。

第一個<div>，也就是id屬性標為first的底色改成黃色(yellow)；
第二個<div>，也就是id屬性標為second的底色改成橘色(orange)。

division.html

<!DOCTYPE html>
<html>
<head>
    <style>
        #first {
            background-color: yellow;
        }    
        #second {
            background-color: orange;
        }
    </style>
</head>
<body>

    <div id="first">
        <h1>區塊一標題</h1>
        <div>
            <p>區塊一段落文字</p>
        </div>
    </div>

    <div id="second">
        <h1>區塊二標題</h1>
        <div>
            <p>區塊二段落文字</p>
        </div>
    </div>

</body>
</html>

顯示效果如下。



從以上的簡單範例可以得知，<div>適合用來對HTML文件中多個元素組成的區塊進行CSS的套用。


參考：

沒有留言:

張貼留言