Div 區塊式HTML中最最最最最常也是一定會用到的

Div 簡單來講就是一個區域。

假設我們的整個視窗是一塊土地，那 Div 就是在畫分這塊土地。
像我們現在的畫面中，iT邦幫忙上方藍色的這一整條就是一個區域(Div)
基本上你看到的畫面中，只要有一塊一塊的地方，
那基本上就可以把它那一塊一塊的地方都視為不同的區域(Div)

那一個 Div 的寫法如下

<div>
     <h2>我是區域</h2>
</div>

就可以看到他在網頁上就會呈現

那如果想要在同一個區塊裡再出現兩個區塊該怎麼做呢??

很簡單，只要在一個區塊裡再塞兩個div就可以啦

    <div class="banner1">
        <h2>我是土地</h2>
        <div class="banner">
            <h2>我是區域1</h2>
        </div>
        <div class="banner2">
            <h2>我是區域2</h2>
        </div>
    </div>

他就會長這樣

是不是覺得很好玩呢??沒錯，寫網頁的好處就是可以立刻看到成果，
非常的有成就感呢!!

但你一定覺得很奇怪，啊我複製程式碼貼上後怎麼長的超奇怪
沒錯，光是靠上面的程式是沒辦法呈現上面那張圖的，
這時候就要使用CSS來幫我們的區塊去做設定以及美化，
但因為今天講的是區塊，所以我先附上CSS的語法(大家只需要先將以下程式複製貼上即可)，目的是先讓大家能夠先做出一個非常簡單的小實作

<style>
    .banner1{
        width: 300px;
        height: 200px;
        border: 2px solid #000;
    }
    .banner{
        display: inline-block;
        background-color: rgb(158, 255, 2);
        width: 100px;
        height: 100px;
    }
    .banner1 h2{
        font-size: 20px;
    }
    .banner2{
        display: inline-block;
        background-color: rgb(158, 255, 2);
        width: 100px;
        height: 100px;
    }
</style>

剩下的我明天再來解釋 如何使用CSS

我們明天鐵人賽Day4見囉!!