代碼入門教程（15）

第 二 章 標 簽 應 用第十五節 移動圖片（7）

本節繼續學習移動圖片。下面講解圖片的兩種移動代碼。要深刻領會標籤中的內容，學會應用這些移動標籤。一、交替展示的圖片代碼：<table border="2" cellSpacing="25" cellPadding="0" width_="600"background="http://image9.360doc.com/DownloadImg/2010/05/0916/3145880_2.gif" align="center"><tbody><tr><td><table border="0" cellSpacing="10" borderColorLight="#6c3365"borderColorDark="#6c3365" cellPadding="0" background="http://image9.360doc.com/DownloadImg/2010/05/0916/3145880_3.jpg" bortercolor="#000000"><tbody><tr><td><table border="0" cellSpacing="0" background="http://image9.360doc.com/DownloadImg/2010/05/0916/3145880_4.jpg"><tbody><tr><td><div align="center"><table border="0" cellSpacing="20" background="http://userimage3.360doc.com/12/0930/21/4127803_201209302127430102.jpg"><tbody><tr><td><div align="center"><table border="0" cellPadding="0" width_="600" background="http://image9.360doc.com/DownloadImg/2010/05/0916/3145880_1.jpg"align="center" height="800"><tbody><tr><td><div><marquee height="800" width_="600" scrollAmount="4"><marquee direction="right" height="800" width_="600" scrollAmount="4"><img style="height: 800px; filter: fliph;" title="" alt="「春天沒來」歡迎您" src="http://image9.360doc.com/DownloadImg/2010/05/0916/3145880_1.jpg"width_="600" height="800"></marquee></marquee> </div></td></tr></tbody></table> </div></td></tr></tbody></table> </div></td></tr></tbody></table></td></tr></tbody></table> </td></tr></tbody></table>代碼解析：1、「交替展示的圖片」設置了一個五層表格，在第五層表格中，放置了一個背景圖片。第五層表格的單元格中，用兩個移動標籤控制一個圖片，第一個移動標籤移動方向「向左」，第二個移動標籤移動方向「向右」。背景圖片和單元格中的圖片，是同一地址的圖片（也就是同一個圖片），只不過在單元格的圖片標籤里，添加了一個左右翻轉（也叫水平翻轉）代碼（filter: fliph）罷了。2、我用五種不同的顏色標示各個表格的代碼，以便大家能夠分辨清楚各個表格。前面的四層表格中也有三處設置了背景圖片，其作用有兩點：（１）當設置了表格的cellSpacing（間距）屬性的時候，邊框會更加美麗；（２）是預防某個背景圖片失效的。怕背景圖片失效以後，邊框不夠美麗。「交替展示的圖片」顯示效果：展開的圖片自右向左逐漸消失，下層的圖片自右向左逐漸展開。兩個圖片如此不斷循環。

二、圖片圍繞圖片轉代碼：<center><div style="left: -20px; top: 0px; width: 620px; position: relative;" id="table1"class="divBorderStyleRelative"><table border="20" cellSpacing="0" borderColor="#990000" cellPadding="1"width_="620" bgColor="#00ff00" height="300"><tbody><tr><td><table border="0" cellSpacing="1" cellPadding="2" width_="610" bgColor="#228b22"><tbody><tr><td><table border="0" cellSpacing="1" cellPadding="2" width_="610" bgColor="#228b22" height="90"><tbody><tr><td><marquee scrollAmount="2"><img style="width: 50px; height: 50px;" src=http://userimage2.360doc.com/11/0613/16/4086709_201106131657330633.jpg"><img style="width: 50px; height: 50px;" src=http://userimage2.360doc.com/11/0613/16/4086709_201106131657330633.jpg><img style="width: 50px; height: 50px;" src="https://www.getit01.com/getimg_360.php?url=http://userimage2.360doc.com/11/0613/16/4086709_201106131657330633.jpg"><img style="width: 50px; height: 50px;" src="https://www.getit01.com/getimg_360.php?url=http://userimage2.360doc.com/11/0613/16/4086709_201106131657330633.jpg"><img style="width: 50px; height: 50px;" src="https://www.getit01.com/getimg_360.php?url=http://userimage2.360doc.com/11/0613/16/4086709_201106131657330633.jpg"><img style="width: 50px; height: 50px;" src=http://userimage2.360doc.com/11/0613/16/4086709_201106131657330633.jpg><img style="width: 50px; height: 50px;" src="https://www.getit01.com/getimg_360.php?url=http://userimage2.360doc.com/11/0613/16/4086709_201106131657330633.jpg"><img style="width: 50px; height: 50px;" src=http://userimage2.360doc.com/11/0613/16/4086709_201106131657330633.jpg><img style="width: 50px; height: 50px;" src="https://www.getit01.com/getimg_360.php?url=http://userimage2.360doc.com/11/0613/16/4086709_201106131657330633.jpg"><img style="width: 50px; height: 50px;" src="https://www.getit01.com/getimg_360.php?url=http://userimage2.360doc.com/11/0613/16/4086709_201106131657330633.jpg"><br><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://userimage2.360doc.com/11/0613/16/4086709_201106131657330633.jpg"><img style="width: 50px; height: 50px;" src=http://userimage2.360doc.com/11/0613/16/4086709_201106131657330633.jpg><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://userimage2.360doc.com/11/0613/16/4086709_201106131657330633.jpg"><img style="width: 50px; height: 50px;"src=http://userimage2.360doc.com/11/0613/16/4086709_201106131657330633.jpg><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://userimage2.360doc.com/11/0613/16/4086709_201106131657330633.jpg"><img style="width: 50px; height: 50px;"src=http://userimage2.360doc.com/11/0613/16/4086709_201106131657330633.jpg><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://userimage2.360doc.com/11/0613/16/4086709_201106131657330633.jpg"><img style="width: 50px; height: 50px;"src=http://userimage2.360doc.com/11/0613/16/4086709_201106131657330633.jpg><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://userimage2.360doc.com/11/0613/16/4086709_201106131657330633.jpg"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://userimage2.360doc.com/11/0613/16/4086709_201106131657330633.jpg"></marquee></td></tr></tbody></table></td></tr></tbody></table><table border="0" cellSpacing="1" cellPadding="2" width_="616"bgColor="#228b22"height="100"><tbody><tr><td width_="120"><marquee direction="up" height="180" width_="110" scrollAmount="2"><img style="width: 50px; height: 50px;"src=http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6><img style="width: 50px; height: 50px;"src=http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><br><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"></marquee></td><td width_="370"><table border="1"><tbody><tr><td><p align="center"><font style="font-size: 24px;" color="#ffff00"><strong>「春天沒來」歡迎您</strong></font><embed height="200"type="application/x-shockwave-flash" width_="350"src="https://www.getit01.com/getimg_360.php?url=http://tmflash.6000y.com/flashxuexi/QQ249181841-2013.swf&#10;"quality="high" menu="false" wmode="transparent"></p></td></tr></tbody></table><td width_="120"><marquee direction="down" height="180" width_="110"scrollAmount="2"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image20.360doc.com/DownloadImg/2010/12/1915/7786064_1.gif"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image20.360doc.com/DownloadImg/2010/12/1915/7786064_1.gif"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image20.360doc.com/DownloadImg/2010/12/1915/7786064_1.gif"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image20.360doc.com/DownloadImg/2010/12/1915/7786064_1.gif"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image20.360doc.com/DownloadImg/2010/12/1915/7786064_1.gif"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image20.360doc.com/DownloadImg/2010/12/1915/7786064_1.gif"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image20.360doc.com/DownloadImg/2010/12/1915/7786064_1.gif"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image20.360doc.com/DownloadImg/2010/12/1915/7786064_1.gif"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image20.360doc.com/DownloadImg/2010/12/1915/7786064_1.gif"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image20.360doc.com/DownloadImg/2010/12/1915/7786064_1.gif"><br><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image20.360doc.com/DownloadImg/2010/12/1915/7786064_1.gif"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image20.360doc.com/DownloadImg/2010/12/1915/7786064_1.gif"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image20.360doc.com/DownloadImg/2010/12/1915/7786064_1.gif"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image20.360doc.com/DownloadImg/2010/12/1915/7786064_1.gif"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image20.360doc.com/DownloadImg/2010/12/1915/7786064_1.gif"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image20.360doc.com/DownloadImg/2010/12/1915/7786064_1.gif"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image20.360doc.com/DownloadImg/2010/12/1915/7786064_1.gif"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image20.360doc.com/DownloadImg/2010/12/1915/7786064_1.gif"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image20.360doc.com/DownloadImg/2010/12/1915/7786064_1.gif"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image20.360doc.com/DownloadImg/2010/12/1915/7786064_1.gif"></marquee></td></tr></tbody></table><table border="0" cellSpacing="2" cellPadding="3" width_="616"bgColor="#228b22" height="90"><tbody><tr><td><marquee direction="right" scrollAmount="2"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image50.360doc.com/DownloadImg/2012/03/1806/22396772_4.jpg"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image50.360doc.com/DownloadImg/2012/03/1806/22396772_4.jpg"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image50.360doc.com/DownloadImg/2012/03/1806/22396772_4.jpg"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image50.360doc.com/DownloadImg/2012/03/1806/22396772_4.jpg"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image50.360doc.com/DownloadImg/2012/03/1806/22396772_4.jpg"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image50.360doc.com/DownloadImg/2012/03/1806/22396772_4.jpg"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image50.360doc.com/DownloadImg/2012/03/1806/22396772_4.jpg"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image50.360doc.com/DownloadImg/2012/03/1806/22396772_4.jpg"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image50.360doc.com/DownloadImg/2012/03/1806/22396772_4.jpg"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image50.360doc.com/DownloadImg/2012/03/1806/22396772_4.jpg"><br><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image50.360doc.com/DownloadImg/2012/03/1806/22396772_4.jpg"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image50.360doc.com/DownloadImg/2012/03/1806/22396772_4.jpg"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image50.360doc.com/DownloadImg/2012/03/1806/22396772_4.jpg"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image50.360doc.com/DownloadImg/2012/03/1806/22396772_4.jpg"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image50.360doc.com/DownloadImg/2012/03/1806/22396772_4.jpg"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image50.360doc.com/DownloadImg/2012/03/1806/22396772_4.jpg"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image50.360doc.com/DownloadImg/2012/03/1806/22396772_4.jpg"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image50.360doc.com/DownloadImg/2012/03/1806/22396772_4.jpg"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image50.360doc.com/DownloadImg/2012/03/1806/22396772_4.jpg"><img style="width: 50px; height: 50px;"src="https://www.getit01.com/getimg_360.php?url=http://image50.360doc.com/DownloadImg/2012/03/1806/22396772_4.jpg"></marquee></td></tr></tbody></table></td></tr></tbody></table></div></center>效果圖：http://www.360doc.com/content/12/0725/17/4127803_226425534.shtml代碼解析：1、「圖片圍繞圖片轉」在二重表格中放入了三個表格。2、第一個表格的單元格內放入了向左移動的20個小圖片，放入的小圖片分為兩行。3、第二個表格分為三個單元格。第一個單元格內放入了向上移動的20個小圖片，放入的小圖片分為兩列；第二個單元格內放入了一個表格。表格的單元格中輸入了一段文字：「"春天沒來』歡迎您」，並插入了一個動畫圖片；第三個單元格內放入了向下移動的20個小圖片，放入的小圖片分為兩列。4、第三個表格放入了向右移動的20個小圖片，放入的小圖片分為兩行。作業：1、應用上面的兩種代碼，各製作一篇文章。2、製作「交替展示的圖片」時，替換圖片以後，一定要把上面代碼中的「表格規格」、「背景圖片規格」都修改得和你選擇的圖片規格相一致，這樣製作出來的網頁比較美觀。3、「圖片圍繞圖片轉」中的小圖片，可以減少小圖片的個數，把小圖片的規格加大。可以應用已經學過的代碼知識，任意修改上面的代碼，以便發揮自己的創作能力。但是有一條原則，必須觀察顯示的實際效果，以效果好為標準。

２０1２年11月9日於北京

第 二 章標 簽 應 用第十六節 移動圖片（8）本節繼續學習圖片的移動。下面講解兩種「交替展示的圖片」代碼和「圖中圖 移動圖」代碼。要深刻領會標籤中的內容，學會應用這些移動標籤。一、交替展示的圖片：代碼1：<table border="2" cellSpacing="15" cellPadding="0" width_="600"background=http://image9.360doc.com/DownloadImg/2010/05/0916/3145880_2.gif"align="center"><tbody><tr><td><table border="0" cellSpacing="10"borderColorLight="#6c3365" borderColorDark="#6c3365" cellPadding="0" background=http://image9.360doc.com/DownloadImg/2010/05/0916/3145880_3.jpg bortercolor="#000000"><tbody><tr><td><table border="0" cellSpacing="0" background=http://image9.360doc.com/DownloadImg/2010/05/0916/3145880_4.jpg"><tbody><tr><td><table style="border: 1px double white; left: 0px;overflow: hidden;" cellSpacing="0" cellPadding="0"width_="479" height="270"><tbody><tr><td align="center"><table border="0" cellPadding="0" width_="600"background="http://image9.360doc.com/DownloadImg/2010/05/0916/3145880_1.jpg" align="center"height="800"><tbody><tr><td><marquee direction="right" height="800" width_="600" scrollAmount="4"><marquee height="800" width_="600" scrollAmount="4"><img style="height: 800px; filter: fliph;" title=""alt="「春天沒來」歡迎您" src=http://image9.360doc.com/DownloadImg/2010/05/0916/3145880_1.jpgwidth_="600" height="800"></marquee></marquee></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table>代碼解析：此代碼設置了一個五重表格。在第五層表格的表格標籤中設置了一個背景圖片；在單元格中放入了一個由兩個移動標籤控制的圖片，這個圖片是背景圖片的左右翻轉圖片。兩個移動標籤的移動方向，一個「向左」，另一個「向右」。顯示效果：背景圖片與單元格中的圖片交替展示。比較一下，此圖片與上一節的交替展示的圖片顯示效果有何不同？（提示：圖片的移動方向。）代碼2：<table border="0" cellPadding="0" width_="800"background=http://image16.360doc.com/DownloadImg/2010/10/2620/6309818_1.jpgheight="600"><tbody><tr><td><div><marquee direction="down" height="600" width_="800" scrollAmount="4"><marquee direction="up" height="600" width_="800"scrollAmount="4"><img style="height: 600px; filter: alpha WIDTH: 800px;" alt="春天沒來"src=http://image16.360doc.com/DownloadImg/2010/10/2620/6309818_4.jpgwidth_="800" height="600" ></marquee></marquee></div></td></tr></tbody></table>二、圖中圖 移動圖 代碼：<table style="width: 910px; height: 606px;" border="5" cellSpacing="0"borderColor="#990030" cellPadding="2"background="http://image35.360doc.com/DownloadImg/2011/09/0119/16863193_3.jpg"align="center"><tbody><tr><td><marquee style="width: 790px; height: 500px;" direction="up"behavior="alternate" scrollAmount="5"><marquee height="317" behavior="alternate" width_="790" scrollAmount="5"><img style="filter: alpha(opacity=100,style=2);"src="https://www.getit01.com/getimg_360.php?url=http://image32.360doc.com/DownloadImg/2011/07/1211/14116499_6" width_="250"></marquee></marquee></td></tr></tbody></table>代碼解析：1、此代碼設置一個表格，表格中放入一個背景圖片（表格的規格一定要和背景圖片的規格相同），單元格中放入一個圖片。2、背景圖片最好是規格大一些的風景圖片；3、第一個移動標籤，移動方向「向上」，移動方式「來回走」；4、第二個移動標籤，移動方向「向左」，移動方式「來回走」。第二個移動標籤的「移動屏幕寬度」可以和第一個移動標籤的移動屏幕寬度相同，移動高度，必須小於第一個移動標籤的移動屏幕高度。5、兩個移動標籤中的移動速度最好相同。6、表格的規格要比移動屏幕的規格大一些。作業：應用上面的兩種移動代碼，各製作一篇文章。代碼入門教程(1)代碼入門教程(2)代碼入門教程(3)代碼入門教程(4)代碼入門教程(5)代碼入門教程(6)代碼入門教程(7)代碼入門教程(8)代碼入門教程(9)代碼入門教程(10)代碼入門教程(11)代碼入門教程(12)代碼入門教程(13)代碼入門教程(14)

２０1２年11月9日於北京
推薦閱讀：