首页 成功案例 公司要闻
代码入门教程(16)
发布日期:2022-08-17 00:26    点击次数:172

图片

图片

图片

图片

第 二 章 标 签 应 用第十七节 移动图片(9)

图片

本节继续学习移动图片。图书馆首页,是图书馆的门面。把它装扮得漂漂亮亮的,会吸引更多的朋友来访问你的图书馆。而图书馆首页的顶图,是一个不可或缺的装扮内容。在网络中相互流传的许多顶图,其实只能算个顶图素材,因为没有设置定位代码,所以根本放置不到首页的顶栏中去。本节讲解图书馆中的三种移动顶图代码,要深刻领会代码中的内容,学会应用这些代码制作顶图,把你的图书馆门面装扮得漂漂亮亮的。代码1:(普通图片顶图代码)<DIV class=divBorderStyle style="LEFT: 0px; POSITION:absolute; TOP: 24px"><MARQUEE style="LEFT: 0px; WIDTH: 1345px"scrollAmount=3 behavior=alternate height=270><TABLE style="WIDTH: 1340px" height=280 cellSpacing=0cellPadding=0 border=0><TBODY><TR><TD> <IMG height=280 src="http://www.360doc.cn/article/图片地址1" width=345 border=0> </TD><TD> <IMG height=280 src="http://www.360doc.cn/article/图片地址2" width=345 border=0> </TD><TD> <IMG height=280 src="http://www.360doc.cn/article/图片地址3" width=345 border=0> </TD><TD> <IMG height=280 src="http://www.360doc.cn/article/图片地址4" width=345 border=0> </TD><TD> <IMG height=280 src="http://www.360doc.cn/article/图片地址5" width=345 border=0> </TD><TD> <IMG height=280 src="http://www.360doc.cn/article/图片地址6" width=345 border=0> </TD></TR></TBODY></TABLE></MARQUEE></DIV>效果举例:http://www.360doc.com/content/12/0515/15/4127803_211190560.shtml代码解析:1、先设置一套表格代码(上面代码中的红色部分)。表格中单元格个数的设置,要看各个单元格中图片的宽度之和必须大于移动屏幕的宽度。表格的单元格中各放置一个图片标签。2、在这一套表格标签的上面添加一个块区标签、一个移动标签,下面添加块区标签、移动标签的尾标签。3、块区标签是对顶图图片的定位。4、在网络中寻找上你喜爱的图片,复制其地址,替换到“图片地址”处。图片地址处,可以替换为“同一个图片”的地址,也可以替换为“不同的图片”地址。

图片

代码2:(翻转图片顶图代码)<div style="left: 0px; top: 24px; position: absolute;"class="divBorderStyle"><marquee style="left: 0px; width: 1350px;" height="275"behavior="alternate" scrollAmount="3"><table style="width: 1350px;" border="0" cellSpacing="0"cellPadding="0" height="280"><tbody><tr><td><img style="border-width: 0px; margin: 0px; width: 450px;height: 275px;" border="0" alt=""src=http://image40.360doc.com/DownloadImg/2011/10/2309/18691916_4.gifwidth="450" height="275"><img style="border-width: 0px; margin: 0px;width: 450px; height: 275px; filter: FlipH;" alt=""src="http://www.360doc.cn/article/http://image40.360doc.com/DownloadImg/2011/10/2309/18691916_4.gif"><imgstyle="border-width: 0px; margin: 0px; width: 450px; height: 275px;" border="0" alt=""src=http://image40.360doc.com/DownloadImg/2011/10/2309/18691916_4.gifwidth="450" height="275"><img style="border-width: 0px; margin: 0px; width: 450px;height: 275px; filter: FlipH;" alt=""src="http://www.360doc.cn/article/http://image40.360doc.com/DownloadImg/2011/10/2309/18691916_4.gif"><imgstyle="border-width: 0px; margin: 0px; width: 450px; height: 275px;" border="0"alt="" src=http://image40.360doc.com/DownloadImg/2011/10/2309/18691916_4.gifwidth="450" height="275"><img style="border-width:0px; margin: 0px; width: 450px;height: 275px; filter: FlipH;" alt=""src="http://www.360doc.cn/article/http://image40.360doc.com/DownloadImg/2011/10/2309/18691916_4.gif"></td></tr></tbody></table></marquee></div>效果举例:http://www.360doc.com/content/12/0517/21/4127803_211755207.shtml代码解析:1、先设置一套表格标签(上面代码中的红色部分),表格的单元格中放置了六个图片标签。相邻的两个图片标签中,有一个图片标签添加了“左右翻转”图片代码filter: FlipH;" 。2、在这一套表格标签的上面添加一个移动标签和一个块区标签,下面添加了移动标签和块区标签的尾标签。3、块区标签是对顶图图片的定位。4、用上面的代码1制作的顶图,两个图片的衔接处有不太明显的衔接痕迹。代码2添加了“左右翻转”图片代码,制作的顶图就美观多了。5、在网络中寻找上你喜爱的图片,复制其地址,替换到“图片地址”处,即可制作出漂亮的移动顶图。

图片

代码3:(动画图片顶图代码)<div style="left: 0px; top: 24px; position: absolute;"class="divBorderStyle"><marquee style="left: 0px; width: 1350px;" height="280"behavior="alternate" scrollAmount="4"><table style="width: 1350px;" border="0" cellSpacing="0"cellPadding="0" height="280"><tbody><tr><td><embed height="280" type="application/x-shockwave-flash"width="350"src=http://home.invil.org/kkj941/editorImage/12284722444050871.swfwmode="transparent"><embed style="filter: fliph;" height="280"type="application/x-shockwave-flash"width="350"src=http://home.invil.org/kkj941/editorImage/12284722444050871.swfwmode="transparent"><embedheight="280" type="application/x-shockwave-flash" width="350"src="http://www.360doc.cn/article/http://home.invil.org/kkj941/editorImage/12284722444050871.swf"wmode="transparent"><embed style="filter: fliph;" height="280"type="application/x-shockwave-flash" width="350"src="http://www.360doc.cn/article/http://home.invil.org/kkj941/editorImage/12284722444050871.swf"wmode="transparent"><embed height="280" type="application/x-shockwave-flash"width="350" src=http://home.invil.org/kkj941/editorImage/12284722444050871.swfwmode="transparent"><embed style="filter: fliph;" height="280"type="application/x-shockwave-flash" width="350"src=http://home.invil.org/kkj941/editorImage/12284722444050871.swfwmode="transparent"></td></tr></tbody></table></marquee></div>效果举例:http://www.360doc.com/content/12/0527/18/4127803_214083954.shtml代码解析:1、先设置一套表格标签(上面代码中的红色部分),表格的单元格中放置了六个动画图片标签。相邻的两个动画图片标签中,有一个图片标签添加了“左右翻转”图片代码filter: FlipH;" 。2、在这一套表格标签的上面添加一个移动标签和一个块区标签,下面添加了移动标签和块区标签的尾标签。3、块区标签是对顶图图片的定位。4、动画图片标签中,要用embed代码,而不能用普通图片的img代码。5、动画图片是网络中流行的一种图片,也是人人都喜爱的一种图片。用动画图片制作的移动顶图,其效果要比用普通图片制作的顶图漂亮多了。

图片

作业:替换图片,制作几幅移动顶图。替换图片以后,要修改上面图片标签中的宽度。宽度值的确定,最好是看你使用的图片高度变为280px以后缩小了多少倍,然后把宽度也缩小相同的倍数,求出其宽度值。高度一般不作太大幅度的修改。如果想修改高度值,请参阅我撰写的《个人图书馆中的数据(原创) 》 一文。因为顶图的高度与你所使用的360图书馆提供的首页皮肤有关。代码入门教程(1)代码入门教程(2)代码入门教程(3)代码入门教程(4)代码入门教程(5)代码入门教程(6)代码入门教程(7)代码入门教程(8)代码入门教程(9)代码入门教程(10)代码入门教程(11)代码入门教程(12)代码入门教程(13)代码入门教程(14)代码入门教程(15)

图片

2012年11月11日于北京

图片

第 二 章 标 签 应 用第十八节 移动图片(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="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="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://www.360doc.cn/article/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="http://www.360doc.cn/article/http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_10.jpg" height="90"></marquee><marquee height="90" behavior="alternate" width="170"><imgtitle="春天没来欢迎您" alt="春天没来欢迎您" src="http://www.360doc.cn/article/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="http://www.360doc.cn/article/http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_10.jpg" height="90"></marquee><marquee height="90" behavior="alternate" width="170"><imgtitle="春天没来欢迎您" alt="春天没来欢迎您" src="http://www.360doc.cn/article/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="http://www.360doc.cn/article/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="http://www.360doc.cn/article/http://image36.360doc.com/DownloadImg/2011/09/0521/17098424_91.jpg" __1315228007266__="ev_5058300886"><img border="0"alt="精美的分割线——“春天没来”欢迎您" src="http://www.360doc.cn/article/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="http://www.360doc.cn/article/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="http://www.360doc.cn/article/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://www.360doc.cn/article/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="http://www.360doc.cn/article/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、“移动屏幕的宽度和高度”要根据自己选择的文章显示的页面规格情况进行修改,以效果最佳为原则。所以必须认真观察你制作的作品的显示效果,反复修改,直至效果最佳状态为止。

图片

图片

图片

2012年11月11日于北京

Powered by 佛山市鼎奥精工轴承有限公司 @2013-2022 RSS地图 HTML地图