如何在 HTML DIV 區塊內插入圖片 - 網頁設計教學站

如何在 HTML DIV 區塊內插入圖片

HTML DIV 區塊本身是一個容器的概念,除了可以在 DIV 內放置文字、表格這些網頁元素之外,放圖片也是非常普遍的做法,利用 DIV 區塊內插入圖片的優點除了可以替圖片本身增加更多 CSS 的效果之外,還可以用來做整個網頁的圖片排版,本篇著重於在 HTML DIV 區塊內插入圖片,範例中會提供幾個不同的樣式效果,讓各位看得更清楚些。

HTML DIV 區塊內插入圖片語法
<div style=""><img src="圖片網址"></div>
其實要在 HTML 的 DIV 區塊內插入圖片就像上述的語法那樣簡單,在整個 DIV 區塊內直接使用 HTML 的 <img> 標籤就能輕鬆將圖片插入 DIV 區塊裡,而且不限插入的數量,換句話說,你可以在一個 HTML DIV 區塊內放置一個以上的圖片,而且還可以套用不同的 CSS 樣式創造更豐富的呈現效果,接著我們來看幾個簡單的範例。

HTML DIV 區塊內插入圖片範例
<div style="border:2px red solid;"><img src="範例圖片網址"></div>
<div style="border:2px green solid;padding:5px;text-align:center;"><img src="範例圖片網址"></div>
<div style="border:2px orange dashed;text-align:right;"><img src="範例圖片網址"></div>
範例的輸出結果
範例中我們總共準備了三個不同的 DIV 區塊,每個區塊內都有放置一張範例圖片,然後利用不同的 CSS 語法創造出不同的樣式效果,最上面的一個 DIV 區塊,我們使用了粗體的紅色邊框,接著中間的綠色邊框 DIV 區塊,除了把邊框顏色改成綠色的之外,還套用的內距 padding 屬性,讓邊框與範例圖片之間有一個距離出現,同時加入了 text-align 屬性讓圖片置中,最後一個橘色虛線的 DIV 區塊則套用了 text-align:right 的屬性效果,讓範例圖片靠右邊對齊,CSS 好玩又有趣的地方就在這裡,在傳統的 HTML 設計手法中,要創造出這些效果也是可以,不過語法會比較麻煩,寫起來比較花時間,而且維護或修改上都沒有 CSS 來得便利,今天我們介紹的在 HTML DIV 區塊內插入圖片的技巧,各位可以自己嘗試練習看看。

延伸閱讀
© Copyright webtech.tw Since 2010