代碼入門教程（30）
第四章 代碼實習園地
第三節 精美網頁欣賞（1）
在我們的圖書館中，有許許多多精美漂亮的網頁。欣賞這些精美網頁，研究這些精美網頁的結構，學習這些精美網頁的製作方法，無疑是我們學習代碼的一種好方法。它一定能夠為您製作網頁起到極大的幫助作用。本章為您提供了一些精美的網頁代碼，並附有我對網頁代碼的粗略分析，旨在使您進一步熟悉代碼，進一步熟悉分析網頁代碼結構的方法，掌握更多的製作網頁的方法，使您能夠儘快地製作出更多更好的漂亮網頁來。代碼：<marquee height="100" width_="100" scrollAmount="2"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"></marquee><marquee height="100" width_="100" scrollAmount="2"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"></marquee><marquee height="100" width_="100" scrollAmount="2"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"></marquee><marquee height="100" width_="100" scrollAmount="2"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"></marquee><marquee height="100" width_="100" scrollAmount="2"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"></marquee><marquee height="100" width_="100" scrollAmount="2"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"></marquee>代碼解析：橫排版單圖移動，很簡單的移動方式，卻具有不錯的效果。設置相同的移動標籤，移動方向設置為向左或者向右，每個移動標籤控制一個圖片。各圖片寬度之和不要超過700px。橫排版單圖移動代碼，適合製作小模塊。代碼：<table title="「春天沒來」的圖書館" border="0" width_="769"background="http://image41.360doc.com/DownloadImg/2011/11/0219/18959862_14" align="center" height="994"><tbody><tr><td colSpan="3"><marquee direction="左" height="100"scrollAmount="3"><img style="width: 120px; height: 100px;"src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/10/2013/27655431_12.jpg"><img style="width: 120px; height: 100px;"src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/10/2013/27655431_12.jpg"><img style="width: 120px; height: 100px;"src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/10/2013/27655431_12.jpg"></marquee></td></tr><tr><td><embed height="300" type="application/x-shockwave-flash"width_="250" src="https://www.getit01.com/getimg_360.php?url=http://www.zxtx.org/user/yiyi/html/flash/100.swf"allowScriptAccess="never" allowNetworking="internal"wmode="transparent" invokeURLs="false" quality="high"menu="false"></td><td><embed height="300" type="application/x-shockwave-flash"width_="250" src="https://www.getit01.com/getimg_360.php?url=http://www.zxtx.org/user/yiyi/html/flash/100.swf"allowScriptAccess="never" allowNetworking="internal"wmode="transparent" invokeURLs="false" quality="high"menu="false"></td><td><embed height="300" type="application/x-shockwave-flash"width_="250" src="https://www.getit01.com/getimg_360.php?url=http://www.zxtx.org/user/yiyi/html/flash/100.swf"allowScriptAccess="never" allowNetworking="internal"wmode="transparent" invokeURLs="false" quality="high"menu="false"></td></tr><tr><td colSpan="3"><marquee behavior="alternate" scrollAmount="1"scrollDelay="50"><embed height="300" type="application/x-shockwave-flash"width_="500" src="https://www.getit01.com/getimg_360.php?url=http://www.zxtx.org/user/yiyi/html/flash/009.swf "allowScriptAccess="never" allowNetworking="internal"wmode="transparent" invokeURLs="false" quality="high"menu="false"><embed height="300" type="application/x-shockwave-flash" width_="500"src="https://www.getit01.com/getimg_360.php?url=http://www.zxtx.org/user/yiyi/html/flash/009.swf "allowScriptAccess="never" allowNetworking="internal"wmode="transparent" invokeURLs="false"quality="high" menu="false"></marquee></td></tr><tr><td colSpan="2"><marquee behavior="alternate" scrollAmount="1"scrollDelay="50"><embed height="200" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" width_="250" src="http://file.edmin.cn/2010/day_101229/20101229_69eb468c255dec319ee1Wvl6bZ5eCU43.swf"allowNetworking="internal" AllowScriptAccess="never" WMode="Transparent" invokeURLs="false"></marquee></td><td><img title="「春天沒來」歡迎您" alt="" src="https://www.getit01.com/getimg_360.php?url=http://image11.360doc.com/DownloadImg/2010/02/1912/3398172_3.jpg"width_="109" height="140"></td></tr></tbody></table>代碼解析：這是用表格定位的一個網頁代碼。可以在大圖片之中添加小圖片。表格標籤中設置了一個背景圖片。表格是四行三列的表格。第一行，三個單元格合併為一個單元格，放入了三個向左移動的小圖片。第二行，三個單元格內都放入了一個動畫圖片。第三行，三個單元格合併為一個單元格，放入了左右來回移動的兩個動畫圖片。第四行，兩個單元格。第一個單元格是兩個單元格合併在一起的單元格，放入了一個左右來回移動的一個動畫圖片；第二個單元格放入了一個jpg格式的動態小圖片。代碼：<table style="border: 8px double hotpink; left: 0px; overflow:hidden;" cellSpacing="0" cellPadding="0" width_="650"height="250"><tbody><tr><td><marquee height="250" behavior="alternate" width_="325"scrollAmount="1" scrollDelay="30"><img style="border-width: 0px; margin: 0px; width: 400px;height: 250px;" src="https://www.getit01.com/getimg_360.php?url=http://userimage3.360doc.com/13/0125/01/7494381_201301250124240273.gif"></marquee></td><td><marquee direction="right" height="250" behavior="alternate" width_="325" scrollAmount="1" scrollDelay="30"><img style="border-width: 0px; margin: 0px; width: 400px;height: 250px; filter: FlipH;" src="https://www.getit01.com/getimg_360.php?url=http://userimage3.360doc.com/13/0125/01/7494381_201301250124240273.gif"></marquee></td></tr></tbody></table>代碼解析：設置一個一行二列的表格，選擇一個動態的移動圖片，用設有「向左移動和來回走」的移動標籤控制這個圖片標籤，放入第一個單元格中；用設有「向右移動和來回走」的移動標籤控制這個圖片標籤，並把圖片標籤中添加「左右翻轉」圖片的代碼filter: FlipH，然後放入第二個單元格中。挺簡單的方法，具有不錯的效果。如果你尋找不到動態的移動圖片，普通的靜止圖片也可以，只不過每個單元格中要多粘貼幾次罷了。代碼如下：<table style="border: 8px double hotpink; left: 0px; overflow: hidden;"cellSpacing="0" cellPadding="0" width_="700" height="600"><tbody><tr><td><marquee height="600" behavior="alternate" width_="350"scrollAmount="6" scrollDelay="30"><img style="border-width:0px; margin: 0px; width: 400px; height: 600px;" src="http://userimage2.360doc.com/12/0310/21/5008771_201203102147470511.jpg"><img style="border-width: 0px;margin: 0px; width: 400px; height: 600px;" src="http://userimage2.360doc.com/12/0310/21/5008771_201203102147470511.jpg"><img style="border-width: 0px;margin: 0px; width: 400px; height: 600px;" src="http://userimage2.360doc.com/12/0310/21/5008771_201203102147470511.jpg"><img style="border-width: 0px;margin: 0px; width: 400px; height: 600px;" src="http://userimage2.360doc.com/12/0310/21/5008771_201203102147470511.jpg"><img style="border-width: 0px;margin: 0px; width: 400px; height: 600px;" src="http://userimage2.360doc.com/12/0310/21/5008771_201203102147470511.jpg"></marquee></td><td><marquee direction="right" height="600" behavior="alternate"width_="350" scrollAmount="6" scrollDelay="30"><img style="border-width: 0px; margin: 0px; width: 400px;height: 600px; filter: FlipH;" src="https://www.getit01.com/getimg_360.php?url=http://userimage2.360doc.com/12/0310/21/5008771_201203102147470511.jpg"><imgstyle="border-width: 0px; margin: 0px; width: 400px;height: 600px; filter: FlipH;" src="https://www.getit01.com/getimg_360.php?url=http://userimage2.360doc.com/12/0310/21/5008771_201203102147470511.jpg"><imgstyle="border-width: 0px; margin: 0px; width: 400px; height: 600px;filter: FlipH;" src="https://www.getit01.com/getimg_360.php?url=http://userimage2.360doc.com/12/0310/21/5008771_201203102147470511.jpg"><imgstyle="border-width: 0px; margin: 0px; width: 400px; height:600px; filter: FlipH;" src="https://www.getit01.com/getimg_360.php?url=http://userimage2.360doc.com/12/0310/21/5008771_201203102147470511.jpg"><imgstyle="border-width: 0px; margin: 0px; width: 400px; height:600px; filter: FlipH;" src="https://www.getit01.com/getimg_360.php?url=http://userimage2.360doc.com/12/0310/21/5008771_201203102147470511.jpg"></marquee></td></tr></tbody></table>幾款網頁效果類似的移動圖片代碼：下面的3篇代碼，設置方法不相同，網頁效果卻很類似，都是很好的移動圖片代碼。代碼1：<div align="center"><table style="border: 8px inset rgb(102, 153, 255); left: 0px;overflow: hidden;" width_="680" bgColor="#4b0082"height="480"><tbody><tr><td><marquee height="390" behavior="alternate" width_="680"scrollAmount="2" scrollDelay="30"><img title="" border="0" alt="" src="https://www.getit01.com/getimg_360.php?url=http://image52.360doc.com/DownloadImg/2012/06/1315/24828332_2"></marquee></td></tr><tr><td><div style="margin-top: -430px; margin-left: 1px;"><table style="top: 0px; width: 670px; height: 390px; position:relative;" align="center"><tbody><tr><td><table><tbody><tr><td style="width: 40px; height: 390px; filter: progid:DximageTransform.Microsoft.Gradient(GradientType=0,startColorstr:#4B0082, endColorstr:#4B0082);"></td><td width_="10"><table style="border: 4px inset rgb(102, 153, 255); left: 0px;overflow: hidden;" border="3" borderColor="#6699ff"width_="30" height="390"><tbody><tr><td> <wbr></td></tr></tbody></table></td><td style="width: 20px; height: 390px; filter: progid:DximageTransform.Microsoft.Gradient(GradientType=0,startColorstr:#4B0082, endColorstr:#4B0082);"></td><td width_="10"><table style="border: 4px inset rgb(102, 153, 255); left: 0px;overflow: hidden;" border="3" borderColor="#6699ff"width_="30" height="390"><tbody><tr><td> <wbr></td></tr></tbody></table></td><td style="width: 20px; height: 390px; filter:progid:DximageTransform.Microsoft.Gradient(GradientType=0, startColorstr:#4B0082, endColorstr:#4B0082);"></td><td width_="10"><table style="border: 4px inset rgb(102, 153, 255); left: 0px;overflow: hidden;" border="3" borderColor="#6699ff"width_="30" height="390"><tbody><tr><td> <wbr></td></tr></tbody></table></td><td style="width: 40px; height: 390px; filter: progid:DximageTransform.Microsoft.Gradient(GradientType=0, startColorstr:#4B0082, endColorstr:#4B0082);"></td><td width_="10"><table style="border: 4px inset rgb(102, 153, 255); left: 0px;overflow: hidden;" border="3" borderColor="#6699ff"width_="240" height="390"><tbody><tr><td> <wbr></td></tr></tbody></table></td><td style="width: 40px; height: 390px; filter: progid:DximageTransform.Microsoft.Gradient(GradientType=0,startColorstr:#4B0082, endColorstr:#4B0082);"></td><td width_="10"><table style="border: 4px inset rgb(102, 153, 255); left: 0px;overflow: hidden;" border="3" borderColor="#6699ff"width_="30" height="390"><tbody><tr><td> <wbr></td></tr></tbody></table></td><td style="width: 20px; height: 390px; filter: progid:DximageTransform.Microsoft.Gradient(GradientType=0, startColorstr:#4B0082, endColorstr:#4B0082);"></td><td width_="10"><table style="border: 4px inset rgb(102, 153, 255); left: 0px;overflow: hidden;" border="3" borderColor="#6699ff"width_="30" height="390"><tbody><tr><td> <wbr></td></tr></tbody></table></td><td style="width: 20px; height: 390px; filter: progid:DximageTransform.Microsoft.Gradient(GradientType=0, startColorstr:#4B0082, endColorstr:#4B0082);"></td><td width_="10"><table style="border: 4px inset rgb(102, 153, 255); left: 0px;overflow: hidden;" border="3" borderColor="#6699ff"width_="30" height="390"><tbody><tr><td> <wbr></td></tr></tbody></table></td><td style="width: 40px; height: 390px; filter: progid:DximageTransform.Microsoft.Gradient(GradientType=0, startColorstr:#4B0082, endColorstr:#4B0082);"></td></tr></tbody></table></td></tr></tbody></table></div></td></tr></tbody></table></div>代碼解析：上面的代碼設置了一個一行二列的表格，表格的第一行中放入了一個移動圖片，第二行的單元格中設置了一個塊區，塊區中放入了一個一行十五列的表格（為了表述的方便，我們把這個表格命名為表格A）。塊區標籤中設置了居上的外邊矩為-430px，居左的外邊矩為2px；表格A標籤中設置了相對定位代碼。表格A的第1、3、5、7、9、11、13、15單元格中，各放入了一個表格，放入的表格中調用了css的progid濾鏡樣式，設置了一個長方形顏色條框。表格A的第2、4、6、8、10、12、14單元格都是空單元格。把所有的這些代碼都放入了一個設有居中對齊的塊區中，是為了讓整個內容都居中顯示。我用粗體顯示的代碼是表格A與表格A中的內容。代碼2：<div align="center"><table border="0" cellSpacing="1" cellPadding="3" width_="650"height="270"><tbody><tr><td bgColor="#ee0000"> </td></tr><tr><td bgColor="#ff6633"> </td></tr><tr><td bgColor="#ffff00"> </td></tr><tr><td bgColor="#00cd00"> </td></tr><tr><td bgColor="#3366ff"> </td></tr><tr><td bgColor="#ff00ff"> </td></tr><tr><td bgColor="#7fff00"> </td></tr><tr><td bgColor="#9b30ff"> </td></tr><tr><td bgColor="#ee0000"> </td></tr></tbody></table></div><div style="margin-top: -244px; margin-left: 10px;"align="center"><table border="0" cellSpacing="0" cellPadding="0" width_="650"align="center" height="210"><tbody><tr><td align="center"><marquee width_="120" scrollAmount="2" scrollDelay="100"><imgtitle="春天沒來歡迎您" alt="春天沒來歡迎您" src="http://image52.360doc.com/DownloadImg/2012/06/1315/24828273_2"height="210"></marquee></td><td align="center"><marquee width_="120" scrollAmount="2" scrollDelay="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="http://image52.360doc.com/DownloadImg/2012/06/1315/24828273_3"height="210"></marquee></td><td align="center"><marquee width_="120" scrollAmount="2" scrollDelay="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="http://image52.360doc.com/DownloadImg/2012/06/1315/24828273_4"height="210"></marquee></td><td align="center"><marquee width_="120" scrollAmount="2" scrollDelay="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="http://image52.360doc.com/DownloadImg/2012/06/1315/24828273_5"height="210" real_src="https://www.getit01.com/getimg_360.php?url=http://image52.360doc.com/DownloadImg/2012/06/1315/24828273_5"></marquee></td><td align="center"><marquee width_="120" scrollAmount="2" scrollDelay="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="http://image52.360doc.com/DownloadImg/2012/06/1315/24828273_6"height="210"></marquee></td></tr></tbody></table></div>代碼解析：設置了一個居中對齊的塊區，塊區中放入了一個寬度為650px高度為270px的九行一列的表格。9個單元格都是設置了不同的背景顏色的空單元格。接下來又設置了一個塊區，塊區標籤中設置了外邊矩的居上值為-244px，居左值為 10px，設置了水平居左對齊方式。塊區中放入了一個一行五列的表格，表格的五個單元格中各放入了一個向左移動的小圖片。居上值為-244px，就把這個塊區中的表格上移了244px，也就是把移動的小圖片疊加在了顏色小條框的上面了。代碼3：<div align="center"><table style="border: 12px double hotpink; left: 0px; overflow: hidden;" width_="600" height="440"><tbody><tr><td><marquee height="440" behavior="alternate" width_="600" scrollAmount="1" scrollDelay="30"><img style="border-width: 0px; margin: 0px; width: 600px; height: 450px;"src="https://www.getit01.com/getimg_360.php?url=http://userimage3.360doc.com/13/0125/01/7494381_201301250124240273.gif"></marquee></td></tr><tr><td><div style="margin-top: -440px; margin-left: 0px;"><table style="top: 0px; height: 450px; position: relative;" align="center"><tbody><tr><td style="width: 450px;"><table><tbody><tr><td style="width: 20px; height: 440px; filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr="#ffffff",endColorStr="#ff0000");"></td><td width_="15"></td><td style="width: 20px; height: 440px; filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr="#ffffff",endColorStr="#ff0000");"></td><td width_="15"></td><td style="width: 20px; height: 440px; filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr="#ffffff",endColorStr="#ff0000");"></td><td width_="15"></td><td style="width: 20px; height: 440px; filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr="#ffffff",endColorStr="#ff0000");"></td><td width_="15"></td><td style="width: 20px; height: 440px; filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr="#ffffff",endColorStr="#ff0000");"></td><td width_="155"></td></tr></tbody></table></td><td style="width: 450px;"><table style="top: 0px; height: 440px; position: relative;" align="center"><tbody><tr><td width_="155"></td><td style="width: 20px; height: 440px; filter:progid:DximageTransform.Microsoft.Gradient(GradientType=1, startcolorstr:#ff00ff, endcolorstr:#FFFFFF,);"></td><td width_="15"></td><td style="width: 20px; height: 440px; filter:progid:DximageTransform.Microsoft.Gradient(GradientType=1, startcolorstr:#ff00ff, endcolorstr:#FFFFFF,);"></td><td width_="15"></td><td style="width: 20px; height: 440px; filter:progid:DximageTransform.Microsoft.Gradient(GradientType=1, startcolorstr:#ff00ff, endcolorstr:#FFFFFF,);"></td><td width_="15"></td><td style="width: 20px; height: 440px; filter:progid:DximageTransform.Microsoft.Gradient(GradientType=1, startcolorstr:#ff00ff, endcolorstr:#FFFFFF,);"></td><td width_="15"></td><td style="width: 20px; height: 440px; filter:progid:DximageTransform.Microsoft.Gradient(GradientType=1, startcolorstr:#ff00ff, endcolorstr:#FFFFFF,);"></td></tr></tbody></table></td></tr></tbody></table></div></td></tr></tbody></table></div>progid濾鏡語法：filter: progid:DximageTransform.Microsoft.Gradient(GradientType=0, startcolorstr:#FFFFFF, endcolorstr:hotpink)代碼解析：filter：濾鏡；progid：DximageTransform.Microsoft.Gradient：背景漸變。GradientType:設置或檢索色彩漸變的方向。1代表水平漸變，0代表垂直漸變。默認值為1。startColorStr:設置色彩漸變的開始顏色和透明度。默認值為 #FF000000 （不透明黑色）。其格式為 #AARRGGBB 。 AA 指定透明度。（ 00 是完全透明， FF 是完全不透明。） RR 、 GG 、 BB 為十六進位正整數。取值範圍為 00 - FF 。 RR 指定紅色值， GG 指定綠色值， BB 指定藍色值。超出取值範圍的值將被恢復為默認值。EndColorStr:設置色彩漸變的結束顏色和透明度。默認值為 #FF000000 （不透明黑色）。其格式為 #AARRGGBB 。 AA 指定透明度。（ 00 是完全透明， FF 是完全不透明。） RR 、 GG 、 BB 為十六進位正整數。取值範圍為 00 - FF 。 RR 指定紅色值， GG 指定綠色值， BB 指定藍色值。超出取值範圍的值將被恢復為默認值。代碼：<div align="center"><marquee direction="left" height="1125" scrollAmount="3"><img style="filter: FlipH;" src="https://www.getit01.com/getimg_360.php?url=http://userimage3.360doc.com/12/1113/14/6954561_201211131459450615.jpg"><img style="filter: FlipH;"src="https://www.getit01.com/getimg_360.php?url=http://userimage3.360doc.com/12/1113/14/6954561_201211131459450615.jpg"><img style="filter: FlipH;"src="https://www.getit01.com/getimg_360.php?url=http://userimage3.360doc.com/12/1113/14/6954561_201211131459450615.jpg"><img style="filter: FlipH;"src="https://www.getit01.com/getimg_360.php?url=http://userimage3.360doc.com/12/1113/14/6954561_201211131459450615.jpg"><img style="filter: FlipH;"src="https://www.getit01.com/getimg_360.php?url=http://userimage3.360doc.com/12/1113/14/6954561_201211131459450615.jpg"><img style="filter: FlipH;"src="https://www.getit01.com/getimg_360.php?url=http://userimage3.360doc.com/12/1113/14/6954561_201211131459450615.jpg"></marquee></div><div style="margin-top: -1125px; margin-left: 0px;"><marquee direction="right" height="1125" scrollAmount="3"><img style="filter: Alpha(opacity=50);"src="https://www.getit01.com/getimg_360.php?url=http://userimage3.360doc.com/12/1113/14/6954561_201211131459450615.jpg"><img style="filter: Alpha(opacity=50);"src="https://www.getit01.com/getimg_360.php?url=http://userimage3.360doc.com/12/1113/14/6954561_201211131459450615.jpg"><img style="filter: Alpha(opacity=50);"src="https://www.getit01.com/getimg_360.php?url=http://userimage3.360doc.com/12/1113/14/6954561_201211131459450615.jpg"><img style="filter: Alpha(opacity=50);"src="https://www.getit01.com/getimg_360.php?url=http://userimage3.360doc.com/12/1113/14/6954561_201211131459450615.jpg"><img style="filter: Alpha(opacity=50);"src="https://www.getit01.com/getimg_360.php?url=http://userimage3.360doc.com/12/1113/14/6954561_201211131459450615.jpg"><img style="filter: Alpha(opacity=50);"src="https://www.getit01.com/getimg_360.php?url=http://userimage3.360doc.com/12/1113/14/6954561_201211131459450615.jpg"></marquee></div>代碼解析：設置兩個塊區。第一個塊區放置幾個向左移動的圖片，圖片標籤中要設置左右翻轉濾鏡樣式；第二個塊區放置幾個向右移動的圖片，圖片標籤中要設置漸變濾鏡樣式，塊區標籤中要設置居上的外邊矩，居上的外邊矩的值等於圖片高度值的相反數。兩個移動標籤中都可添加來回走的移動方式。代碼：<table border="1" cellSpacing="0" cellPadding="20" width_="660"background="http://image37.360doc.com/DownloadImg/2011/09/1515/17657035_35.jpg" align="center" height="510"><tbody><tr><td><embed height="510" type="application/x-shockwave-flash"align="right" width_="660" src="https://www.getit01.com/getimg_360.php?url=http://home.invil.org/kkj941/editorImage/12289621363518548.swf" quality="high"wmode="transparent"><embed height="310" type="application/x-shockwave-flash" align="right" width_="660"src="https://www.getit01.com/getimg_360.php?url=http://tmflash.6000y.com/flashxuexi/QQ249181841-485.swf "quality="high" wmode="transparent"></td></tr></tbody></table>代碼解析：兩個動畫圖片都放入表格的同一個單元格內，疊加在一起的效果挺好的。作業：1、認真閱讀代碼解析，深刻理解上面各種代碼的設置方法。2、自己試著製作幾次，努力掌握這些設置方法。
2012年2月28日於北京
「春天沒來」祝福朋友新春快樂第四章 代碼實習園地第四節 精美網頁欣賞（2）本節繼續欣賞與研究精美網頁代碼。代碼：<table border="0" width_="720"background="http://userimage2.360doc.com/12/0317/19/7747867_201203171904220437.jpg"align="center" height="520"><tbody><tr><td><marquee height="520" width_="720" scrollAmount="4"><marquee direction="right" height="520" width_="720" scrollAmount="4"><img style="height: 520px; filter: fliph;" src="https://www.getit01.com/getimg_360.php?url=http://userimage2.360doc.com/12/0317/19/7747867_201203171904220437.jpg"width_="720" height="520"></marquee></marquee></td></tr></tbody></table>代碼解析：1、表格標籤中設置一個背景圖片，單元格中放入一個由兩個移動標籤控制的左右翻轉圖片。2、表格標籤、移動標籤與圖片三者的規格必須相同。3、兩個圖片是同一地址的圖片（也可用兩個不同地址的圖片），兩個移動標籤的移動方向是相反的方向。（效果蠻不錯的。）代碼：<table border="0" cellPadding="0" width_="750"background="http://image50.360doc.com/ DownloadImg/2012/03/2921/22744049_7.jpg"height="563"><tbody><tr><td><div><marquee direction="down" height="563" width_="750" scrollAmount="4"><marquee direction="up" height="563" width_="750" scrollAmount="4"><img style="height: 563px; filter: alpha WIDTH: 750px;" alt="春天沒來"src="https://www.getit01.com/getimg_360.php?url=http://image50.360doc.com/DownloadImg/2012/03/2921/22744049_1.jpg"width_="750" height="563"></marquee></marquee></div></td></tr></tbody></table>代碼解析：上面的代碼是不同地址的圖片效果。代碼：<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_="610" 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="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="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="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="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="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="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="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"></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_="120" scrollAmount="2"><center><img style="width: 55px; height: 50px;" src="https://www.getit01.com/getimg_360.php?url=http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><img style="width: 55px; height: 50px;" src="https://www.getit01.com/getimg_360.php?url=http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><img style="width: 55px; height: 50px;" src="https://www.getit01.com/getimg_360.php?url=http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><img style="width: 55px; height: 50px;" src="https://www.getit01.com/getimg_360.php?url=http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><img style="width: 55px; height: 50px;" src="https://www.getit01.com/getimg_360.php?url=http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><img style="width: 55px; height: 50px;" src="https://www.getit01.com/getimg_360.php?url=http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><img style="width: 55px; height: 50px;" src="https://www.getit01.com/getimg_360.php?url=http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><img style="width: 55px; height: 50px;" src="https://www.getit01.com/getimg_360.php?url=http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><img style="width: 55px; height: 50px;" src="https://www.getit01.com/getimg_360.php?url=http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><img style="width: 55px; 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: 55px; height: 50px;" src="https://www.getit01.com/getimg_360.php?url=http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><img style="width: 55px; height: 50px;" src="https://www.getit01.com/getimg_360.php?url=http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><img style="width: 55px; height: 50px;" src="https://www.getit01.com/getimg_360.php?url=http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><img style="width: 55px; height: 50px;" src="https://www.getit01.com/getimg_360.php?url=http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><img style="width: 55px; height: 50px;" src="https://www.getit01.com/getimg_360.php?url=http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><img style="width: 55px; height: 50px;" src="https://www.getit01.com/getimg_360.php?url=http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><img style="width: 55px; height: 50px;" src="https://www.getit01.com/getimg_360.php?url=http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><img style="width: 55px; height: 50px;" src="https://www.getit01.com/getimg_360.php?url=http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><img style="width: 55px; height: 50px;" src="https://www.getit01.com/getimg_360.php?url=http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><img style="width: 55px; height: 50px;" src="https://www.getit01.com/getimg_360.php?url=http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"></center></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="220" type="application/x-shockwave-flash" width_="350"src="https://www.getit01.com/getimg_360.php?url=http://tmflash.6000y.com/flashxuexi/ QQ249181841-2013.swf " quality="high" menu="false" wmode="transparent"></p></td></tr></tbody></table><td width_="120"><marquee direction="down" height="180" width_="120" scrollAmount="2"><center><img style="width: 55px; 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: 55px; 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: 55px; 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: 55px; 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: 55px; 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: 55px; 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: 55px; 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: 55px; 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: 55px; 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: 55px; 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: 55px; 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: 55px; 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: 55px; 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: 55px; 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: 55px; 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: 55px; 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: 55px; 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: 55px; 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: 55px; 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: 55px; height: 50px;" src="https://www.getit01.com/getimg_360.php?url=http://image20.360doc.com/DownloadImg/2010/12/1915/7786064_1.gif"></center></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>代碼解析：1、「圖片圍繞圖片轉」，是一個挺不錯的網頁。2、「圖片圍繞圖片轉」在二重表格中放入了三個表格。第一個表格的單元格內放入了向左移動的20個小圖片，放入的小圖片分為兩行。第二個表格分為三個單元格。第一個單元格內放入了向上移動的20個小圖片，放入的小圖片分為兩列；第二個單元格內放入了一個表格。放入的表格中輸入一段文字：「"春天沒來』歡迎您」，並插入了一個動畫圖片；第三個單元格內放入了向下移動的20個小圖片，放入的小圖片分為兩列。第三個表格放入了向右移動的20個小圖片，放入的小圖片分為兩行。代碼：<table border="5" cellSpacing="10" borderColor="#f9f900" cellPadding="0" width_="750" background="http://image53.360doc.com/DownloadImg/2012/ 08/0708/26004202_15.jpg" bgColor="#ddfcfc" align="center"><tbody><tr><td bgColor="#e5eaed" vAlign="middle" background="http://image53. 360doc.com/DownloadImg/2012/08/0708/26004202_21.gif"><div align="center"><img style="margin: 0px; filter: alpha(opacity=100, style=2);" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/2722/27207665_2.jpg" width_="750" height="1128"></div></td></tr><tr><td bgColor="#e5eaed" vAlign="middle" background="http://image53.360doc.com/DownloadImg/2012/08/0708/ 26004202_21.gif"><div align="center"><img style="margin: 0px; filter: alpha(opacity=100, style=2);" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/2722/27207665_3.jpg" width_="750" height="1128" px="" ____="ev_4807885369" __1344298620337__="ev_2764395607"></div></td></tr><tr><td bgColor="#e5eaed" vAlign="middle" background="http://image53.360doc.com/DownloadImg/2012/08/0708/26004202_21.gif"><div align="center"><img style="margin: 0px; filter: alpha(opacity=100,style=2);" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/2722/27207665_4.jpg" width_="750" height="1128" px="" ____="ev_4807885369" __1344298620337__="ev_2764395607"></div></td></tr><tr><td bgColor="#e5eaed" vAlign="middle" background="http://image53.360doc.com/DownloadImg/2012/08/0708/26004202_21.gif"><div align="center"><img style="margin: 0px; filter: alpha(opacity=100,style=2);" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/2722/27207665_5.jpg" width_="750" height="1128" px="" ____="ev_4807885369" __1344298620337__="ev_2764395607"></div></td></tr><tr><td bgColor="#e5eaed" vAlign="middle" background="http://image53.360doc.com/DownloadImg/2012/08/0708/26004202_21.gif"><div align="center"><img style="margin: 0px; filter: alpha(opacity=100,style=2);" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/2722/27207665_6.jpg" width_="750" height="1128" px="" ____="ev_4807885369" __1344298620337__="ev_2764395607"></div></td></tr><tr><td bgColor="#e5eaed" vAlign="middle" background="http://image53.360doc.com/DownloadImg/2012/08/0708/26004202_21.gif"><div align="center"><img style="margin: 0px; filter: alpha(opacity=100,style=2);" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/2722/27207665_7.jpg" width_="750" height="1128" px="" ____="ev_4807885369" __1344298620337__="ev_2764395607"></div></td></tr><tr><td bgColor="#e5eaed" vAlign="middle" background="http://image53.360doc.com/DownloadImg/2012/08/0708/26004202_21.gif"><div align="center"><img style="margin: 0px; filter: alpha(opacity=100,style=2);" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/2722/27207665_8.jpg" width_="750" height="1128" px="" ____="ev_4807885369" __1344298620337__="ev_2764395607"></div></td></tr><tr><td bgColor="#e5eaed" vAlign="middle" background="http://image53.360doc.com/DownloadImg/2012/08/0708/26004202_21.gif"><div align="center"><img style="margin: 0px; filter: alpha(opacity=100,style=2);" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/2722/27207665_9.jpg" width_="750" height="1128" px="" ____="ev_4807885369" __1344298620337__="ev_2764395607"></div></td></tr><tr><td bgColor="#e5eaed" vAlign="middle" background="http://image53.360doc.com/DownloadImg/2012/08/0708/26004202_21.gif"><div align="center"><img style="margin: 0px; filter: alpha(opacity=100,style=2);" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/2722/27207665_10.jpg" width_="750" height="1128" px="" ____="ev_4807885369" __1344298620337__="ev_2764395607"></div></td></tr><tr><td bgColor="#e5eaed" vAlign="middle" background="http://image53.360doc.com/DownloadImg/2012/08/0708/26004202_21.gif"><div align="center"><img style="margin: 0px; filter: alpha(opacity=100,style=2);" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/2722/27207665_11.jpg" width_="750" height="1128" px="" ____="ev_4807885369" __1344298620337__="ev_2764395607"></div></td></tr><tr><td bgColor="#e5eaed" vAlign="middle" background="http://image53.360doc.com/DownloadImg/2012/08/0708/26004202_21.gif"><div align="center"><img style="margin: 0px; filter: alpha(opacity=100,style=2);" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/2722/27207665_12.jpg" width_="750" height="1128" px="" ____="ev_4807885369" __1344298620337__="ev_2764395607"></div></td></tr><tr><td bgColor="#e5eaed" vAlign="middle" background="http://image53.360doc.com/DownloadImg/2012/08/0708/26004202_21.gif"><div align="center"><img style="margin: 0px; filter: alpha(opacity=100,style=2);" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/2722/27207665_13.jpg" width_="750" height="1128" px="" ____="ev_4807885369" __1344298620337__="ev_2764395607"></div></td></tr><tr><td bgColor="#e5eaed" vAlign="middle" background="http://image53.360doc.com/DownloadImg/2012/08/0708/26004202_21.gif"><div align="center"><img style="margin: 0px; filter: alpha(opacity=100,style=2);" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/2722/27207665_14.jpg" width_="750" height="1128" px="" ____="ev_4807885369" __1344298620337__="ev_2764395607"></div></td></tr><tr><td bgColor="#e5eaed" vAlign="middle" background="http://image53.360doc.com/DownloadImg/2012/08/0708/26004202_21.gif"><div align="center"><img style="margin: 0px; filter: alpha(opacity=100,style=2);" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/2722/27207665_15.jpg" width_="750" height="1128" px="" ____="ev_4807885369" __1344298620337__="ev_2764395607"></div></td></tr><tr><td bgColor="#e5eaed" vAlign="middle" background="http://image53.360doc.com/DownloadImg/2012/08/0708/26004202_21.gif"><div align="center"><img style="margin: 0px; filter: alpha(opacity=100,style=2);" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/2722/27207665_16.jpg" width_="750" height="1128" px="" ____="ev_4807885369" __1344298620337__="ev_2764395607"></div></td></tr><tr><td bgColor="#e5eaed" vAlign="middle" background="http://image53.360doc.com/DownloadImg/2012/08/0708/26004202_21.gif"><div align="center"><img style="margin: 0px; filter: alpha(opacity=100,style=2);" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/2722/27207665_17.jpg" width_="750" height="1128" px="" ____="ev_4807885369" __1344298620337__="ev_2764395607"></div></td></tr><tr><td bgColor="#e5eaed" vAlign="middle" background="http://image53.360doc.com/DownloadImg/2012/08/0708/26004202_21.gif"><div align="center"><img style="margin: 0px; filter: alpha(opacity=100,style=2);" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/2722/27207665_18.jpg" width_="750" height="1128" px="" ____="ev_4807885369" __1344298620337__="ev_2764395607"></div></td></tr><tr><td bgColor="#e5eaed" vAlign="middle" background="http://image53.360doc.com/DownloadImg/2012/08/0708/26004202_21.gif"><div align="center"><img style="margin: 0px; filter: alpha(opacity=100,style=2);" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/2722/27207665_19.jpg" width_="750" height="1128" px="" ____="ev_4807885369" __1344298620337__="ev_2764395607"></div></td></tr><tr><td bgColor="#e5eaed" vAlign="middle" background="http://image53.360doc.com/DownloadImg/2012/08/0708/26004202_21.gif"><div align="center"><img style="margin: 0px; filter: alpha(opacity=100,style=2);" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/2722/27207665_20.jpg" width_="750" height="1128" px="" ____="ev_4807885369" __1344298620337__="ev_2764395607"></div></td></tr><tr><td bgColor="#e5eaed" vAlign="middle" background="http://image53.360doc.com/DownloadImg/2012/08/0708/26004202_21.gif"><div align="center"><img style="margin: 0px; filter: alpha(opacity=100,style=2);" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/2722/27207665_21.jpg" width_="750" height="1128" px="" ____="ev_4807885369" __1344298620337__="ev_2764395607"></div></td></tr><tr><td bgColor="#e5eaed" vAlign="middle" background="http://image53.360doc.com/DownloadImg/2012/08/0708/26004202_21.gif"><div align="center"><img style="margin: 0px; filter: alpha(opacity=100,style=2);" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/2722/27207665_22.jpg" width_="750" height="1128" px="" ____="ev_4807885369" __1344298620337__="ev_2764395607"></div></td></tr><tr><td bgColor="#e5eaed" vAlign="middle" background="http://image53.360doc.com/DownloadImg/2012/08/0708/26004202_21.gif"><div align="center"><img style="margin: 0px; filter: alpha(opacity=100,style=2);" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/2722/27207665_23.jpg" width_="750" height="1128" px="" ____="ev_4807885369" __1344298620337__="ev_2764395607"></div></td></tr><tr><td bgColor="#e5eaed" vAlign="middle" background="http://image53.360doc.com/DownloadImg/2012/08/0708/26004202_21.gif"><div align="center"><img style="margin: 0px; filter: alpha(opacity=100,style=2);" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/2722/27207665_24.jpg" width_="750" height="1128" px="" ____="ev_4807885369" __1344298620337__="ev_2764395607"></div></td></tr><tr><td bgColor="#e5eaed" vAlign="middle" background="http://image53.360doc.com/DownloadImg/2012/08/0708/26004202_21.gif"><div align="center"><img style="margin: 0px; filter: alpha(opacity=100,style=2);" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/2722/27207665_25.jpg" width_="750" height="1128" px="" ____="ev_4807885369" __1344298620337__="ev_2764395607"></div></td></tr><tr><td bgColor="#e5eaed" vAlign="middle" background="http://image53.360doc.com/DownloadImg/2012/08/0708/26004202_21.gif"><div align="center"><img style="margin: 0px; filter: alpha(opacity=100,style=2);" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/2722/27207665_26.jpg" width_="750" height="1128" px="" ____="ev_4807885369" __1344298620337__="ev_2764395607"></div></td></tr><tr><td bgColor="#e5eaed" vAlign="middle" background="http://image53.360doc.com/DownloadImg/2012/08/0708/26004202_21.gif"><div align="center"><img style="margin: 0px; filter: alpha(opacity=100,style=2);" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/2722/27207665_27.jpg" width_="750" height="1128" px="" ____="ev_4807885369" __1344298620337__="ev_2764395607"></div></td></tr><tr><td bgColor="#e5eaed" vAlign="middle" background="http://image53.360doc.com/DownloadImg/2012/08/0708/26004202_21.gif"><div align="center"><img style="margin: 0px; filter: alpha(opacity=100,style=2);" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/2722/27207665_28.jpg" width_="750" height="1128"></div></td></tr></tbody></table>代碼解析：設置一個一行多列的表格，在列標籤內設置一個閃光的背景圖片，在單元格中粘貼一個漸變濾鏡圖片。代碼：<div align="center"><table style="left: 0px; top: 0px; width: 910px; height: 430px;" border="0" cellSpacing="0"borderColor="#f0f0f0" cellPadding="0" bgColor="#f8f8f8"><tbody><tr><td style="left: 1px; top: 0px; width: 100px; height: 430px; position: relative; z-index: 1;"><marquee style="left: 0px; top: 0px; width: 100px; height: 430px; position: absolute;" id="mar1"direction="right" scrollAmount="2" scrollDelay="1"><div style="left: 0px; top: 0px; width: 2760px; height: 430px;" class="divBorderStyleRelative"><table style="left: 0px; top: 0px; width: 2760px; height: 430px;" border="0" cellSpacing="0" cellPadding="0"><tbody><tr><td style="width: 690px;" background="http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3"></td><td style="width: 690px; filter: FlipH();" background="http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3"></td><td style="width: 690px;" background="http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3"></td><td style="width: 690px; filter: FlipH();" background="http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3"></td></tr></tbody></table></div></marquee><table style="left: 0px; top: -20px; width: 50px; height: 470px; position: absolute;" border="0" cellSpacing="0" cellPadding="0"><tbody><tr><td style="filter: alpha(opacity=80,finishOpacity=0,style=1);" bgColor="#444444"></td></tr></tbody></table><table style="left: 50px; top: -20px; width: 50px; height: 470px; position: absolute;" border="0" cellSpacing="0" cellPadding="0"><tbody><tr><td style="filter: alpha(opacity=0,finishOpacity=85,style=1);" bgColor="#444444"></td></tr></tbody></table></td><td style="left: 0px; top: 0px; width: 800px; height: 430px; position: relative;"><marquee style="left: 0px; top: 0px; width: 800px; height: 430px; position: absolute;" id="mar3" behavior="alternate"scrollAmount="2" scrollDelay="1"><div style="left: 0px; top: 0px; width: 2760px; height: 430px;" class="divBorderStyleRelative"><table style="left: 0px; top: 0px; width: 2760px; height: 430px;" border="0" cellSpacing="0" cellPadding="0"><tbody><tr><td style="width: 690px; filter: FlipH();" background="http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3"></td><td style="width: 690px;" background="http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3"></td><td style="width: 690px; filter: FlipH();" background="http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3"></td><td style="width: 690px;" background="http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3"></td></tr></tbody></table></div></marquee><table style="left: 0px; top: 0px; width: 600px; height: 430px; position: absolute;" border="0" cellSpacing="0" cellPadding="0"><tbody><tr><td style="width: 50px; filter: alpha(opacity=20,finishOpacity=0,style=1);" bgColor="#444444"> </td><td style="width: 750px;"> </td></tr></tbody></table></td><td style="left: 0px; top: 0px; width: 100px; height: 430px; position: relative; z-index: 100;"><marquee style="left: 0px; top: 0px; width: 100px; height: 430px; position: absolute;" id="mar2"direction="right" scrollAmount="2" scrollDelay="1"><div style="left: 0px; top: 0px; width: 2760px; height: 430px;" class="divBorderStyleRelative"><table style="left: 0px; top: 0px; width: 2760px; height: 430px;" border="0" cellSpacing="0" cellPadding="0"><tbody><tr><td style="width: 690px; filter: FlipH();" background="http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3"></td><td style="width: 690px;" background="http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3"></td><td style="width: 690px; filter: FlipH();" background="http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3"></td><td style="width: 690px;" background="http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3"></td></tr></tbody></table></div></marquee><table style="left: 0px; top: -20px; width: 50px; height: 470px; position: absolute;" border="0" cellSpacing="0" cellPadding="0"><tbody><tr><td style="filter: alpha(opacity=80,finishOpacity=0,style=1);" bgColor="#444444"></td></tr></tbody></table><table style="left: 50px; top: -20px; width: 50px; height: 470px; position: absolute;" border="0" cellSpacing="0" cellPadding="0"><tbody><tr><td style="filter: alpha(opacity=0,finishOpacity=85,style=1);" bgColor="#444444"></td></tr></tbody></table></td></tr></tbody></table></div>代碼解析：1、上面的代碼是一個非常漂亮的移動圖片代碼。代碼中設置了一個一行三列的表格。表格的第一個單元格是寬度為100px的單元格，單元格中有三個內容：第一個內容是移動標籤控制的塊區。塊區中放入了一個一行四列的表格，表格的每個單元格中都設置了一個相同地址的背景圖片，其中第一個圖片與第三個圖片是普通圖片， 第二個圖片與第四個圖片是水平翻轉圖片。第二個內容是一個一行一列的表格。表格的列標籤中設置了一個羽化濾鏡的顏色條框。第三個內容也是一個一行一列的表格。表格的列標籤中也設置了一個羽化濾鏡的顏色條框。表格的第二個單元格是寬度為800px的單元格，單元格中有兩個內容：第一個內容是移動標籤控制的塊區。塊區中放入了一個一行四列的表格，表格的每個單元格中都設置了一個相同地址的背景圖片，其中第一個圖片與第三個圖片是普通圖片，第二個圖片與第四個圖片是水平翻轉圖片。第二個內容是一個一行二列的表格。第一個單元格為寬度50px的羽化濾鏡顏色條框，第二個單元格為寬度550px的空單元格。表格的第三個單元格是寬度為100px的單元格，單元格中的內容與表格的第一個單元格內容相同。2、每個單元格中設置了相對定位代碼，單元格中的內容處都設置了絕對定位代碼，這就確定了放置這些內容的參考點為該單元格左上角的起點處。這一點非常重要，如果設置不對定位代碼，內容就不能正常顯示。代碼：<TABLE style="Z-INDEX: 1; POSITION: relative; WIDTH: 746px; HEIGHT: 1000px; TOP: 0px; LEFT: 0px" border=0 cellSpacing=0 cellPadding=0 background=地址 align=center><TBODY><TR><TD style="Z-INDEX: 1; POSITION: relative; WIDTH: 746px; HEIGHT: 1000px; TOP: 0px; LEFT: 0px" background=地址 align=center cellPadding="0" cellSpacing="0" border="0"><IMG border=0 alt="" src="https://www.getit01.com/getimg_360.php?url=http://image59.360doc.com/DownloadImg/2013/02/2108/30438681_7.jpg" width_=746><DIV style="POSITION: absolute; TOP: 0px; LEFT: 0px" class=divBorderStyle><DIV style="WIDTH: 400px"><MARQUEE><TABLE style="BACKGROUND-IMAGE: url(http://image59.360doc.com/DownloadImg/2013/02/2108/30438681_7.jpg); FILTER: alpha(opacity=90,style=2)" title=http://1969707039.qzone.qq.com/ border=0 cellSpacing=0 borderColor=#cccccc cellPadding=0 width_=746 bgColor=#aaaaaa align=center height=1119><TBODY><TR><TD></TD></TR></TBODY></TABLE></MARQUEE></DIV></DIV><DIV style="POSITION: absolute; TOP: 0px; LEFT: 400px" class=divBorderStyle><DIV style="FILTER: flipH; WIDTH: 400px"><MARQUEE><TABLE style="BACKGROUND-IMAGE: url(http://image59.360doc.com/DownloadImg/2013/02/2108/30438681_7.jpg); FILTER: alpha(opacity=100,style=2)" title=http://1969707039.qzone.qq.com/ border=0 cellSpacing=0 borderColor=#cccccc cellPadding=0 width_=746 bgColor=#aaaaaa align=center height=1119><TBODY><TR><TD></TD></TR></TBODY></TABLE></MARQUEE></DIV></DIV><DIV style="Z-INDEX: 1; POSITION: absolute; WIDTH: 746px; TOP: 0px; LEFT: 0px" class=divBorderStyle><EMBED style="WIDTH: 746px; HEIGHT: 1000px" height=700 type=application/x-shockwave-flash pluginspage=http://www.macromedia.com/go/getflashplayer width_=900 src=http://www.xcwhw.cn/fla/bb/hc/205.swf wmode="transparent" play="false" menu="false" loop="false" invokeurls="false" allowscriptaccess="never" allownetworking="none"></DIV></TD></TR></tbody></table>代碼解析：1、設置一個表格，表格標籤中要設置相對定位代碼，相對定位代碼的居上值與居左值都設置為opx，並設置居中的水平對齊方式。這樣就把表格的上邊框定位在了瀏覽器窗口上邊緣的正中間。2、表格的列標籤中要設置相對定位代碼，相對定位代碼的居上值與居左值都設置為opx，這樣就把單元格定位在了表格中的正常位置。然後在單元格內放置一個普通圖片。3、設置兩個重疊的塊區標籤。其中一個塊區標籤中設置絕對定位代碼，絕對定位代碼的居上值與居左值都設置為opx，這樣塊區的定位參考點就定位在了單元格左上角的起點處。另一個塊區標籤中設置塊區的寬度。塊區內放入內容：移動圖片。移動圖片是以背景圖片的形式設置在表格標籤在的羽化濾鏡圖片。4、再設置兩個重疊的塊區標籤。其中一個塊區標籤中照常設置絕對定位代碼，絕對定位代碼的居上值與居左值都設置為opx，這樣塊區的定位參考點就定位在了單元格左上角的起點處。另一個塊區標籤中設置水平翻轉濾鏡樣式。塊區內放入內容：移動圖片。移動圖片是以背景圖片的形式設置在表格標籤在的羽化濾鏡圖片。5、再設置一個塊區標籤。塊區標籤在中照常設置絕對定位代碼，絕對定位代碼的居上值與居左值都設置為opx。塊區內放入內容：動畫圖片。6、這樣，就把四個圖片放置到同一位置重疊起來了。那個正常的圖片，其位置是固定的；那個羽化圖片是向左移動的；那個水平翻轉圖片是向右移動的；那個動畫圖片，以其本身的方式運動。至此，就可以用「表格的列尾標籤」與「表格的行尾標籤」收尾了。7、要增加此類移動圖片的個數，只需複製上面代碼中一行的代碼（紅色字體部分），粘貼在表格的主體尾標籤的前面即可。8、相對定位與絕對定位樣式的應用，其要點是：在總表格的表格標籤和列標籤中要設置相對定位樣式，在放入各個具體內容的塊區標籤中要設置絕對定位樣式。代碼：<table style="left: 0px; top: 0px; width: 746px; height: 1000px; position: relative; z-index: 1;" border="0"cellSpacing="0" cellPadding="0" background="http://image59.360doc.com/DownloadImg/2013/02/2108/30438681_1.jpg" align="center"><tbody><tr><td> <marquee direction="left" height="1000" width_="400" scrollAmount="3"><img style="filter: alpha(opacity=100,style=2);" border="0"alt="" src="https://www.getit01.com/getimg_360.php?url=http://image59.360doc.com/DownloadImg/2013/02/2108/30438681_1.jpg" width_="746" alpha(opacity="100,style=2);"></marquee></td><td style="filter: alpha(opacity=100,style=2);"><marquee direction="right" height="1000" width_="400" scrollAmount="3"><img style="filter: flipH;" border="0" alt="" src="https://www.getit01.com/getimg_360.php?url=http://image59.360doc.com/DownloadImg/2013/02/2108/30438681_1.jpg" width_="746"alpha(opacity="100,style=2);"></marquee><div style="left: 0px; top: 0px; width: 0px; position: absolute; z-index: 1;" class="divBorderStyle"><embed style="width: 746px; height: 1000px;" height="1000" type="application/x-shockwave-flash"pluginspage="http://www.macromedia.com/go/getflashplayer" width_="800" src="https://www.getit01.com/getimg_360.php?url=http://www.xcwhw.cn/fla/bb/hc/205.swf"allownetworking="none" allowscriptaccess="never" invokeurls="false" loop="false" menu="false" play="false"wmode="transparent"> </div></td></tr></tbody></table><br>代碼解析：１、設置一個一行二列的表格，表格標籤中要設置相對定位代碼，相對定位代碼的居上值與居左值都設置為opx，設置居中的水平對齊方式。這樣就把表格的上邊框定位在了瀏覽器窗口上邊緣的正中間。還要設置一個背景圖片及其規格。２、第一個單元格放置一個與背景圖片同一地址的向左移動的羽化濾鏡圖片。第二個單元格放置一個與背景圖片同一地址的向右移動的羽化水平翻轉濾鏡圖片，再設置一個塊區，塊區標籤中設置絕對定位樣式，絕對定位的居上值與居左值都設置為0px，然後在塊區內放入一個動畫圖片。３、複製粘貼以上代碼，替換圖片地址，即可增加一個相同效果的移動圖片。作業：1、認真閱讀代碼解析，深刻理解上面各種代碼的設置方法。2、自己試著製作幾次，努力掌握這些設置方法。代碼入門教程(1)代碼入門教程(2)代碼入門教程(3)代碼入門教程(4)代碼入門教程(5)代碼入門教程(6)代碼入門教程(7)代碼入門教程(8)代碼入門教程(9)代碼入門教程(10)代碼入門教程(11)代碼入門教程(12)代碼入門教程(13)代碼入門教程(14)代碼入門教程(15)代碼入門教程(16)代碼入門教程(17)代碼入門教程(18)代碼入門教程(19)代碼入門教程(20)代碼入門教程(21)代碼入門教程(22)代碼入門教程(23)代碼入門教程(24)代碼入門教程(25)代碼入門教程(26)代碼入門教程(27)代碼入門教程(28)代碼入門教程(29)
2012年2月28日於北京
推薦閱讀：
※金口訣初級班快速入門教程《第一章》
※圍棋基礎入門教程
※代碼入門教程（14）
※【藝塾】國畫入門教程之寫意喜鵲的畫法
※新編兒童國畫入門教程-瓢蟲畫法