區塊容器 <div>

By /

HTML 裡的 <div> 就是是我們常用的 [區塊容器], 只要任何需要排版的內容, 可能都會透過 <div> 搭配 css 或是 javascript 來進行所需要編排.

認識 <div>

我們可以將 <div> 視為一個容器, 可以用來包裹文字, 影音資源, 表格, 清單...等任何網頁元素, 再透過 css 我們就可以進行很多格式的調整, 好比說更換背景顏色. 另外透過 js 我們也可以讓這個 div 與使用者的行為進行連動.

<!-- 試試我們的 sampe code -->
<div>山中相送罷，日暮掩柴扉。</div>
<div>春草明年綠，王孫歸不歸。</div>

實際呈現效果

山中相送罷，日暮掩柴扉。
春草明年綠，王孫歸不歸。

<div> 一支援屬性的設定

<!-- 試試我們的 sampe code -->
<div style="color:red;">千山鳥飛絕, 萬徑人蹤滅。</div>
<div style="color:blue;">孤舟蓑笠翁, 獨釣寒江雪。</div>
千山鳥飛絕, 萬徑人蹤滅。
孤舟蓑笠翁, 獨釣寒江雪。

除了上面所提到的屬性之外, 還可以自己去動手試試看別的喔!

ref: https://steam.oxxostudio.tw/category/html/info/attributes.html

Sample code

透過結構化的語法分割出不同功能區塊的範例

<!DOCTYPE html>
<html lang="zh-Hant-Tw">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>卡蹓馬祖</title>    
</head>
<body>
<header> <!--頁首內容-->
    <h1>跟我一起卡蹓馬祖</h1>
    <p>看海潮、看山、看書、吹風、喝咖啡，別忘了發呆</p>
</header>
<nav> <!--導覽列-->
    <a href="#">首頁</a>｜
    <a href="#">馬祖景點</a>｜
    <a href="#">馬祖建築</a>｜
    <a href="#">馬祖美食</a>
</nav>
  <main> <!--主要內容-->
    <article> <!--文章內容-->
        <h2>讓人想一去再去的馬祖</h2>
        <p>對於我這個沒有經過戰亂、沒有風雨的六年級生來說，這片貧瘠的小島，似乎毫無吸引之處，只想找美食、找紀念品、找露天咖啡座………卻因朝陰夕暉的海洋氣候，一陣大雨滂沱之後，讓我看見這個小島的美！有時候，人類像洄游魚類一樣，在大海中闖蕩，最後卻拼命想游回出生地。對故鄉的情感，是一種無法解釋的鄉愁。我想，這是我父親為何在<strong>南竿</strong>蓋房子的原因吧？！</p>
        <aside> <!--側欄內容-->
          <p>你可能會感興趣的文章</p>  
          <ul>
              <li><a href="#">文章1</a></li>
              <li><a href="#">文章2</a></li>
          </ul>
        </aside>
        <section> <!--摘要內容-->
            <h3>牛角聚落</h3>
            <p>牛角聚落沿著港灣而築，是連江縣政府及文史工作者目前努力保留的文化遺跡...</p>
        </section>
        <section>
            <h3>八八坑道</h3>
            <p>八八坑道原來是戰備的坑道，因為竣工的那年適逢蔣公八十八歲誕辰，因此命名之...</p>
        </section>  
    </article>
</main>
<footer>  <!--頁尾內容-->
    Copyright © 王小桃
    <address>
      電話:0800-000-888<br>
      地址:OO市OO區OO街XX號X樓
    </address>
  </footer>
</body>
</html>

透過 css 將分割區塊美化後的結果

<!DOCTYPE html>
<html lang="zh-Hant-Tw">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>卡蹓馬祖</title>
    <style>
        header, footer, nav {
          text-align: center;
          padding: 10px; 
          margin: 10px;
        }
        header {
          background-color: #60c7f7;
        }
        nav {
          background-color: #a6d4fd;
          font-size: 14px;    
        }
        article {
          background-color: #cecfcf;
          padding: 10px; 
          margin: 10px;
        }
        section {
          width: 75%;
          background-color: #e4f3fe;
          padding: 10px; 
          margin: 10px;
        }
        aside {
          width: 15%;
          padding-left: 10px;
          margin-left: 10px;
          float: right;        
          background-color: #fcfbd7;
        }
        footer {
          background-color: #8b8c8c;
          font-size: 12pt;
        }
    </style>  
</head>
<body>
<header> <!--頁首內容-->
    <h1>跟我一起卡蹓馬祖</h1>
    <p>看海潮、看山、看書、吹風、喝咖啡，別忘了發呆。</p>
</header>
<nav> <!--導覽列-->
    <a href="#">首頁</a>｜
    <a href="#">馬祖景點</a>｜
    <a href="#">馬祖建築</a>｜
    <a href="#">馬祖美食</a>
</nav>
  <main> <!--主要內容-->
    <article> <!--文章內容-->
        <h2>讓人想一去再去的馬祖</h2>
        <p>對於我這個沒有經過戰亂、沒有風雨的六年級生來說，這片貧瘠的小島，似乎毫無吸引之處，只想找美食、找紀念品、找露天咖啡座………卻因朝陰夕暉的海洋氣候，一陣大雨滂沱之後，讓我看見這個小島的美！有時候，人類像洄游魚類一樣，在大海中闖蕩，最後卻拼命想游回出生地。對故鄉的情感，是一種無法解釋的鄉愁。我想，這是我父親為何在<strong>南竿</strong>蓋房子的原因吧？！</p>
        <aside> <!--側欄內容-->
          <p>你可能會感興趣的文章。</p>  
          <ul>
              <li><a href="#">文章1</a></li>
              <li><a href="#">文章2</a></li>
          </ul>
        </aside>
        <section> <!--摘要內容-->
            <h3>牛角聚落</h3>
            <p>牛角聚落沿著港灣而築，是連江縣政府及文史工作者目前努力保留的文化遺跡...</p>
        </section>
        <section>
            <h3>八八坑道</h3>
            <p>八八坑道原來是戰備的坑道，因為竣工的那年適逢蔣公八十八歲誕辰，因此命名之...</p>
        </section> 
    </article>
</main>
<footer>  <!--頁尾內容-->
  Copyright © 王小桃
  <address>
    電話:0800-000-888<br>
    地址:OO市OO區OO街XX號X樓
  </address>
</footer>
</body>
</html>

Ref: 以上範例來源: https://cf2.opentech.com.tw/mistake/Omy2420220818164036/範例檔案.zip
解壓密碼: 06503

Scroll to Top