img

HTML及CSS語法簡易教學

    1. <img> 標記為圖片

    2. src 圖檔所在的URL

    3. width 設定寬度

    4. height 設定高度

    5. alt 設定圖片註解

    6. border 設定圖片的外框

參考資料來源:http://www.pcnet.idv.tw/pcnet/html/10.htm

圖片分割

<!doctype html > <html><head> <title> new document </title> <script type="text/javascript"> Book_Image_Sources = new Array( "width:280px; height:381px; background:url(http://img.my.csdn.net/uploads/201205/08/1336442293_9753.gif)","#", "width:280px; height:381px; background:url(http://img.my.csdn.net/uploads/201205/08/1336442293_9753.gif) 0 -381px;","#", "width:280px; height:381px; background:url(http://img.my.csdn.net/uploads/201205/08/1336442293_9753.gif) 0 -762px;","#"

// width:分割後單張圖片的寬度;height:分割後單張圖片的高度;background:url(圖片位置) 橫向啟始位置 縱向啟始位置(負值); "#" // 分割的第一張,可以不設橫向和縱向啟始位置

// 注意最後一個 "#" 後面不要加入「,」

); window.onload = function(){ var d = document.getElementsByTagName("div"); for(var i = 0; i < d.length; i++){ d[i].style.cssText = Book_Image_Sources[i*2]; } }; </script> </head> <body> <div></div> <div></div> <div></div> </body> </html>

插入多張圖片在IE下產生空隙

在html插入圖片的時間,在<img>中加入以下參數,可以解決

style="display: block; vertical-align: bottom; margin-bottom: -5px;"