移動圖片(10)

第 二 章 標 簽 應 用第十八節 移動圖片(10)

本節繼續學習移動圖片。下面講解整個文章頁面的移動代碼。

代碼:<marquee direction="up" height="350" width_="980" scrollAmount="1"> <table id="table93407659" border="1" cellSpacing="20"borderColor="#990000" borderColorDark="#ffff00" cellPadding="0" width_="665" background="http://userimage3.360doc.com/12/1001/06/4127803_201210010652090930.jpg">

<tbody>

<tr>

<td width_="98%">

<table id="table93407660" border="0" cellSpacing="1" cellPadding="0" width_="100" background="http://image38.360doc.com/DownloadImg/2011/10/0517/18251042_13.jpg">

<tbody>

<tr>

<td width_="89%"><table id="table93407661" border="1" cellSpacing="1"borderColor="#990000" borderColorDark="#ffff00"cellPadding="0" width_="289" background="http://image38.360doc.com/DownloadImg/2011/10/0517/18251042_3.jpg">

<tbody>

<tr>

<td width_="50%"><a href="http://tongenguoji.blog.163.com/edit/">

<table id="table93407662" border="1" cellSpacing="15"borderColor="#039902" width_="36%" background="http://image38.360doc.com/DownloadImg/2011/10/0517/18251042_12.jpg">

<tbody>

<tr>

<td vAlign="middle">

<table id="table93407663" border="1" cellSpacing="1"borderColorLight="#202020" borderColorDark="#000000" cellPadding="8" width_="68" background="http://image38.360doc.com/DownloadImg/2011/10/0517/18251042_10.jpg">

<tbody>

<tr>

<td>

<table id="table93407664" border="1" cellSpacing="1" borderColor="#990000" borderColorDark="#ffff00" cellPadding="0" width_="567" background="http://image38.360doc.com/DownloadImg/2011/10/0517/18251042_3.jpg">

<tbody>

<tr>

<td width_="97%">

<div align="center">

<table style="width: 570px; height: 48px;" border="0"cellSpacing="10" borderColorLight="#2954d6"borderColorDark="#2954d6" cellPadding="0" width_="570" background="http://image45.360doc.com/DownloadImg/2011/12/0117/19707544_4.gif" align="center">

<tbody>

<tr>

<td>

<table style="width: 636px; height: 500px;" border="0" cellSpacing="2" borderColor="#cccccc" cellPadding="2"width_="636" background="http://image50.360doc.com/DownloadImg/2012/03/2001/22449761_9.jpg"align="right">

<tbody>

<tr>

<td>

<table style="width: 629px; height: 500px; text-align: left;"border="0" cellSpacing="2" borderColor="#cccccc"cellPadding="2" width_="629" background="http://image50.360doc.com/DownloadImg/2012/03/2001/22449761_11.jpg"align="right">

<tbody>

<tr>

<td><font style="font-size: 29px;" color="#00ffff">

<p align="center"><font style="font-size: 32px;" color="#00ffff"><strong>代碼入門教程</strong></font></p>

<p align="center"><font style="font-size: 29px;" color="#00ffff"><strong>前言</strong></font></p>

<div align="left">  我是一個年已花甲的退休教師,一不懂代碼,二不會英語。前年,兒子給我買了一個筆記本電腦,剛開始玩的時候,連「關機」也不會,看個電子書、玩個遊戲,都十分困難。後來,又給我註冊了360doc個人圖書館,更找不著「北」了。進入網路以後,頁面中的內容五彩繽紛,這兒閃爍,那兒跳動,文字內容,五顏六色,真不知該點擊什麼地方了!然而,就是在這個圖書館中,我學到了不少的知識。現在,我不但能夠瀏覽別人的文章、收藏別人的文章,而且還學會了自己撰寫文章,編輯圖片,使用邊框,在實踐操作的過程中,我知道了那些五彩繽紛的美麗網頁,都是用代碼製作的。於是,我對代碼產生了興趣,開始學習代碼、研究代碼。經過一段時間的努力學習、刻苦鑽研,終於邁進了代碼的門檻。我已經撰寫了幾十篇關於360doc圖書館的知識和操作方法的文章,製作了幾百個個人圖書館的頂圖,還有一些底圖、圖書館首頁的模塊等作品,初步地嘗到了學習代碼的甜頭。在實踐的過程中,我認識到,代碼並不是什麼神秘的天書,也不是高不可攀的山峰,不懂英語,沒有學過系統的電腦知識,照樣可以學會代碼,用代碼製作自己喜歡的各種漂亮的網頁。<br>  在這裡,我把自己學習代碼的體會撰寫成這些文章,編輯成小冊子,陸續發表,提供給大家,用以幫助願意學習代碼而又不知從哪裡入手的朋友們,希望我的這些文章能夠對這些館友們有所幫助,引導你們步入代碼的門檻。<br>  我的這些文章,語言不一定十分規範,概念不一定非常準確。我本著這樣一條原則,力求通俗易懂,講解具體,能夠操作,使大家能夠看明白,會操作,真正起到引導入門的作用。<br>  由於本人的水平有限,文章中一定存在不少紕漏和錯誤之處,希望大家批評指正。在此我預先向給我提出寶貴意見的朋友們表示感謝。</div>

<div align="center"></div>

<div align="center"><nobr>

<marquee height="90" behavior="alternate" width_="170"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"></marquee>

<marquee direction="up" height="120" 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_10.jpg" height="90"></marquee>

<marquee height="90" behavior="alternate" width_="170"><imgtitle="春天沒來歡迎您" 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 direction="up" height="120" 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_10.jpg" height="90"></marquee>

<marquee height="90" behavior="alternate" width_="170"><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></nobr><nobr></nobr></div><nobr>

<div align="center"></div></nobr>

<div align="center"></div>

<div align="right">&nbsp;</div>

<div align="right"><a href="http://www.360doc.com/userhome/4127803" target="_blank"><img src="https://www.getit01.com/getimg_360.php?url=http://userimage2.360doc.com/12/0710/06/4127803_201207100648100037.jpg"></a></div>

<div align="right"><font style="font-size: 29px;" color="#00ffff"><strong></strong></font>&nbsp;</div>

<div align="right"><font style="font-size: 29px;" color="#00ffff"><strong>2012年10月2日於北京</strong></font></div>

<div align="center"><strong></strong>&nbsp;</div>

<div align="center"><strong><img border="0" alt="精美的分割線——「春天沒來」歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image36.360doc.com/DownloadImg/2011/09/0521/17098424_91.jpg" __1315228007266__="ev_5058300886"><img border="0"alt="精美的分割線——「春天沒來」歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image36.360doc.com/DownloadImg/2011/09/0521/17098424_91.jpg" __1315228007266__="ev_5058300886"></strong></div>

<div align="right"><strong></strong>&nbsp;</div>

<div align="left">&nbsp;</div>

<div align="center"><font style="font-size: 34px;" color="#00ffff"><strong>第一章 代碼基礎知識</strong></font></div>

<div align="center"><strong></strong>&nbsp;</div>

<div align="center"><font style="font-size: 29px;" color="#00ffff">第一節 認識撰寫文章處的兩種頁面</font></div>

<div align="center">&nbsp;</div>

<div align="left">  學習代碼,離不開實踐活動。而實踐活動,離不開編輯器。因此,我們有必要先來認識一下360doc個人圖書館中編輯器的頁面,也就是撰寫文章處的頁面。</div>

<div align="left">  「撰寫文章」處有兩種頁面,一種是「文字圖片」編輯頁面,另一種是「代碼編輯」頁面。</div>

<div align="left">  在你的圖書館首頁點擊「撰寫」按鈕,進入的頁面是「文字圖片」編輯頁面(見圖1);你再點擊一下此頁面下方的「代碼編輯」,進入的是「代碼」編輯頁面(見圖2)</div>

<div align="left"></div>

<div align="left"><font color="#00ffff"><font style="font-size: 24px;"><strong>圖1:</strong>「文字圖片」編輯頁面<font style="background-color: rgb(51, 102, 255);"><font style="background-color: rgb(0, 255, 0);"></font></font></font></font></div>

<div align="left"><font style="background-color: rgb(51, 102, 255);"><font style="font-size: 24px;background-color: rgb(0, 255, 0);" color="#00ffff"></font></font></div><font style="background-color: rgb(51, 102, 255);"><font style="background-color: rgb(0, 255, 0);">

<div align="left"><img style="border-width: 0px; margin: 0px; width: 787px; height: 420px;" src="https://www.getit01.com/getimg_360.php?url=http://userimage3.360doc.com/12/0928/09/4127803_201209280908330362.jpg">&nbsp;<font style="font-size: 24px;" size="3"><font style="background-color: rgb(255, 0, 0);"><strong>圖2<font style="font-size: 24px;">:</font></strong><font style="font-size: 24px;" size="3">「代碼」編輯頁面</font></font></font></div></font>

<div align="left"></div></font>

<div align="left">&nbsp;</div>

<div align="left"><img style="border-width: 0px; margin: 0px; width: 798px; height: 425px;" src="https://www.getit01.com/getimg_360.php?url=http://userimage3.360doc.com/12/0928/09/4127803_201209280908310065.jpg"></div>

<div align="left"></div>

<div align="left">  「文字圖片」編輯頁面是用來撰寫文章、編輯圖片使用的頁面;而「代碼編輯」頁面是用於編輯代碼、粘貼代碼使用的頁面。</div>

<div align="left"></div>

<div align="left">  「撰寫」文章頁面下方的「代碼編輯」按鈕,就是專門用於切換這兩種頁面的按鈕。在「文字圖片」編輯頁面點擊一下「代碼編輯」按鈕,就可以切換到「代碼編輯」頁面;在「代碼編輯」頁面點擊一下「代碼編輯」按鈕,就可以切換到「文字圖片」編輯頁面中。</div>

<div align="left"></div>

<div align="left">  在「代碼編輯」頁面,你可以使用代碼製作網頁,修改網頁代碼、粘貼網頁代碼。而這個「預覽」按鈕,就是讓你觀看網頁製作的實際效果的按鈕。你只要點擊一下這個按鈕,就可以看到實際效果了。在這裡我要說明的是,點擊「預覽按鈕」以後看到的效果,與「發表」以後看到的效果有時是不一致的,不要過於依賴這個頁面,點擊「發表」按鈕觀看實際效果才是最可靠的方法。</div>

<div align="left"></div>

<div align="left">  我還要說明的一點是:你在「代碼編輯」頁面編輯了你要製作的網頁代碼以後,當你再一次點擊「代碼編輯」按鈕或者點擊「發表」按鈕以後,你原來編寫的代碼,可能有部分地方已經有所改變。這是系統自動給你修改的。</div>

<div align="left"></div>

<div align="left">  要查看系統給你修改了哪些代碼,可以這樣查看:</div>

<div align="left"></div>

<div align="left">  </div>

<div align="left">  將你點擊「發表」按鈕以後發表的文章,點擊一下「修改」按鈕,然後在進入的「文章修改頁面」的下方,點擊一下「代碼編輯」按鈕,就可看到系統為你修改以後的代碼了。把這份代碼和你原來的代碼比較一下,就可以查出系統給你修改了哪些代碼了。</div>

<div align="left"></div>

<div align="left">&nbsp;</div>

<div align="center">

<table style="border-color: rgb(87, 193, 0); width: 600px;height: 100px; text-align: left; border-collapse: collapse;background-color: rgb(204, 249, 249);" border="0" cellSpacing="0" cellPadding="2" width_="500">

<tbody>

<tr style="text-align: left;">

<td>

<marquee width_="120" scrollAmount="2" scrollDelay="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="http://image21.360doc.com/DownloadImg/2010/12/2204/7861744_1.gif" width_="100" height="100" real_src="http://userimage2.360doc.com/12/0317/19/7747867_201203171904280062.jpg"></marquee></td>

<td>

<marquee width_="120" scrollAmount="2" scrollDelay="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="http://image4.360doc.com/DownloadImg/2009/8/31/159348_5434897_108.gif" width_="100" height="100" real_src="http://image52.360doc.com/DownloadImg/2012/06/1315/24828273_3"></marquee></td>

<td>

<marquee width_="120" scrollAmount="2" scrollDelay="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="http://image4.360doc.com/DownloadImg/2009/8/31/159348_5434897_12.gif" width_="100" height="100" real_src="http://image52.360doc.com/DownloadImg/2012/06/1315/24828273_4"></marquee></td>

<td>

<marquee width_="120" scrollAmount="2" scrollDelay="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="http://image4.360doc.com/DownloadImg/2009/8/31/159348_5434897_5.gif" width_="100" height="100" real_src="http://image52.360doc.com/DownloadImg/2012/06/1315/24828273_5"></marquee></td>

<td style="text-align: left;">

<div align="center">

<marquee width_="120" scrollAmount="2" scrollDelay="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="http://image4.360doc.com/DownloadImg/2009/8/31/159348_5434897_34.gif" width_="100" height="100" real_src="http://image52.360doc.com/DownloadImg/2012/06/1315/24828273_6"></marquee></div></td></tr></tbody></table></div>

<div align="center"></div>

<div align="left">  作業:</div>

<div align="left"><strong><font color="#ff0000">  </font></strong>1、認識一下<font style="font-size: 29px;" color="#00ffff" size="3">「文字圖片」編輯頁面,試著撰寫一段文章或者粘貼幾個圖片。</font></div>

<div align="left">  2、認識一下<font style="font-size: 29px;" color="#00ffff" size="3">「代碼編輯」編輯頁面,看看與「文字圖片」編輯頁面有什麼不同。</font></div>

<div align="left">  3、自己任意尋找一篇文章,複製、粘貼到「文字圖片」編輯頁面,然後點擊一下頁面下方的「代碼編輯」按鈕,獲取其代碼,認識一下代碼。</div>

<div align="right"><a href="http://www.360doc.com/userhome/4127803" target="_blank"><img src="https://www.getit01.com/getimg_360.php?url=http://userimage2.360doc.com/12/0710/06/4127803_201207100648100037.jpg"></a></div>

<div align="right"><font style="font-size: 32px;" color="#00ffff"><strong></strong></font>&nbsp;</div>

<div align="right"><font style="font-size: 32px;" color="#00ffff"><strong>2012年10月2日於北京</strong></font></div></font></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody>

<div></div></table></div></td></tr></tbody></table></td></tr></tbody></table>< /td></tr></tbody></table></a></td></tr></tbody></table></a></td></tr></tbody></table></td></tr></tbody></table></marquee>代碼解析:1、上面的代碼可以修改為左右「來回走」的移動代碼, 或者修改為「向右」移動,還可以修改為「向左」移動的移動代碼。但是,效果都不如「向上」移動的好。2、整個網頁的移動代碼比較簡單,只要把你的某篇文章的代碼粘貼到移動標籤與它的尾標籤之間就可以了。移動標籤中,移動方向最好是「向上」,移動速度的值最好是「1」。

作業:自己製作一篇整個網頁移動的文章。注意事項:1、所選文章的代碼不必修改;2、移動速度最好選擇為「1」或者「2」,不要太大,移動速度太大了效果不好。(因為文章是供別人瀏覽的,移動速度大了別人無法瀏覽。)3、「移動屏幕的寬度和高度」要根據自己選擇的文章顯示的頁面規格情況進行修改,以效果最佳為原則。所以必須認真觀察你製作的作品的顯示效果,反覆修改,直至效果最佳狀態為止。
推薦閱讀:

android studio製作.9.png圖
7個方面保養木地板 木地板保養須知-裝修寶典-裝修圖片網
大美自然瀑布小溪〖391張圖片〗
棒針編織的藤蔓花樣圖解和作品圖片|棒針編織圖解
(1)2017年最感動人的24張圖片,你看到第幾張哭了? ???

TAG:圖片 | 動圖 | 移動 |