代碼入門教程（12）

第  二  章    標  簽  應  用第九節 移動圖片（1）

從本節開始，講解移動圖片。圖片的移動標籤與文字的移動標籤基本上是相同的，只是用圖片標籤代替了原來的「文字標籤和文字內容」，換句話來說，就是在原來放置「文字標籤和文字內容」的地方，替換為圖片標籤。本節先講解圖片的五種移動代碼。這些代碼著重在移動方向的練習上，移動速度的練習，可以自己進行。1、向左移動的圖片：代碼：<marquee height="650" scrollAmount="3"><img border="0" src="https://www.getit01.com/getimg_360.php?url=http://userimage3.360doc.com/12/0926/15/6860204_201209261555120159.jpg" height="650"><img border="0" src="https://www.getit01.com/getimg_360.php?url=http://userimage3.360doc.com/12/0926/15/6860204_201209261553000596.jpg" height="650"><img border="0" src="https://www.getit01.com/getimg_360.php?url=http://userimage3.360doc.com/12/1009/12/6860204_201210091249450007.jpg" height="650"><img border="0" src="https://www.getit01.com/getimg_360.php?url=http://userimage3.360doc.com/12/1009/12/6860204_201210091227550195.jpg" height="650"><img border="0" src="https://www.getit01.com/getimg_360.php?url=http://userimage3.360doc.com/12/1009/12/6860204_201210091230080648.jpg" height="650"></marquee>2、向上移動的圖片：代碼：<marquee direction="up" scrollAmount="3"><img src="https://www.getit01.com/getimg_360.php?url=http://image52.360doc.com/DownloadImg/2012/05/3119/24512617_1.jpg" height="400"><img src="https://www.getit01.com/getimg_360.php?url=http://image52.360doc.com/DownloadImg/2012/05/3119/24512617_2.jpg" height="400"><img src="https://www.getit01.com/getimg_360.php?url=http://image52.360doc.com/DownloadImg/2012/05/3119/24512617_3.jpg" height="400"><img src="https://www.getit01.com/getimg_360.php?url=http://image52.360doc.com/DownloadImg/2012/05/3119/24512617_4.jpg" height="400"><img src="https://www.getit01.com/getimg_360.php?url=http://image52.360doc.com/DownloadImg/2012/05/3119/24512617_5.jpg" height="400"></marquee>3、向右移動的圖片：代碼：<marquee direction="right" scrollAmount="3"><table style="width: 1340px;" border="0" cellSpacing="0" cellPadding="0" height="280"><tbody><tr><td><img border="0" src="https://www.getit01.com/getimg_360.php?url=http://userimage3.360doc.com/12/0926/15/6860204_201209261555120159.jpg" height="650"></td><td><img border="0" src="https://www.getit01.com/getimg_360.php?url=http://userimage3.360doc.com/12/0926/15/6860204_201209261553000596.jpg" height="650"></td><td><img border="0" src="https://www.getit01.com/getimg_360.php?url=http://userimage3.360doc.com/12/1009/12/6860204_201210091249450007.jpg" height="650"></td><td><img border="0" src="https://www.getit01.com/getimg_360.php?url=http://userimage3.360doc.com/12/1009/12/6860204_201210091227550195.jpg" height="650"></td><td><img border="0" src="https://www.getit01.com/getimg_360.php?url=http://userimage3.360doc.com/12/1009/12/6860204_201210091230080648.jpg" height="650"></td></tr></tbody></table></marquee>

4、向下移動的圖片：代碼：<marquee direction="down" scrollAmount="3"><img src="https://www.getit01.com/getimg_360.php?url=http://image52.360doc.com/DownloadImg/2012/05/3119/24512617_1.jpg" height="400"><img src="https://www.getit01.com/getimg_360.php?url=http://image52.360doc.com/DownloadImg/2012/05/3119/24512617_2.jpg" height="400"><img src="https://www.getit01.com/getimg_360.php?url=http://image52.360doc.com/DownloadImg/2012/05/3119/24512617_3.jpg" height="400"><img src="https://www.getit01.com/getimg_360.php?url=http://image52.360doc.com/DownloadImg/2012/05/3119/24512617_4.jpg" height="400"><img src="https://www.getit01.com/getimg_360.php?url=http://image52.360doc.com/DownloadImg/2012/05/3119/24512617_5.jpg" height="400"></marquee>5、左右來回走的圖片：代碼：<marquee behavior="alternate" scrollAmount="3"><img src="https://www.getit01.com/getimg_360.php?url=http://image52.360doc.com/DownloadImg/2012/05/3119/24512617_1.jpg" height="400"><img src="https://www.getit01.com/getimg_360.php?url=http://image52.360doc.com/DownloadImg/2012/05/3119/24512617_2.jpg" height="400"><img src="https://www.getit01.com/getimg_360.php?url=http://image52.360doc.com/DownloadImg/2012/05/3119/24512617_3.jpg" height="400"><img src="https://www.getit01.com/getimg_360.php?url=http://image52.360doc.com/DownloadImg/2012/05/3119/24512617_4.jpg" height="400"><img src="https://www.getit01.com/getimg_360.php?url=http://image52.360doc.com/DownloadImg/2012/05/3119/24512617_5.jpg" height="400"></marquee>說明：1、本節講解的圖片的五種移動代碼中，都是輸入了五個圖片的地址。移動代碼中輸入多少個圖片的地址，由你自己選擇，可以減少，也可以增加。2、觀察一下「向左移動的圖片代碼」與「向右移動的圖片代碼」，代碼中「圖片標籤」是相同的，只不過「向右移動的圖片代碼」把每一個圖片標籤分別放置到表格的每一個單元格中，顯示的效果就不一樣了。向左移動的圖片，各個圖片之間有一個間隙；而向右移動的圖片，各個圖片之間是無縫銜接的。也就是說，只有把各個圖片標籤分別放置到表格的各個單元格之中，圖片才能夠做到無縫銜接。3、「來回走」屬於「移動方式」的範疇，製作網頁時經常用到。因為我不計劃單獨講解移動方式，所以也在這裡一併講解了。作業：1、認識上面講解的五種移動圖片代碼。熟記移動標籤名稱和圖片標籤名稱，熟悉移動標籤與文字標籤中的屬性。2、熟記無縫銜接與有縫銜接圖片代碼的區別。3、應用上面講解的圖片的五種移動代碼，各自發表一篇文章。製作時，可以替換圖片地址，可以增減圖片標籤個數，可以修改移動速度，可以修改移動屏幕的高度，可以添加移動屏幕的寬度，還可以在圖片標籤中添加圖片的標題與文字說明。

２０１２年１1 月 1 日於北京

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

本節繼續學習移動圖片，下面講解圖片的四種移動代碼。        1、原地跳動的圖片代碼：<marquee direction="up" height="150" behavior="alternate"width_="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您"src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_5.jpg" height="100"></marquee><marquee direction="up" height="150" behavior="alternate"width_="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_5.jpg" height="100"></marquee><marquee direction="up" height="150" behavior="alternate"width_="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您"src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_5.jpg" height="100"></marquee><marquee direction="up" height="150" behavior="alternate"width_="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_5.jpg" height="100"></marquee><marquee direction="up" height="150" behavior="alternate"width_="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_5.jpg" height="100"></marquee><marquee direction="up" height="150" behavior="alternate"width_="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_5.jpg" height="100"></marquee>解析：（1）原地跳動的圖片代碼，在移動標籤中，要設置「向上」的移動方向、「來回走」的移動方式和移動屏幕的寬度。移動屏幕的高度可設置也可不設置。（2）上面的代碼可以複製粘貼幾次，在粘貼的時候，必須在上一組的代碼末尾添加兩個換行標籤。（3）原地跳動的圖片規格不能太大，寬度和高度以不超過200px為宜。圖片總寬度不能超過700px，如果超過700px，圖片就不能夠在同一行顯示了。（4）原地跳動的圖片代碼，每一個移動標籤控制一個圖片。換句話說，就是在每一個移動標籤與它的尾標籤之間，只能夠放置一個圖片標籤。2、隔圖跳動的圖片代碼：<marquee direction="up" height="200" behavior="alternate"width_="90"><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><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_10.jpg" height="90"><marquee direction="up" height="200" behavior="alternate"width_="90"><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><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_10.jpg" height="90"><marquee direction="up" height="200" behavior="alternate"width_="90"><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><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_10.jpg" height="90"><marquee direction="up" height="200" behavior="alternate"width_="90"><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>解析：（1）隔圖跳動的圖片代碼，相鄰的兩個圖片標籤，一個要用移動標籤控制（或者說包裹），另一個不用移動標籤控制。如果每個圖片標籤都用移動標籤控制，那麼，相鄰的兩個移動標籤中移動屏幕的高度，一個要設置得大一點，另一個設置得要小一點。（2）上面的代碼可以複製粘貼幾次，在粘貼的時候，必須在上一組的代碼末尾添加兩個換行標籤。（3）隔圖跳動的圖片規格不能太大，寬度和高度以不超過200px為宜。圖片總寬度不能超過700px，如果超過700px，圖片就不能夠在同一行顯示了。（4）隔圖跳動的圖片代碼，每一個移動標籤控制一個圖片。換句話說，就是在每一個移動標籤與它的尾標籤之間，只能夠放置一個圖片標籤。3、單圖移動橫排版代碼：<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>解析：（1）單圖移動橫排版代碼，每個圖片要用相同的移動標籤控制。各圖片寬度之和不能超過700px。（2）上面的代碼可以複製粘貼幾次，在粘貼的時候，必須在上一組的代碼末尾添加兩個換行標籤。（3）單圖移動橫排版的圖片規格不能太大，寬度和高度以不超過200px為宜。不能超過700px，圖片總寬度如果超過700px，圖片就不能夠在同一行顯示了。（4）單圖移動橫排版的圖片代碼，每一個移動標籤控制一個圖片。換句話說，就是在每一個移動標籤與它的尾標籤之間，只能夠放置一個圖片標籤。4、單圖移動豎排版代碼：<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><br><br><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><br><br><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><br><br><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><br><br><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><br><br><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>解析：1、單圖移動豎排版代碼，把「單圖移動橫排版代碼」中每個移動標籤的尾標籤後面添加兩個換行標籤即可（最後一個移動標籤不添加）。2、單圖移動橫排版的圖片代碼，每一個移動標籤控制一個圖片。換句話說，就是在每一個移動標籤與它的尾標籤之間，只能夠放置一個圖片標籤。3、前面的三種移動圖片代碼，常常用來製作小模塊，作為文章中的小插圖或者分割線使用。作業：1、繼續熟悉移動標籤名稱和圖片標籤名稱，熟悉移動標籤與文字標籤中的屬性。2、應用上面講解的四種移動圖片代碼，各製作一篇文章。

代碼入門教程(1)代碼入門教程(2)代碼入門教程(3)代碼入門教程(4)代碼入門教程(5)代碼入門教程(6)代碼入門教程(7)代碼入門教程(8)代碼入門教程(9)代碼入門教程(10)代碼入門教程(11)

２０１２年１０月2 6 日於北京
推薦閱讀：