铁人赛 Day3 -- Div区块到底是什麽 ? 能吃吗 ?

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见罗!!