img
HTML及CSS語法簡易教學
<img> 標記為圖片
src 圖檔所在的URL
width 設定寬度
height 設定高度
alt 設定圖片註解
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;"