div+css佈局

製作網頁先從佈局開始，將一個網頁分紅四塊，用div畫塊佈局，塊畫好了，打開是一片空白的，div只是將網頁分塊，但要顯示塊的大小顏色，咱們就須要用CSS來控制，如下將div設置爲寬爲300px，高爲200px，背景色爲藍色，出來的效果以下：

 

 

    那麼爲何是這顯示的是一大塊呢，由於呢，我將背景色都設置爲同樣的了，那麼不想將這四塊連在一塊呢，那麼咱們就將如下四塊div分別用一個名字命名，再根據名字咱們再用css來改變四個div的背景。

 

 

那麼從上面能夠看出四塊已經分別用藍色，綠色，紅色和灰色區分出來了，能夠看出並非一塊了吧，那麼爲何第一塊div仍是藍色的呢，這是由於css裏面第一個div樣式將因此的body裏的div設置了藍色，咱們以後將2、3、四塊，這三塊特地用了其餘三種顏色，但第一塊咱們並無特地去設定顏色，因此第一塊仍是藍色的，四塊分出來了，可是這四塊和咱們要的效果並不同就這麼一點寬並無充滿整個頁面，咱們以前將div設置了寬300px，那咱們就將「width:300px;」刪除，咱們來看下效果：

 

 

如今呢四塊寬度已經充滿整個頁面。這個呢就實現了最簡單的一個佈局。