在瀏覽網(wǎng)頁時，我們經(jīng)常會被整齊劃一的圖片布局所吸引。然而，實現(xiàn)這樣的布局需要一些技巧，其中使用div是一種非常有效的方法。本文將通過介紹一個具體的制作過程來幫助您掌握這種技巧。啟動Dreamweave

在瀏覽網(wǎng)頁時，我們經(jīng)常會被整齊劃一的圖片布局所吸引。然而，實現(xiàn)這樣的布局需要一些技巧，其中使用div是一種非常有效的方法。本文將通過介紹一個具體的制作過程來幫助您掌握這種技巧。

啟動Dreamweaver CS5

首先，打開Dreamweaver CS5，創(chuàng)建一個新的HTML文件并進入主界面。在lt;titlegt;無標題文檔lt;/titlegt;標簽中修改名稱為lt;titlegt;div布局圖片效果lt;/titlegt;。

設置整體樣式

接下來，在lt;stylegt;標簽中添加有關的CSS代碼來定義整個網(wǎng)頁的樣式。樣式的正確使用對于頁面的美觀程度至關重要。

創(chuàng)建外部框架

在lt;bodygt;標簽中，輸入三個div標簽，并分別給它們設置類。其中最外層div的類為“db”，而中間兩個div則分別為“zpxc1”和“zpxc”。此時，您可以看到基本的框架效果。

設計圖片布局

在成功設計好外部框架之后，接著就要開始設計使用div布局圖片了。設計過程中，需要書寫相應的代碼，并設置div的尺寸大小和相關屬性，同時還需要為圖片設置相關屬性。

以下是代碼示例：

img{

margin:0px;

height:220px;

width:120px;

margin-top:10px;

border:1px solid 333;

}

{

float:left;

height:240px;

width:140px;

margin:6px;

padding:0px;

margin-top:10px;

filter:light;

background:333;

margin-left:0.8em;

}

.pic{

float:right;

}

在類為“zpxc1”的div中，您可以創(chuàng)建四個新的div，并設置它們的img src屬性值，以便正確地鏈接圖片。

預覽效果并進行修改

按下F12鍵可以在瀏覽器中進行預覽效果。如果出現(xiàn)“是否將改動保存到”提示信息，請直接點擊“是”，然后找到一個合適的位置進行保存。

接下來，在類為“zpxc”的div中輸入“作品展示”四個字，再次查看效果。如果不滿意，可以進行修改。如果圖片過多，可以反復修改類“zpxc1”和“db”的高度，直到達到理想效果。不斷重復以上步驟，可以建立多個圖片div。

最后，如果對“作品展示”四個字不滿意，可以使用圖片進行替換，并反復測試網(wǎng)頁效果并進行修改。完成后，按下F12鍵進行預覽，并執(zhí)行“文件-另存為”命令，在彈出的對話框中輸入名稱“div布局圖片”，找到一個合適的位置進行保存即可。

總結(jié)

通過本文的介紹，您已經(jīng)學習了如何使用div實現(xiàn)網(wǎng)頁圖片布局效果。只要您掌握了這些技巧，就可以輕松設計出美觀整潔的網(wǎng)頁。