工作之余,看了高人的作品,很受啟發(fā),抽空嘗試一下做表格邊框及滾動(dòng)堆疊圖片的定位,供新手朋友欣賞,借鑒!
(后附代碼及注釋?zhuān)?div style="height:15px;">
原圖:
代碼:
<TABLE id=table1 title="" style="BORDER-RIGHT: #006600 5px ridge; BORDER-TOP: #006600 5px ridge; LEFT: 0px; BORDER-LEFT: #006600 5px ridge; BORDER-BOTTOM: #006600 5px ridge; POSITION: relative; TOP: 0px" borderColor=#003300 height=650 cellSpacing=0 cellPadding=0 width=890 background=http://image100.360doc.com/DownloadImg/2016/10/1819/82531457_3.jpg border=5>
<TBODY>
<TR>
<TD height=455>
<MARQUEE style="BORDER-RIGHT: #008080 3px ridge; BORDER-TOP: #008080 3px ridge; Z-INDEX: 70; LEFT: 30px; BORDER-LEFT: #008080 3px ridge; BORDER-BOTTOM: #008080 3px ridge; POSITION: absolute; TOP: 30px" scrollAmount=1 scrollDelay=50 direction=right behavior=alternate width=30 height=240>
代碼注釋
注:z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。
position 屬性規(guī)定元素的定位類(lèi)型。當(dāng)Position屬性值為absolute時(shí)
對(duì)象從文檔流中抽取出來(lái),原占有的位置被后面的對(duì)象頂替上來(lái)
Top的值表示對(duì)象上邊框與瀏覽器窗口頂部的距離
bottom 的值表示對(duì)象下邊框與瀏覽器窗口底部的距離
兩者同時(shí)存在時(shí),只有Top起作用;如果兩者都未指定,則其頂端將與原文檔流位置一致,即垂直保持位 置不變。
left的值表示對(duì)象左邊框與瀏覽器窗口左邊的距離
right的值表示對(duì)象右邊框與瀏覽器窗口右邊的距離
兩者同時(shí) 存在時(shí),只有l(wèi)eft起作用;如果兩者都未指定,則其左邊將與原文檔流位置一致,即水平保持位置不變。
在Position屬性值為absolute的同時(shí),如果有一級(jí)父對(duì)象(無(wú)論是父對(duì)象還 是祖父對(duì)象,或者再高的輩分,一樣)的Position屬性值為Relative時(shí),則上述的相對(duì)瀏覽器窗口定位將會(huì)變成相對(duì)父對(duì)象定位,這對(duì)精確定位是 很有幫助的。
<TABLE id=table2 style="BACKGROUND-POSITION: 200px 0px" height=240 width=5555 background=http://image100.360doc.com/DownloadImg/2016/10/1819/82531457_2.jpg border=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></MARQUEE>
<MARQUEE style="BORDER-RIGHT: #008080 3px ridge; BORDER-TOP: #008080 3px ridge; Z-INDEX: 60; LEFT: 75px; BORDER-LEFT: #008080 3px ridge; BORDER-BOTTOM: #008080 3px ridge; POSITION: absolute; TOP: 30px" scrollAmount=1 scrollDelay=50 direction=right behavior=alternate width=30 height=240>
<TABLE id=table2 style="BACKGROUND-POSITION: 160px 0px" height=240 width=5555 background=http://image100.360doc.com/DownloadImg/2016/10/1819/82531457_2.jpg border=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></MARQUEE>
<MARQUEE style="BORDER-RIGHT: #008080 3px ridge; BORDER-TOP: #008080 3px ridge; Z-INDEX: 50; LEFT: 120px; BORDER-LEFT: #008080 3px ridge; BORDER-BOTTOM: #008080 3px ridge; POSITION: absolute; TOP: 30px" scrollAmount=1 scrollDelay=50 direction=right behavior=alternate width=30 height=240>
代碼注釋 background-position 屬性設(shè)置背景圖像的起始位置。
這個(gè)屬性設(shè)置背景原圖像(由
background-image 定義)的位置,背景圖像如果要重復(fù),將從這一點(diǎn)開(kāi)始。
提示:您需要把 background-attachment 屬性設(shè)置為 "fixed",才能保證該屬性在 Firefox 和 Opera 中正常工作。
<TABLE id=table2 style="BACKGROUND-POSITION: 120px 0px" height=240 width=5555 background=http://image100.360doc.com/DownloadImg/2016/10/1819/82531457_2.jpg border=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></MARQUEE>
lute; TOP: 30px" scrollAmount=1 scrollDelay=50 direction=right behavior=alternate width=30 height=240>
<TABLE id=table2 style="BACKGROUND-POSITION: 80px 0px" height=240 width=5555 background=http://image100.360doc.com/DownloadImg/2016/10/1819/82531457_2.jpg border=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></MARQUEE>
<MARQUEE title="" style="BORDER-RIGHT: #008080 3px ridge; BORDER-TOP: #008080 3px ridge; Z-INDEX: 30; LEFT: 210px; BORDER-LEFT: #008080 3px ridge; BORDER-BOTTOM: #008080 3px ridge; POSITION: absolute; TOP: 30px" scrollAmount=1 scrollDelay=50 direction=right behavior=alternate width=450 height=240>
代碼注釋
<marquee 屬性=屬性值> 滾動(dòng)內(nèi)容 </marquee>
移動(dòng)速度指令是:scrollAmount=# #最小為1,速度為最慢;數(shù)字越大移動(dòng)的越快。
字符移動(dòng)每步的延時(shí):scrolldelay=# 屬性值為數(shù)字, #最小為1, 數(shù)值越大速度越大,反之亦然。
移動(dòng)方向指令是:direction=# up向上、down向下、left向左、right向右。
屬性值為scroll:文字單向移動(dòng),side:移動(dòng)到邊界停止,alternate:到邊界后反向移動(dòng);
align,對(duì)齊方式,其屬性值為center,left,right,top, middle, bottom,分別表示居中,左對(duì)齊, 右對(duì)齊,對(duì)齊上沿、中間、下沿;
bgcolor,移動(dòng)字符的背景色,屬性值為顏色代碼,可以是rrggbb 16 進(jìn)制數(shù)碼,r=red,g=green, b=blue,也就是色彩中的三原色,也可是預(yù)定義色彩;
loop,移動(dòng)字符的循環(huán)次數(shù),屬性值為數(shù)字,若未指定則循環(huán)不止(infinite);
width及height,文字高度和寬度,以象素為單位,屬性值為數(shù)字;
hspace字符左右留白長(zhǎng)度,屬性值為數(shù)字;
vspace字符上下留白長(zhǎng)度,屬性值為數(shù)字;
scrollamount字符的移動(dòng)速度,屬性值為數(shù)字,數(shù)值越大速度越大,反之亦然;
<TABLE id=table2 style="BACKGROUND-POSITION:70px 0px" height=240 width=6005 background=http://image100.360doc.com/DownloadImg/2016/10/1819/82531457_2.jpg border=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></MARQUEE>
<MARQUEE style="BORDER-RIGHT: #008080 3px ridge; BORDER-TOP: #008080 3px ridge; Z-INDEX: 20; LEFT: 675px; BORDER-LEFT: #008080 3px ridge; BORDER-BOTTOM: #008080 3px ridge; POSITION: absolute; TOP: 30px" scrollAmount=1 scrollDelay=50 direction=right behavior=alternate width=30 height=40>
<TABLE id=table2 style="BACKGROUND-POSITION: 580px 0px" height=240 width=5550 background=http://image100.360doc.com/DownloadImg/2016/10/1819/82531457_2.jpg border=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></MARQUEE>
<MARQUEE style="BORDER-RIGHT: #008080 3px ridge; BORDER-TOP: #008080 3px ridge; Z-INDEX: 10; LEFT: 720px; BORDER-LEFT: #008080 3px ridge; BORDER-BOTTOM: #008080 3px ridge; POSITION: absolute; TOP: 30px" scrollAmount=1 scrollDelay=50 direction=right behavior=alternate width=30 height=240>
<TABLE id=table2 style="BACKGROUND-POSITION: 540px 0px" height=240 width=5550 background=http://image100.360doc.com/DownloadImg/2016/10/1819/82531457_2.jpg border=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></MARQUEE>
<MARQUEE style="BORDER-RIGHT: #008080 3px ridge; BORDER-TOP: #008080 3px ridge; Z-INDEX: 5; LEFT: 765px; BORDER-LEFT: #008080 3px ridge; BORDER-BOTTOM: #008080 3px ridge; POSITION: absolute; TOP: 30px" scrollAmount=1 scrollDelay=50 direction=right behavior=alternate width=30 height=240>
<TABLE id=table2 style="BACKGROUND-POSITION: 500px 0px" height=240 width=5550 background=http://image100.360doc.com/DownloadImg/2016/10/1819/82531457_2.jpg border=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></MARQUEE>
<MARQUEE title="" style="BORDER-RIGHT: #008080 3px ridge; BORDER-TOP: #008080 3px ridge; Z-INDEX: 2; LEFT: 810px; BORDER-LEFT: #008080 3px ridge; BORDER-BOTTOM: #008080 3px ridge; POSITION: absolute; TOP: 30px" scrollAmount=1 scrollDelay=50 direction=right behavior=alternate width=30 height=240>
<TABLE id=table2 style="BACKGROUND-POSITION: 460px 0px" height=240 width=5550 background=http://image100.360doc.com/DownloadImg/2016/10/1819/82531457_2.jpg border=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></MARQUEE></TD></TR>
<TR>
<TD height=110><EMBED style="Z-INDEX: 100; LEFT: 700px; WIDTH: 130px; POSITION: absolute; TOP: 500px; HEIGHT: 110px" pluginspage=http://www.macromedia.com/go/getflashplayer src=http://webftp.bbs.hnol.net/dysr/070330/ssplayer.swf type=application/x-shockwave-flash wmode="transparent" invokeurls="false" quality="High" allowScriptAccess="never" allowNetworking="internal"></TD></TR></TBODY></TABLE><BR>