div+css布局

標籤：網頁布局

650) this.width=650;" style="float:none;" title="01.jpg" src="http://s3.51cto.com/wyfs02/M02/49/E9/wKiom1QfWCPiewdwAACZ5C88nBc896.jpg" width="319" height="365" alt="wKiom1QfWCPiewdwAACZ5C88nBc896.jpg" />650) this.width=650;" style="width:351px;height:363px;" title="02.jpg" src="http://s3.51cto.com/wyfs02/M00/49/EB/wKioL1QfWELTKiC4AABz4Am27vE324.jpg" width="368" height="359" alt="wKioL1QfWELTKiC4AABz4Am27vE324.jpg" />

製做網頁先從布局開始，將一個網頁分成四塊，用div畫塊布局，塊畫好了，開啟是一片空白的，div只是將網頁分塊，但要顯示塊的大小顏色，我們就需要用CSS來控制，以下將div設定為寬為300px，高為200px，背景色為藍色，出來的效果如下：

 

650) this.width=650;" title="03.jpg" src="http://s3.51cto.com/wyfs02/M01/49/EB/wKioL1QfW4PBKu8mAAGyWG4uzOQ693.jpg" width="599" height="388" alt="wKioL1QfW4PBKu8mAAGyWG4uzOQ693.jpg" />

 

    那麼為什麼是這顯示的是一大塊呢，因為呢，我將背景色都設定為一樣的了，那麼不想將這四塊連在一塊呢，那麼我們就將以下四塊div分別用一個名字命名，再根據名字我們再用css來改變四個div的背景。

 

650) this.width=650;" style="width:629px;height:348px;" title="04.jpg" src="http://s3.51cto.com/wyfs02/M01/49/E9/wKiom1QfXr2y2zs1AAI41hgakXE152.jpg" width="625" height="311" alt="wKiom1QfXr2y2zs1AAI41hgakXE152.jpg" />

 

那麼從上面可以看出四塊已經分別用藍色，綠色，紅色和灰色區分出來了，可以看出並不是一塊了吧，那麼為什麼第一塊div還是藍色的呢，這是因為css裡面第一個div樣式將所以的body裡的div設定了藍色，我們之後將二、三、四塊，這三塊特意用了其他三種顏色，但第一塊我們並沒有特意去設定顏色，所以第一塊還是藍色的，四塊分出來了，但是這四塊和我們要的效果並不一樣就這麼一點寬並沒有充滿整個頁面，我們之前將div設定了寬300px，那我們就將“width:300px;”刪除，我們來看下效果：

 

650) this.width=650;" style="width:715px;height:342px;" title="05.jpg" src="http://s3.51cto.com/wyfs02/M02/49/E9/wKiom1QfYaGCqon0AAIrj-guitU492.jpg" width="476" height="291" alt="wKiom1QfYaGCqon0AAIrj-guitU492.jpg" />

 

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

本文出自 “別鬧好好的” 部落格，謝絕轉載！

div+css布局