<div style="POSITION: relative; WIDTH: 712px; TOP: 0px; LEFT: 0px" id="table1"><img style="BORDER-BOTTOM: darkgoldenrod 6px double; BORDER-LEFT: darkgoldenrod 6px double; BORDER-TOP: darkgoldenrod 6px double; BORDER-RIGHT: darkgoldenrod 6px double" src="http://album.udn.com/community/img/PSN_PHOTO/jeffrey8879/f_2626409_1.jpg" /><div style="Z-INDEX: 1; POSITION: absolute; WIDTH: 150px; HEIGHT: 134px; TOP: 40px; LEFT: 100px" id="item1"><img src="http://album.udn.com/community/img/PSN_PHOTO/jeffrey8879/f_2651551_1.gif" /></div><div style="Z-INDEX: 2; POSITION: absolute; WIDTH: 130px; HEIGHT: 80px; TOP: 80px; LEFT: 480px" id="item2"><img src="http://album.udn.com/community/img/PSN_PHOTO/jeffrey8879/f_2522468_1.gif" width="130" height="80" /></div><div style="Z-INDEX: 3; POSITION: absolute; WIDTH: 700px; HEIGHT: 169px; TOP: 350px; LEFT: 6px" id="item3"><marquee style="WIDTH: 700px; HEIGHT: 169px" direction="right" scrollamount="3"><img src="http://album.udn.com/community/img/PSN_PHOTO/jeffrey8879/f_2513943_1.gif" width="331" height="169" /></marquee></div><div style="Z-INDEX: 4; POSITION: absolute; WIDTH: 180px; HEIGHT: 180px; TOP: 345px; LEFT: 450px" id="item4"><img src="https://city.udn.com/community/img/city/13747/CITY_PHOTO/NORMAL/f_391821_1.jpg" width="180" height="180" /></div><div style="Z-INDEX: 2; POSITION: absolute; WIDTH: 300px; HEIGHT: 377px; TOP: 110px; LEFT: 200px" id="item5"><img src="https://city.udn.com/community/img/city/13747/CITY_PHOTO/NORMAL/f_368577_1.png" /></div></div>
1. 應用 絕對位置語法 鎖定整ㄍ區域
2. 應用 相對位置語法 滴圖層覆蓋效果 安置每張圖片區塊
3. 頭尾紅字 為 絕對位置語法
4. 相對位置語法
<div style="Z-INDEX: 圖層編號; POSITION: absolute; WIDTH: 圖寬尺寸px; HEIGHT: 圖高尺寸px; TOP: 距頂尺寸px; LEFT: 距左尺寸px" id="自定編號">..........</div>
圖層編號大滴 可以 覆蓋 圖層編號小滴
5. 滾動語法
<marquee style="WIDTH: 移動寬度px; HEIGHT: 高度px" direction="移動方向" scrollamount="速度">.........</marquee>
本文於 修改第 2 次