卡尼尔美业(武汉)科技有限公司-代码入门教程(15)
你的位置:卡尼尔美业(武汉)科技有限公司 > 解决方案 > 代码入门教程(15)
代码入门教程(15)
发布日期:2022-08-17 21:06    点击次数:118

图片

图片

第  二  章    标  签  应  用第十五节  移动图片(7)

图片

本节继续学习移动图片。下面讲解图片的两种移动代码。要深刻领会标签中的内容,学会应用这些移动标签。一、交替展示的图片代码:<table border="2" cellSpacing="25" cellPadding="0" width="600"background="http://image9.360doc.com/DownloadImg/2010/05/0916/3145880_2.gif" align="center"><tbody><tr><td><table border="0" cellSpacing="10" borderColorLight="#6c3365"borderColorDark="#6c3365" cellPadding="0" width="100%"background="http://image9.360doc.com/DownloadImg/2010/05/0916/3145880_3.jpg" bortercolor="#000000"><tbody><tr><td><table border="0" cellSpacing="0" width="100%" background="http://image9.360doc.com/DownloadImg/2010/05/0916/3145880_4.jpg"><tbody><tr><td><div align="center"><table border="0" cellSpacing="20" width="100%" background="http://userimage3.360doc.com/12/0930/21/4127803_201209302127430102.jpg"><tbody><tr><td><div align="center"><table border="0" cellPadding="0" width="600" background="http://image9.360doc.com/DownloadImg/2010/05/0916/3145880_1.jpg"align="center" height="800"><tbody><tr><td><div><marquee height="800" width="600" scrollAmount="4"><marquee direction="right" height="800" width="600" scrollAmount="4"><img style="height: 800px; filter: fliph;" title="" alt="“春天没来”欢迎您" src="http://www.360doc.cn/article/http://image9.360doc.com/DownloadImg/2010/05/0916/3145880_1.jpg"width="600" height="800"></marquee></marquee> </div></td></tr></tbody></table> </div></td></tr></tbody></table> </div></td></tr></tbody></table></td></tr></tbody></table> </td></tr></tbody></table>代码解析:1、“交替展示的图片”设置了一个五层表格,在第五层表格中,放置了一个背景图片。第五层表格的单元格中,用两个移动标签控制一个图片,第一个移动标签移动方向“向左”,第二个移动标签移动方向“向右”。背景图片和单元格中的图片,是同一地址的图片(也就是同一个图片),只不过在单元格的图片标签里,添加了一个左右翻转(也叫水平翻转)代码(filter: fliph)罢了。2、我用五种不同的颜色标示各个表格的代码,以便大家能够分辨清楚各个表格。前面的四层表格中也有三处设置了背景图片,其作用有两点:(1)当设置了表格的cellSpacing(间距)属性的时候,边框会更加美丽;(2)是预防某个背景图片失效的。怕背景图片失效以后,边框不够美丽。“交替展示的图片”显示效果:展开的图片自右向左逐渐消失,下层的图片自右向左逐渐展开。两个图片如此不断循环。

图片

二、图片围绕图片转代码:<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="620" 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=http://userimage2.360doc.com/11/0613/16/4086709_201106131657330633.jpg"><img style="width: 50px; height: 50px;" src=http://userimage2.360doc.com/11/0613/16/4086709_201106131657330633.jpg><img style="width: 50px; height: 50px;" src="http://www.360doc.cn/article/http://userimage2.360doc.com/11/0613/16/4086709_201106131657330633.jpg"><img style="width: 50px; height: 50px;" src="http://www.360doc.cn/article/http://userimage2.360doc.com/11/0613/16/4086709_201106131657330633.jpg"><img style="width: 50px; height: 50px;" src="http://www.360doc.cn/article/http://userimage2.360doc.com/11/0613/16/4086709_201106131657330633.jpg"><img style="width: 50px; height: 50px;" src=http://userimage2.360doc.com/11/0613/16/4086709_201106131657330633.jpg><img style="width: 50px; height: 50px;" src="http://www.360doc.cn/article/http://userimage2.360doc.com/11/0613/16/4086709_201106131657330633.jpg"><img style="width: 50px; height: 50px;" src=http://userimage2.360doc.com/11/0613/16/4086709_201106131657330633.jpg><img style="width: 50px; height: 50px;" src="http://www.360doc.cn/article/http://userimage2.360doc.com/11/0613/16/4086709_201106131657330633.jpg"><img style="width: 50px; height: 50px;" src="http://www.360doc.cn/article/http://userimage2.360doc.com/11/0613/16/4086709_201106131657330633.jpg"><br><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://userimage2.360doc.com/11/0613/16/4086709_201106131657330633.jpg"><img style="width: 50px; height: 50px;" src=http://userimage2.360doc.com/11/0613/16/4086709_201106131657330633.jpg><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://userimage2.360doc.com/11/0613/16/4086709_201106131657330633.jpg"><img style="width: 50px; height: 50px;"src=http://userimage2.360doc.com/11/0613/16/4086709_201106131657330633.jpg><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://userimage2.360doc.com/11/0613/16/4086709_201106131657330633.jpg"><img style="width: 50px; height: 50px;"src=http://userimage2.360doc.com/11/0613/16/4086709_201106131657330633.jpg><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://userimage2.360doc.com/11/0613/16/4086709_201106131657330633.jpg"><img style="width: 50px; height: 50px;"src=http://userimage2.360doc.com/11/0613/16/4086709_201106131657330633.jpg><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://userimage2.360doc.com/11/0613/16/4086709_201106131657330633.jpg"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/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="110" scrollAmount="2"><img style="width: 50px; height: 50px;"src=http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6><img style="width: 50px; height: 50px;"src=http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><br><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image37.360doc.com/DownloadImg/2011/09/1821/17743727_6"></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="200"type="application/x-shockwave-flash" width="350"src="http://www.360doc.cn/article/http://tmflash.6000y.com/flashxuexi/QQ249181841-2013.swf&#10;"quality="high" menu="false" wmode="transparent"></p></td></tr></tbody></table><td width="120"><marquee direction="down" height="180" width="110"scrollAmount="2"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image20.360doc.com/DownloadImg/2010/12/1915/7786064_1.gif"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image20.360doc.com/DownloadImg/2010/12/1915/7786064_1.gif"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image20.360doc.com/DownloadImg/2010/12/1915/7786064_1.gif"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image20.360doc.com/DownloadImg/2010/12/1915/7786064_1.gif"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image20.360doc.com/DownloadImg/2010/12/1915/7786064_1.gif"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image20.360doc.com/DownloadImg/2010/12/1915/7786064_1.gif"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image20.360doc.com/DownloadImg/2010/12/1915/7786064_1.gif"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image20.360doc.com/DownloadImg/2010/12/1915/7786064_1.gif"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image20.360doc.com/DownloadImg/2010/12/1915/7786064_1.gif"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image20.360doc.com/DownloadImg/2010/12/1915/7786064_1.gif"><br><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image20.360doc.com/DownloadImg/2010/12/1915/7786064_1.gif"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image20.360doc.com/DownloadImg/2010/12/1915/7786064_1.gif"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image20.360doc.com/DownloadImg/2010/12/1915/7786064_1.gif"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image20.360doc.com/DownloadImg/2010/12/1915/7786064_1.gif"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image20.360doc.com/DownloadImg/2010/12/1915/7786064_1.gif"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image20.360doc.com/DownloadImg/2010/12/1915/7786064_1.gif"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image20.360doc.com/DownloadImg/2010/12/1915/7786064_1.gif"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image20.360doc.com/DownloadImg/2010/12/1915/7786064_1.gif"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image20.360doc.com/DownloadImg/2010/12/1915/7786064_1.gif"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image20.360doc.com/DownloadImg/2010/12/1915/7786064_1.gif"></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="http://www.360doc.cn/article/http://image50.360doc.com/DownloadImg/2012/03/1806/22396772_4.jpg"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image50.360doc.com/DownloadImg/2012/03/1806/22396772_4.jpg"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image50.360doc.com/DownloadImg/2012/03/1806/22396772_4.jpg"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image50.360doc.com/DownloadImg/2012/03/1806/22396772_4.jpg"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image50.360doc.com/DownloadImg/2012/03/1806/22396772_4.jpg"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image50.360doc.com/DownloadImg/2012/03/1806/22396772_4.jpg"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image50.360doc.com/DownloadImg/2012/03/1806/22396772_4.jpg"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image50.360doc.com/DownloadImg/2012/03/1806/22396772_4.jpg"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image50.360doc.com/DownloadImg/2012/03/1806/22396772_4.jpg"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image50.360doc.com/DownloadImg/2012/03/1806/22396772_4.jpg"><br><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image50.360doc.com/DownloadImg/2012/03/1806/22396772_4.jpg"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image50.360doc.com/DownloadImg/2012/03/1806/22396772_4.jpg"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image50.360doc.com/DownloadImg/2012/03/1806/22396772_4.jpg"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image50.360doc.com/DownloadImg/2012/03/1806/22396772_4.jpg"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image50.360doc.com/DownloadImg/2012/03/1806/22396772_4.jpg"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image50.360doc.com/DownloadImg/2012/03/1806/22396772_4.jpg"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image50.360doc.com/DownloadImg/2012/03/1806/22396772_4.jpg"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image50.360doc.com/DownloadImg/2012/03/1806/22396772_4.jpg"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image50.360doc.com/DownloadImg/2012/03/1806/22396772_4.jpg"><img style="width: 50px; height: 50px;"src="http://www.360doc.cn/article/http://image50.360doc.com/DownloadImg/2012/03/1806/22396772_4.jpg"></marquee></td></tr></tbody></table></td></tr></tbody></table></div></center>效果图:http://www.360doc.com/content/12/0725/17/4127803_226425534.shtml代码解析:1、“图片围绕图片转”在二重表格中放入了三个表格。2、第一个表格的单元格内放入了向左移动的20个小图片,放入的小图片分为两行。3、第二个表格分为三个单元格。第一个单元格内放入了向上移动的20个小图片,海思科放入的小图片分为两列;第二个单元格内放入了一个表格。表格的单元格中输入了一段文字:“'春天没来’欢迎您”,并插入了一个动画图片;第三个单元格内放入了向下移动的20个小图片,放入的小图片分为两列。4、第三个表格放入了向右移动的20个小图片,放入的小图片分为两行。作业:1、应用上面的两种代码,各制作一篇文章。2、制作“交替展示的图片”时,替换图片以后,一定要把上面代码中的“表格规格”、“背景图片规格”都修改得和你选择的图片规格相一致,解决方案这样制作出来的网页比较美观。3、“图片围绕图片转”中的小图片,可以减少小图片的个数,把小图片的规格加大。可以应用已经学过的代码知识,任意修改上面的代码,以便发挥自己的创作能力。但是有一条原则,必须观察显示的实际效果,以效果好为标准。

图片

图片

2012年11月9日于北京

图片

图片

图片

图片

第  二  章     标  签  应  用第十六节  移动图片(8)本节继续学习图片的移动。下面讲解两种“交替展示的图片”代码和“图中图 移动图”代码。要深刻领会标签中的内容,学会应用这些移动标签。一、交替展示的图片:代码1:<table border="2" cellSpacing="15" cellPadding="0" width="600"background=http://image9.360doc.com/DownloadImg/2010/05/0916/3145880_2.gif"align="center"><tbody><tr><td><table border="0" cellSpacing="10"borderColorLight="#6c3365" borderColorDark="#6c3365" cellPadding="0" width="100%"background=http://image9.360doc.com/DownloadImg/2010/05/0916/3145880_3.jpg bortercolor="#000000"><tbody><tr><td><table border="0" cellSpacing="0" width="100%"background=http://image9.360doc.com/DownloadImg/2010/05/0916/3145880_4.jpg"><tbody><tr><td><table style="border: 1px double white; left: 0px;overflow: hidden;" cellSpacing="0" cellPadding="0"width="479" height="270"><tbody><tr><td align="center"><table border="0" cellPadding="0" width="600"background="http://image9.360doc.com/DownloadImg/2010/05/0916/3145880_1.jpg" align="center"height="800"><tbody><tr><td><marquee direction="right" height="800" width="600" scrollAmount="4"><marquee height="800" width="600" scrollAmount="4"><img style="height: 800px; filter: fliph;" title=""alt="“春天没来”欢迎您" src=http://image9.360doc.com/DownloadImg/2010/05/0916/3145880_1.jpgwidth="600" height="800"></marquee></marquee></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table>代码解析:此代码设置了一个五重表格。在第五层表格的表格标签中设置了一个背景图片;在单元格中放入了一个由两个移动标签控制的图片,这个图片是背景图片的左右翻转图片。两个移动标签的移动方向,一个“向左”,另一个“向右”。显示效果:背景图片与单元格中的图片交替展示。比较一下,此图片与上一节的交替展示的图片显示效果有何不同?(提示:图片的移动方向。)代码2:<table border="0" cellPadding="0" width="800"background=http://image16.360doc.com/DownloadImg/2010/10/2620/6309818_1.jpgheight="600"><tbody><tr><td><div><marquee direction="down" height="600" width="800" scrollAmount="4"><marquee direction="up" height="600" width="800"scrollAmount="4"><img style="height: 600px; filter: alpha WIDTH: 800px;" alt="春天没来"src=http://image16.360doc.com/DownloadImg/2010/10/2620/6309818_4.jpgwidth="800" height="600" ></marquee></marquee></div></td></tr></tbody></table>二、图中图 移动图 代码:<table style="width: 910px; height: 606px;" border="5" cellSpacing="0"borderColor="#990030" cellPadding="2"background="http://image35.360doc.com/DownloadImg/2011/09/0119/16863193_3.jpg"align="center"><tbody><tr><td><marquee style="width: 790px; height: 500px;" direction="up"behavior="alternate" scrollAmount="5"><marquee height="317" behavior="alternate" width="790" scrollAmount="5"><img style="filter: alpha(opacity=100,style=2);"src="http://www.360doc.cn/article/http://image32.360doc.com/DownloadImg/2011/07/1211/14116499_6" width="250"></marquee></marquee></td></tr></tbody></table>代码解析:1、此代码设置一个表格,表格中放入一个背景图片(表格的规格一定要和背景图片的规格相同),单元格中放入一个图片。2、背景图片最好是规格大一些的风景图片;3、第一个移动标签,移动方向“向上”,移动方式“来回走”;4、第二个移动标签,移动方向“向左”,移动方式“来回走”。第二个移动标签的“移动屏幕宽度”可以和第一个移动标签的移动屏幕宽度相同,移动高度,必须小于第一个移动标签的移动屏幕高度。5、两个移动标签中的移动速度最好相同。6、表格的规格要比移动屏幕的规格大一些。作业:应用上面的两种移动代码,各制作一篇文章。代码入门教程(1)代码入门教程(2)代码入门教程(3)代码入门教程(4)代码入门教程(5)代码入门教程(6)代码入门教程(7)代码入门教程(8)代码入门教程(9)代码入门教程(10)代码入门教程(11)代码入门教程(12)代码入门教程(13)代码入门教程(14)

图片

2012年11月9日于北京

相关资讯