代碼學習群簡易教程（10）

06-26

第十節移動標籤應用(2)上一節講解了20種常用的移動文字與移動圖片。這些方法是製作移動網頁的基礎，希望朋友們深刻領會，努力把它們學會學好。本節講解的內容，有「移動文字」，也有「移動圖片」。其中，絕大部分還是常用的移動網頁方式，也應該學會，能夠用這些方法製作移動網頁。一、有邊框的移動文字給移動文字添加個邊框，效果就好多了，不再有光禿禿的感覺了。看下面的兩篇代碼，比較一下有什麼不同的地方，顯示效果又有何不同。（提示：把代碼從有滾動條的邊框中「複製」出來，「粘貼」到你的圖書館首頁「撰寫」文章處的「代碼編輯」頁面中「發表」，就能夠查看「代碼」，觀察網頁的顯示「效果」了。）代碼1：<MARQUEE width_=700><DIV style="BORDER-BOTTOM: rgb(108,204,0) 10px double; BORDER-LEFT: rgb(108,204,0) 10px double; WIDTH: 2350px; BORDER-TOP: rgb(108,204,0) 10px double; BORDER-RIGHT: rgb(108,204,0) 10px double"><A href="http://www.360doc.com/content/12/0315/06/4127803_194439279.shtml" target=_blank>「個人圖書館」操作方法介紹（補充版1）</A><A href="http://www.360doc.com/content/12/0315/10/4127803_194467904.shtml" target=_blank>「個人圖書館」操作方法介紹（補充版2）</A> <A href="http://www.360doc.com/content/12/0310/08/4127803_193176548.shtml" target=_blank>「頂圖」的放置方法（原創）</A> <A href="http://www.360doc.com/content/12/0201/14/4127803_183379540.shtml" target=_blank>如何把個人圖書館的快捷方式放置到桌面上</A> <A href="http://www.360doc.com/content/11/0828/20/4127803_144075423.shtml" target=_blank>個人圖書館操作方法介紹</A> <A href="http://www.360doc.com/content/11/0916/21/4127803_148840493.shtml" target=_blank>文件夾設置</A> <A href="http://www.360doc.com/content/11/0907/22/4127803_146585608.shtml" target=_blank>獻給您的禮物</A> </DIV></MARQUEE>代碼2：<DIV style="BORDER-BOTTOM: rgb(108,204,0) 10px double; BORDER-LEFT: rgb(108,204,0) 10px double; WIDTH: 700px; BORDER-TOP: rgb(108,204,0) 10px double; BORDER-RIGHT: rgb(108,204,0) 10px double"><MARQUEE><A href="http://www.360doc.com/content/12/0315/06/4127803_194439279.shtml" target=_blank>「個人圖書館」操作方法介紹（補充版1）</A> <A href="http://www.360doc.com/content/12/0315/10/4127803_194467904.shtml" target=_blank>「個人圖書館」操作方法介紹（補充版2）</A> <A href="http://www.360doc.com/content/12/0310/08/4127803_193176548.shtml" target=_blank>「頂圖」的放置方法（原創）</A> <A href="http://www.360doc.com/content/12/0201/14/4127803_183379540.shtml" target=_blank>如何把個人圖書館的快捷方式放置到桌面上</A> <A href="http://www.360doc.com/content/11/0828/20/4127803_144075423.shtml" target=_blank>個人圖書館操作方法介紹</A> <A href="http://www.360doc.com/content/11/0916/21/4127803_148840493.shtml" target=_blank>文件夾設置</A> <A href="http://www.360doc.com/content/11/0907/22/4127803_146585608.shtml" target=_blank>獻給您的禮物</A></MARQUEE></DIV>代碼解析：「代碼1」，移動標籤在最外圍。用「移動標籤」控制「塊區標籤」，控制每一個「鏈接標籤」、每一個「強調標籤」、每一個「文字標籤」和「文字內容」。移動屏幕的寬度為700px，高度「預設」（就是不設置高度，採用系統默認的高度。）。塊區標籤中設置了四條邊框線的顏色、寬度與樣式。邊框線的設置是從下邊框開始，按順時針方向設置的。即：下邊框→左邊框→上邊框→右邊框。塊區標籤中設置了2350px的寬度，以保證文字內容真好放下。顯示效果：邊框線連同文字都在移動屏幕中移動。因此，在移動過程的中途，只能夠看到上下邊框線，而看不到左右邊框線。「代碼2」，塊區標籤在最外圍。用「塊區標籤」控制「移動標籤」，控制每一個「鏈接標籤」、每一個「強調標籤」、每一個「文字標籤」和「文字內容」。塊區標籤中設置了四條邊框線的顏色、寬度與樣式。邊框線的設置是從下邊框開始，按順時針方向設置的。即：下邊框→左邊框→上邊框→右邊框。塊區標籤中設置了700px的寬度。移動標籤的屬性一律預設，採用系統默認的屬性。也就是說，「移動方向」為「向左」移動，「移動速度」為「6」，移動屏幕的「寬度」為「700px」，「高度」為「文字的行高」。顯示效果：文字在邊框中移動。因此，在移動過程的始終，都能夠看到四條邊框線。二、有背景顏色的移動文字代碼：<DIV style="BACKGROUND-COLOR: #88ff88" ><MARQUEE><A href="http://www.360doc.com/content/12/0315/06/4127803_194439279.shtml" target=_blank>「個人圖書館」操作方法介紹（補充版1）</A> <A href="http://www.360doc.com/content/12/0315/10/4127803_194467904.shtml" target=_blank>「個人圖書館」操作方法介紹（補充版2）</A> <A href="http://www.360doc.com/content/12/0310/08/4127803_193176548.shtml" target=_blank>「頂圖」的放置方法（原創）</A> <A href="http://www.360doc.com/content/12/0201/14/4127803_183379540.shtml" target=_blank>如何把個人圖書館的快捷方式放置到桌面上</A> <A href="http://www.360doc.com/content/11/0828/20/4127803_144075423.shtml" target=_blank>個人圖書館操作方法介紹</A> <A href="http://www.360doc.com/content/11/0916/21/4127803_148840493.shtml" target=_blank>文件夾設置</A> <A href="http://www.360doc.com/content/11/0907/22/4127803_146585608.shtml" target=_blank>獻給您的禮物</A></MARQUEE></DIV>背景顏色：style="BACKGROUND-COLOR: #88ff88"，可以設置在「塊區標籤」中，也可以設置在「移動標籤」中。三、有背景圖片的移動文字<DIV><MARQUEE style="BACKGROUND: url(http://image4.360doc.com/DownloadImg/2009/3/12/92346_2786131_12.jpg)"><A href="http://www.360doc.com/content/12/0315/06/4127803_194439279.shtml" target=_blank>「個人圖書館」操作方法介紹（補充版1）</A> <A href="http://www.360doc.com/content/12/0315/10/4127803_194467904.shtml" target=_blank>「個人圖書館」操作方法介紹（補充版2）</A> <A href="http://www.360doc.com/content/12/0310/08/4127803_193176548.shtml" target=_blank>「頂圖」的放置方法（原創）</A> <A href="http://www.360doc.com/content/12/0201/14/4127803_183379540.shtml" target=_blank>如何把個人圖書館的快捷方式放置到桌面上</A> <A href="http://www.360doc.com/content/11/0828/20/4127803_144075423.shtml" target=_blank>個人圖書館操作方法介紹</A> <A href="http://www.360doc.com/content/11/0916/21/4127803_148840493.shtml" target=_blank>文件夾設置</A> <A href="http://www.360doc.com/content/11/0907/22/4127803_146585608.shtml" target=_blank>獻給您的禮物</A></MARQUEE></DIV>背景圖片：style="BACKGROUND: url(http://image4.360doc.com/DownloadImg/2009/3/12/92346_2786131_12.jpg)"，可以設置在「塊區標籤」中，也可以設置在「移動標籤」中。四、有自定義滑鼠指針的移動文字代碼：<DIV><MARQUEE style="BACKGROUND: url(http://image4.360doc.com/DownloadImg/2009/3/12/92346_2786131_12.jpg); CURSOR: url(http://pic.51.com/shop/product/sbys/ani/1000400013.ani), auto"><A href="http://www.360doc.com/content/12/0315/06/4127803_194439279.shtml" target=_blank>「個人圖書館」操作方法介紹（補充版1）</A> <A href="http://www.360doc.com/content/12/0315/10/4127803_194467904.shtml" target=_blank>「個人圖書館」操作方法介紹（補充版2）</A> <A href="http://www.360doc.com/content/12/0310/08/4127803_193176548.shtml" target=_blank>「頂圖」的放置方法（原創）</A> <A href="http://www.360doc.com/content/12/0201/14/4127803_183379540.shtml" target=_blank>如何把個人圖書館的快捷方式放置到桌面上</A> <A href="http://www.360doc.com/content/11/0828/20/4127803_144075423.shtml" target=_blank>個人圖書館操作方法介紹</A> <A href="http://www.360doc.com/content/11/0916/21/4127803_148840493.shtml" target=_blank>文件夾設置</A> <A href="http://www.360doc.com/content/11/0907/22/4127803_146585608.shtml" target=_blank>獻給您的禮物</A></MARQUEE></DIV>自定義滑鼠指針：style="BACKGROUND: url(http://image4.360doc.com/DownloadImg/2009/3/12/92346_2786131_12.jpg); CURSOR: url(http://pic.51.com/shop/product/sbys/ani/1000400013.ani), auto"五、有css定位樣式的移動文字代碼：<DIV><MARQUEE style="POSITION: absolute; WIDTH: 700px; TOP: 100px; LEFT: 0px"><A href="http://www.360doc.com/content/12/0315/06/4127803_194439279.shtml" target=_blank>「個人圖書館」操作方法介紹（補充版1）</A> <A href="http://www.360doc.com/content/12/0315/10/4127803_194467904.shtml" target=_blank>「個人圖書館」操作方法介紹（補充版2）</A> <A href="http://www.360doc.com/content/12/0310/08/4127803_193176548.shtml" target=_blank>「頂圖」的放置方法（原創）</A> <A href="http://www.360doc.com/content/12/0201/14/4127803_183379540.shtml" target=_blank>如何把個人圖書館的快捷方式放置到桌面上</A> <A href="http://www.360doc.com/content/11/0828/20/4127803_144075423.shtml" target=_blank>個人圖書館操作方法介紹</A> <A href="http://www.360doc.com/content/11/0916/21/4127803_148840493.shtml" target=_blank>文件夾設置</A> <A href="http://www.360doc.com/content/11/0907/22/4127803_146585608.shtml" target=_blank>獻給您的禮物</A></MARQUEE></DIV>css定位樣式：style="POSITION: absolute; WIDTH: 700px; TOP: 100px; LEFT: 0px"六、「進進退退」的文字「進進退退」的文字是用兩個移動標籤控制文字內容。第一個移動標籤設置「來回走」的移動方式，第二個移動標籤設置「移動屏幕寬度」（「移動屏幕的寬度」要設置得小一點）。其餘的屬性都可以「預設」。代碼：<MARQUEE behavior=alternate><MARQUEE width_=150>我的效果，進進退退。</MARQUEE></MARQUEE>

七、「跳著前進」的文字「跳著前進」的文字，應用了移動標籤「延時屬性」的特點，把「移動速度」與「間隔時間」都設置得非常大，製作成為一種特殊的移動文字效果。代碼：<MARQUEE scrollAmount=100 scrollDelay=500>跳著向前進</MARQUEE>八、飛舞的文字：設置要點：「飛舞」的文字，用8個「向上」移動的移動標籤「分別」控制一行文字。移動標籤中設置了「來回走」的移動方式，設置了「移動屏幕的高度與寬度」。相鄰的兩個移動標籤，移動屏幕的高度不同。然後，把這些內容放置到一個設置了「向右移動的」、「來回走」移動方式的移動標籤中。把以上內容都放置到「設置了背景顏色的表格中」。（「表格標籤」，在以後的教程中我專門講解。）「飛舞」的文字，並沒有設置「豎排版的樣式」，卻製作出了豎排版的效果。其要點是：8個「向上」移動的移動標籤的「移動屏幕寬度」設置得非常小，只有40px的寬度，真好容納一個文字。「飛舞」的文字，代碼中應用了「英語名稱」顏色，你也可以把它修改為「十六進位」顏色。「英語名稱」顏色，請你參閱我整理收藏的這篇文章：http://www.360doc.com/content/13/0703/17/4127803_297406586.shtml「飛舞」的文字代碼：<TABLE border=5 cellSpacing=2 cellPadding=2 width_=680 bgColor=#000000><TBODY><TR><TD><MARQUEE direction=right behavior=alternate scrollAmount=5><MARQUEE direction=up height=300 behavior=alternate width_=40>春天沒來</MARQUEE><MARQUEE direction=up height=200 behavior=alternate width_=30>歡迎您 !</MARQUEE><MARQUEE direction=up height=300 behavior=alternate width_=40>歡迎瀏覽</MARQUEE><MARQUEE direction=up height=200 behavior=alternate width_=40>歡迎收藏</MARQUEE><MARQUEE direction=up height=300 behavior=alternate width_=40>歡迎指導</MARQUEE><MARQUEE direction=up height=200 behavior=alternate width_=40>你的光臨</MARQUEE><MARQUEE direction=up height=300 behavior=alternate width_=40>我的榮幸</MARQUEE><MARQUEE direction=up height=200 behavior=alternate width_=40>！ ！ ！ ！</MARQUEE></MARQUEE></TD></TR></TBODY></TABLE>九、神奇的移動標籤：這是一篇特效移動文字！所以有此特效的道理，我也說不清楚。你來觀賞一下吧。如果你感興趣，就探討探討。網頁地址：http://www.360doc.com/content/13/0316/18/4127803_271907682.shtml十、豎排版移動文字：這是DLLC1234老師製作的一篇豎排版移動文字，效果非常美！代碼：<div align=center> <marquee height=400 behavior=slide width_=900 loop=1 scrollAmount=1 scrollDelay=100><marquee style="WRITING-MODE: tb-rl; LINE-HEIGHT: 120%" direction=up height=400 width_=900 scrollAmount=1 scrollDelay=100>北國風光， 千里冰封， 萬里雪飄。 望長城內外， 惟餘莽莽； 大河上下， 頓失滔滔。 山舞銀蛇， 原馳蠟象， 欲與天公試比高。 須晴日， 看紅妝素裹， 分外妖嬈。 江山如此多嬌， 引無數英雄競折腰。 惜秦皇漢武， 略輸文采； 唐宗宋祖， 稍遜風騷。 一代天驕， 成吉思汗， 只識彎弓射大雕。 俱往矣， 數風流人物， 還看今朝。</marquee></marquee></div>「豎排版」移動文字，是用兩個移動標籤共同控制幾行文字內容。第一個移動標籤中要設置：移動屏幕的寬度與高度、滑動一次的移動方式與延時屬性。移動方向為「向左」移動（可以預設），移動速度為「1」，延時屬性為100。第二個移動中要設置：移動屏幕的寬度與高度，延時屬性，移動方向（向上），移動速度（一般設置為「1」），還可以設置「行高」與「字距」等屬性。文字要用「居左對齊」的「段落標籤」或者「塊區標籤」控制。注意：1、第一個移動標籤中的移動方向必須是「向左」，移動次數只能是「一次」。2、第二個移動標籤中必須設置豎排版樣式：style="WRITING-MODE: tb-rl; 移動方向必須是「向上」。移動標籤中設置了豎排版樣式，「移動方向」與「移動文字」就順時針旋轉90度了。「向上」移動的實際效果就變為「向右」移動了；文字也有橫排版變為豎排版了。橫排版文字的排版順序是：「從左到右，從上到下。」而豎排版文字的排版順序是：從右到左，從上到下。3、文字內容放在了「居左」對齊的段落中，實際效果則變為「居上」對齊了。網頁地址：http://www.360doc.com/content/12/0317/19/4127803_195202612.shtml

十一、有邊框的移動圖片有邊框的移動圖片可用三種形式表示：代碼1：<MARQUEE style="BORDER-BOTTOM: rgb(108,204,0) 10px double; BORDER-LEFT: rgb(108,204,0) 10px double; WIDTH: 700px; BORDER-TOP: rgb(108,204,0) 10px double; BORDER-RIGHT: rgb(108,204,0) 10px double" width_=700><IMG style="BORDER-RIGHT-WIDTH: 0px; MARGIN: 0px; WIDTH: 211px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; HEIGHT: 205px; BORDER-LEFT-WIDTH: 0px" alt=喜字窗花剪紙與喜上眉梢窗花圖案 src="https://www.getit01.com/getimg_360.php?url=http://image29.360doc.com/DownloadImg/2011/05/2512/12104953_1.jpg"> <IMG style="BORDER-RIGHT-WIDTH: 0px; MARGIN: 0px; WIDTH: 211px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; HEIGHT: 205px; BORDER-LEFT-WIDTH: 0px" alt=喜字窗花剪紙與喜上眉梢窗花圖案 src="https://www.getit01.com/getimg_360.php?url=http://image29.360doc.com/DownloadImg/2011/05/2512/12104953_2.jpg"> <IMG alt=喜字窗花剪紙與喜上眉梢窗花圖案 src="https://www.getit01.com/getimg_360.php?url=http://image29.360doc.com/DownloadImg/2011/05/2512/12104953_3.jpg"> <IMG alt=喜字窗花剪紙與喜上眉梢窗花圖案 src="https://www.getit01.com/getimg_360.php?url=http://image29.360doc.com/DownloadImg/2011/05/2512/12104953_4.jpg"> <IMG alt=喜字窗花剪紙與喜上眉梢窗花圖案 src="https://www.getit01.com/getimg_360.php?url=http://image29.360doc.com/DownloadImg/2011/05/2512/12104953_5.jpg"> <IMG alt=喜字窗花剪紙與喜上眉梢窗花圖案 src="https://www.getit01.com/getimg_360.php?url=http://image29.360doc.com/DownloadImg/2011/05/2512/12104953_6.jpg"></MARQUEE>代碼2：<MARQUEE><IMG style="BORDER-BOTTOM: rgb(153,153,255) 6px double; BORDER-LEFT: rgb(153,153,255) 6px double; BORDER-TOP: rgb(153,153,255) 6px double; BORDER-RIGHT: rgb(153,153,255) 6px double" src="https://www.getit01.com/getimg_360.php?url=http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_5.jpg" width_=250> <IMG style="BORDER-BOTTOM: rgb(153,153,255) 6px double; BORDER-LEFT: rgb(153,153,255) 6px double; BORDER-TOP: rgb(153,153,255) 6px double; BORDER-RIGHT: rgb(153,153,255) 6px double" src="https://www.getit01.com/getimg_360.php?url=http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_6.jpg" width_=250> <IMG style="BORDER-BOTTOM: rgb(153,153,255) 6px double; BORDER-LEFT: rgb(153,153,255) 6px double; BORDER-TOP: rgb(153,153,255) 6px double; BORDER-RIGHT: rgb(153,153,255) 6px double" src="https://www.getit01.com/getimg_360.php?url=http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_8.jpg" width_=250> <IMG style="BORDER-BOTTOM: rgb(153,153,255) 6px double; BORDER-LEFT: rgb(153,153,255) 6px double; BORDER-TOP: rgb(153,153,255) 6px double; BORDER-RIGHT: rgb(153,153,255) 6px double" src="https://www.getit01.com/getimg_360.php?url=http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_9.jpg" width_=250> <IMG style="BORDER-BOTTOM: rgb(153,153,255) 6px double; BORDER-LEFT: rgb(153,153,255) 6px double; BORDER-TOP: rgb(153,153,255) 6px double; BORDER-RIGHT: rgb(153,153,255) 6px double" src="https://www.getit01.com/getimg_360.php?url=http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_10.jpg" width_=250></MARQUEE>代碼3：<MARQUEE width_=700><DIV style="BORDER-BOTTOM: rgb(108,204,0) 10px double; BORDER-LEFT: rgb(108,204,0) 10px double; WIDTH: 1290px; BORDER-TOP: rgb(108,204,0) 10px double; BORDER-RIGHT: rgb(108,204,0) 10px double"><IMG style="BORDER-RIGHT-WIDTH: 0px; MARGIN: 0px; WIDTH: 211px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; HEIGHT: 205px; BORDER-LEFT-WIDTH: 0px" alt=喜字窗花剪紙與喜上眉梢窗花圖案 src="https://www.getit01.com/getimg_360.php?url=http://image29.360doc.com/DownloadImg/2011/05/2512/12104953_1.jpg"> <IMG style="BORDER-RIGHT-WIDTH: 0px; MARGIN: 0px; WIDTH: 211px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; HEIGHT: 205px; BORDER-LEFT-WIDTH: 0px" alt=喜字窗花剪紙與喜上眉梢窗花圖案 src="https://www.getit01.com/getimg_360.php?url=http://image29.360doc.com/DownloadImg/2011/05/2512/12104953_2.jpg"> <IMG alt=喜字窗花剪紙與喜上眉梢窗花圖案 src="https://www.getit01.com/getimg_360.php?url=http://image29.360doc.com/DownloadImg/2011/05/2512/12104953_3.jpg"> <IMG alt=喜字窗花剪紙與喜上眉梢窗花圖案 src="https://www.getit01.com/getimg_360.php?url=http://image29.360doc.com/DownloadImg/2011/05/2512/12104953_4.jpg"> <IMG alt=喜字窗花剪紙與喜上眉梢窗花圖案 src="https://www.getit01.com/getimg_360.php?url=http://image29.360doc.com/DownloadImg/2011/05/2512/12104953_5.jpg"> <IMG alt=喜字窗花剪紙與喜上眉梢窗花圖案 src="https://www.getit01.com/getimg_360.php?url=http://image29.360doc.com/DownloadImg/2011/05/2512/12104953_6.jpg"> </DIV></MARQUEE>「代碼1」把邊框設置在了「移動標籤」中，「代碼2」把邊框設置在了「圖片標籤」中，「代碼3」把邊框設置在了「塊區標籤」中。十二、有「背景顏色」的移動圖片有「背景顏色」的移動圖片，移動屏幕的「高度」要比圖片的「高度」設置得大一些，並且在移動標籤中要設置LINE-HEIGHT: 420px屬性，其屬值要與移動屏幕的高度相同。因為大部份圖片都不是透明的，如果移動屏幕的高度與圖片的高度相同，則顯示不出「背景顏色」，設置「背景顏色」也就無意義了。如果想把移動屏幕的高度與圖片的高度設置得相同，那麼，在圖片標籤中就應該添加「羽化濾鏡」樣式了。（有關「濾鏡」的內容，我將在以後的《教程》中專門講解。）代碼：<MARQUEE style="LINE-HEIGHT: 420px; BACKGROUND-COLOR: #00ff00; HEIGHT: 420px"><IMG style="BORDER-RIGHT-WIDTH: 0px; MARGIN: 0px; WIDTH: 250px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; HEIGHT: 374px; BORDER-LEFT-WIDTH: 0px" src="https://www.getit01.com/getimg_360.php?url=http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_5.jpg" width_=250> <IMG src="https://www.getit01.com/getimg_360.php?url=http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_6.jpg" width_=250> <IMG src="https://www.getit01.com/getimg_360.php?url=http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_8.jpg" width_=250> <IMG src="https://www.getit01.com/getimg_360.php?url=http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_9.jpg" width_=250> <IMG src="https://www.getit01.com/getimg_360.php?url=http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_10.jpg" width_=250></MARQUEE>十三、有「背景圖片」的移動圖片有「背景圖片」的移動圖片，移動屏幕的「高度」要比圖片的「高度」設置得大一些，並且在移動標籤中要設置LINE-HEIGHT: 420px屬性，其屬值要與移動屏幕的高度相同。因為大部份圖片都不是透明的，如果移動屏幕的高度與圖片的高度相同，則顯示不出「背景圖片」，設置「背景圖片」也就無意義了。如果想把移動屏幕的高度與圖片的高度設置得相同，那麼，在圖片標籤中就應該添加「羽化濾鏡」樣式了。代碼：<MARQUEE style="BACKGROUND-IMAGE: url(http://image67.360doc.com/DownloadImg/2013/12/3021/37892218_1.gif); LINE-HEIGHT: 420px; HEIGHT: 420px"><IMG style="BORDER-RIGHT-WIDTH: 0px; MARGIN: 0px; WIDTH: 250px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; HEIGHT: 374px; BORDER-LEFT-WIDTH: 0px" src="https://www.getit01.com/getimg_360.php?url=http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_5.jpg" width_=250> <IMG src="https://www.getit01.com/getimg_360.php?url=http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_6.jpg" width_=250> <IMG src="https://www.getit01.com/getimg_360.php?url=http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_8.jpg" width_=250> <IMG src="https://www.getit01.com/getimg_360.php?url=http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_9.jpg" width_=250> <IMG src="https://www.getit01.com/getimg_360.php?url=http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_10.jpg" width_=250></MARQUEE>十四、有「自定義滑鼠指針」的移動圖片有「自定義滑鼠指針」的移動圖片，在移動標籤中添加：style="CURSOR: url(http://pic.51.com/shop/product/sbys/ani/1000400013.ani ), auto"代碼即可。代碼：<MARQUEE style="CURSOR: url(http://pic.51.com/shop/product/sbys/ani/1000400013.ani), auto"><IMG src="https://www.getit01.com/getimg_360.php?url=http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_6.jpg" width_=250> <IMG src="https://www.getit01.com/getimg_360.php?url=http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_8.jpg" width_=250> <IMG src="https://www.getit01.com/getimg_360.php?url=http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_9.jpg" width_=250> <IMG src="https://www.getit01.com/getimg_360.php?url=http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_10.jpg" width_=250></MARQUEE>十五、有css定位樣式的移動圖片把css定位樣式：style="POSITION: absolute; WIDTH: 740px; TOP: 150px; LEFT: 50px" ，添加到移動標籤中即可。代碼：<MARQUEE style="POSITION: absolute; WIDTH: 740px; TOP: 150px; LEFT: 50px"><IMG src="https://www.getit01.com/getimg_360.php?url=http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_6.jpg" width_=250> <IMG src="https://www.getit01.com/getimg_360.php?url=http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_8.jpg" width_=250> <IMG src="https://www.getit01.com/getimg_360.php?url=http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_9.jpg" width_=250> <IMG src="https://www.getit01.com/getimg_360.php?url=http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_10.jpg" width_=250></MARQUEE>十六、「進進退退」的圖片「進進退退」的圖片，用兩個移動標籤控制圖片。第一個移動標籤設置「來回走」的移動方式，第二個移動標籤設置移動屏幕的「寬度」，其餘的屬性都可以預設。代碼：<MARQUEE behavior=alternate><MARQUEE width_=258><IMG style="WIDTH: 258px; HEIGHT: 110px" alt=汽車火車飛機 src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/11/1118/28154211_1.jpg"></MARQUEE></MARQUEE>十七、「跳著前進」的圖片「跳著前進」的圖片設置要點同「跳著前進」的文字。代碼：<MARQUEE direction=right scrollAmount=100 scrollDelay=500><IMG alt=「春天沒來」歡迎您 src="https://www.getit01.com/getimg_360.php?url=http://image27.360doc.com/DownloadImg/2011/04/2414/11183843_1.gif"></MARQUEE>十八、飛舞的圖片「飛舞」的文字設置要點：「飛舞」的文字，用6個「向上」移動的移動標籤「分別」控制一個小圖片。移動標籤中設置了「來回走」的移動方式，設置了「移動屏幕的高度與寬度」。相鄰的兩個移動標籤，移動屏幕的高度不同。然後，用一個設置了「向右移動的」、有「來回走」移動方式的移動標籤控制這些內容。最後，把以上內容都放置到「設置了背景顏色的表格中」。代碼：<TABLE border=5 cellSpacing=2 cellPadding=2 width_=680 bgColor=#000000><TBODY><TR><TD><MARQUEE direction=right behavior=alternate scrollAmount=5><MARQUEE direction=up height=200 behavior=alternate width_=60><IMG border=0 alt=「春天沒來」歡迎您 src="https://www.getit01.com/getimg_360.php?url=http://image3.360doc.com/DownloadImg/2009/2/17/100601_2572531_2.gif" width_=60></MARQUEE><MARQUEE direction=up height=300 behavior=alternate width_=81><IMG border=0 alt=「春天沒來」歡迎您 src="https://www.getit01.com/getimg_360.php?url=http://image66.360doc.com/DownloadImg/2012/03/1221/36339056_1.jpg" width_=81></MARQUEE><MARQUEE direction=up height=200 behavior=alternate width_=40><IMG border=0 alt=「春天沒來」歡迎您 src="https://www.getit01.com/getimg_360.php?url=http://image21.360doc.com/DownloadImg/2011/01/0318/8190956_31.jpg" width_=40></MARQUEE><MARQUEE direction=up height=300 behavior=alternate width_=81><IMG border=0 alt=「春天沒來」歡迎您 src="https://www.getit01.com/getimg_360.php?url=http://image67.360doc.com/DownloadImg/2013/10/2501/37323852_2.jpg" width_=81></MARQUEE><MARQUEE direction=up height=200 behavior=alternate width_=40><IMG border=0 alt=「春天沒來」歡迎您 src="https://www.getit01.com/getimg_360.php?url=http://image52.360doc.com/DownloadImg/2012/06/0508/24621025_1.jpg" width_=40></MARQUEE><MARQUEE direction=up height=300 behavior=alternate width_=81><IMG border=0 alt=「春天沒來」歡迎您 src="https://www.getit01.com/getimg_360.php?url=http://image66.360doc.com/DownloadImg/2012/03/1221/36339056_1.jpg" width_=81></MARQUEE></MARQUEE></TD></TR></TBODY></TABLE>十九、搖搖擺擺的圖片「搖搖擺擺」的圖片設置要點：「搖搖擺擺」的圖片設置了三套移動標籤。最外層的移動標籤控制著所有的內容；中間的移動標籤控制著最裡層的移動標籤及其所控制的內容，還控制著兩個小圖片與「美好祝福送朋友」的文字內容；最裡層的移動標籤控制著分為兩行的四個小圖片。代碼：<MARQUEE behavior=alternate width_=600 scrollAmount=1 heght="400">*<MARQUEE direction=down height=400 width_=600 scrollAmount=1><MARQUEE style="WIDTH: 600px; HEIGHT: 400px" direction=up height=400 width_=600 scrollAmount=1><IMG alt=「春天沒來」歡迎您 src="https://www.getit01.com/getimg_360.php?url=http://image27.360doc.com/DownloadImg/2011/04/2414/11183843_1.gif"><IMG alt=「春天沒來」歡迎您 src="https://www.getit01.com/getimg_360.php?url=http://image27.360doc.com/DownloadImg/2011/04/2414/11183843_1.gif"> <IMG alt=「春天沒來」歡迎您 src="https://www.getit01.com/getimg_360.php?url=http://image27.360doc.com/DownloadImg/2011/04/2414/11183843_1.gif"><IMG alt=「春天沒來」歡迎您 src="https://www.getit01.com/getimg_360.php?url=http://image27.360doc.com/DownloadImg/2011/04/2414/11183843_1.gif"></MARQUEE><CENTER><IMG border=0 src="https://www.getit01.com/getimg_360.php?url=http://image52.360doc.com/DownloadImg/2012/06/0915/24730843_1.jpg">美好祝福送朋友<IMG border=0 src="https://www.getit01.com/getimg_360.php?url=http://image52.360doc.com/DownloadImg/2012/06/0915/24730843_1.jpg"></CENTER></MARQUEE></MARQUEE>二十、向左展開後向右移動的圖片「向左展開後向右移動」的圖片，是根據「豎排版移動文字」代碼修改的一種移動圖片。儘管「css的豎排版樣式」對「圖片」不起作用，然而對「移動方向」還是起作用的，也不失為是一種很美的移動圖片形式。代碼：<DIV align=center> <MARQUEE height=400 behavior=slide width_=900 loop=1 scrollAmount=1 scrollDelay=100><MARQUEE style="WRITING-MODE: tb-rl; LINE-HEIGHT: 120%" direction=up height=400 width_=900 scrollAmount=1 scrollDelay=100><IMG src="https://www.getit01.com/getimg_360.php?url=http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_8.jpg" width_=250> <IMG src="https://www.getit01.com/getimg_360.php?url=http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_9.jpg" width_=250> <IMG src="https://www.getit01.com/getimg_360.php?url=http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_6.jpg" width_=250> <IMG src="https://www.getit01.com/getimg_360.php?url=http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_5.jpg" width_=250> </MARQUEE></MARQUEE></DIV>

作業：1、「解析代碼」是學習代碼，認識「網頁代碼結構」的重要方法，也是學習代碼的一種基本功。學好這種方法，就能夠分析別人製作的網頁的代碼結構，借鑒別人製作網頁的方法。本題作業為：解析上面的20種網頁代碼，繼續熟悉標籤名稱，熟悉所用標籤的屬性屬值，體會它們的顯示效果。2、解析上面的20種網頁代碼標籤應用順序，認識網頁的代碼結構。3、挑選上面講解的你基本上能夠弄懂的幾種網頁代碼，各自製作一篇移動網頁。在實踐的過程中，總結你製作網頁的成功經驗與失敗教訓，體會應用代碼製作網頁的無窮樂趣。4、把你不懂的問題記錄下來，存入一個文件夾，待你有了一定的代碼水平之後，再回過頭來學習一下，看看你學習代碼進步的歷程。興趣是最好的老師，興趣是通向成功的橋樑。學習代碼何嘗不是如此！如果你對代碼有濃厚的興趣，就會在反覆不斷的學習實踐過程中取得一個又一個的成功，終究會邁入代碼的門檻；如果你對代碼沒有興趣，即使有再好的教材，有再好的老師，又能起到多大的作用呢？——「春天沒來」「春天沒來」編撰2014年4月21日於北京
推薦閱讀：

※圖片移動及代碼（二）
※simditor + highlight.js實現代碼高亮
※加上歌名和演唱者就可以聽到任何歌曲（附代碼，可加入博客中）
※QQ 代碼
※常用網頁特效藝術字及html代碼

TAG:學習 | 代碼 | 教程 |