打开APP
未登录
开通VIP,畅享免费电子书等14项超值服
开通VIP
首页
好书
留言交流
下载APP
联系客服
代码学习群简易教程(9)
春天没来
>《代码学习群教程》
2014.04.18
关注
第
九
节
移
动
标
签
应
用
(1)
上一节讲了移动标签。移动标签可以广泛地应用于文字、图片等内容。本节比较详细地讲解移动标签的应用。
比较简单的移动文字,我在上一节讲解的内容中已经提供了不少代码了,本节就不再赘述了。本节把移动文字与移动图片结合起来讲解。
1、原地跳动的文字:
“原地跳动”的文字代码,是用每一套移动标签控制一套文字标签和“一个”文字内容。移动标签中设置了“向上”的移动方向,“来回走”的移动方式,设置了移动屏幕的“宽度与高度”。文字标签中设置了“文字的行高、字体、颜色与字号”。
代码:
<DIV align=center>
<MARQUEE direction=up height=150 behavior=alternate width=60><FONT style="LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云; COLOR: #ff00ff; FONT-SIZE: 30pt"><B>原</B></FONT></MARQUEE>
<MARQUEE direction=up height=150 behavior=alternate width=60><FONT style="LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云; COLOR: #ff0000; FONT-SIZE: 30pt"><B>地</B></FONT></MARQUEE>
<MARQUEE direction=up height=150 behavior=alternate width=60><FONT style="LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云; COLOR: #0000ff; FONT-SIZE: 30pt"><B>跳</B></FONT></MARQUEE>
<MARQUEE direction=up height=150 behavior=alternate width=60><FONT style="LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云; COLOR: #ff00ff; FONT-SIZE: 30pt"><B>动</B></FONT></MARQUEE>
<MARQUEE direction=up height=150 behavior=alternate width=60><FONT style="LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云; COLOR: #ff0000; FONT-SIZE: 30pt"><B>文</B></FONT></MARQUEE>
<MARQUEE direction=up height=150 behavior=alternate width=60><FONT style="LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云; COLOR: #0000ff; FONT-SIZE: 30pt"><B>字</B></FONT></MARQUEE></DIV>
如果“删除”文字标签,把“文字”替换为“图片”,就变为“原地跳动的图片”了。
2、原地跳动的图片:
“原地跳动的图片”,其移动标签的总宽度不能超过660px。
代码:
<DIV align=center>
<MARQUEE direction=up height=150 behavior=alternate width=110><IMG title=春天没来欢迎您 alt=春天没来欢迎您 src="
http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg
" height=100></MARQUEE>
<MARQUEE direction=up height=150 behavior=alternate width=110><IMG title=春天没来欢迎您 alt=春天没来欢迎您 src="
http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg
" height=100></MARQUEE>
<MARQUEE direction=up height=150 behavior=alternate width=110><IMG title=春天没来欢迎您 alt=春天没来欢迎您 src="
http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg
" height=100></MARQUEE>
<MARQUEE direction=up height=150 behavior=alternate width=110><IMG title=春天没来欢迎您 alt=春天没来欢迎您 src="
http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg
" height=100></MARQUEE>
<MARQUEE direction=up height=150 behavior=alternate width=110><IMG title=春天没来欢迎您 alt=春天没来欢迎您 src="
http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg
" height=100></MARQUEE>
<MARQUEE direction=up height=150 behavior=alternate width=110><IMG title=春天没来欢迎您 alt=春天没来欢迎您 src="
http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg
" height=100></MARQUEE></DIV>
3、交替跳动的文字:
代码: “交替跳动”的文字代码,是用每一套移动标签控制一套文字标签与“一个”文字内容。移动标签中设置了“向上”的移动方向,“来回走”的移动方式,设置了移动屏幕的“宽度”。相邻的两个移动标签,一个设置了高度,另一个采用系统默认的高度(也就是不设置高度)。文字标签中设置了“文字的字体、颜色与字号”。
<MARQUEE direction=up height=160 behavior=alternate width=80><FONT style="FONT-FAMILY: 隶书,SimLi" color=#ff0000 size=6>交</FONT></MARQUEE>
<MARQUEE direction=up behavior=alternate width=80><FONT style="FONT-FAMILY: 隶书,SimLi" color=#0000ff size=6>替</FONT></MARQUEE>
<MARQUEE direction=up height=160 behavior=alternate width=80><FONT style="FONT-FAMILY: 隶书,SimLi" color=#ff0000 size=6>跳</FONT></MARQUEE>
<MARQUEE direction=up behavior=alternate width=80><FONT style="FONT-FAMILY: 隶书,SimLi" color=#0000ff size=6>动</FONT></MARQUEE>
<MARQUEE direction=up height=160 behavior=alternate width=80><FONT style="FONT-FAMILY: 隶书,SimLi" color=#ff0000 size=6>的</FONT></MARQUEE>
<MARQUEE direction=up behavior=alternate width=80><FONT style="FONT-FAMILY: 隶书,SimLi" color=#0000ff size=6>效</FONT></MARQUEE>
<MARQUEE direction=up height=160 behavior=alternate width=80><FONT style="FONT-FAMILY: 隶书,SimLi" color=#ff0000 size=6>果</FONT></MARQUEE>
如果“删除”文字标签,把“文字”替换为“图片”,就变为“交替跳动的图片”了。
4、交替跳动的图片:“交替跳动的图片”,其移动标签的总宽度也不能超过660px。
代码:
<DIV align=center>
<MARQUEE direction=up height=160 behavior=alternate width=120><IMG title=春天没来欢迎您 alt=春天没来欢迎您 src="
http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg
" height=100></MARQUEE>
<MARQUEE direction=up behavior=alternate width=120><IMG title=春天没来欢迎您 alt=春天没来欢迎您 src="
http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg
" height=100></MARQUEE>
<MARQUEE direction=up height=160 behavior=alternate width=120><IMG title=春天没来欢迎您 alt=春天没来欢迎您 src="
http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg
" height=100></MARQUEE>
<MARQUEE direction=up behavior=alternate width=120><IMG title=春天没来欢迎您 alt=春天没来欢迎您 src="
http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg
" height=100></MARQUEE>
<MARQUEE direction=up height=160 behavior=alternate width=120><IMG title=春天没来欢迎您 alt=春天没来欢迎您 src="
http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg
" height=100></MARQUEE></DIV>
5、相对而行的文字:
“相对而行”的文字,是用“向下”移动的移动标签控制第一行文字;用“向上”移动的移动标签控制第二行文字。
“相对而行”的移动文字效果与代码,请参阅我制作的这篇网页:
http://www.360doc.com/content/12/0705/09/4127803_222353071.shtml
6、相对而行的图片:
相对而行的图片,是用“向下”移动的移动标签控制第一个图片;用“向上”移动的移动标签控制第二个图片。
代码:
<MARQUEE direction=down><IMG title=春天没来欢迎您 alt=春天没来欢迎您 src="
http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg
" height=200></MARQUEE>
<MARQUEE direction=up><IMG title=春天没来欢迎您 alt=春天没来欢迎您 src="
http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg
" height=200></MARQUEE>
7、相背而行的文字:
“相背而行”的文字,是用“向上”移动的移动标签控制第一行文字;用“向下”移动的移动标签控制第二行文字。
“相背而行”的移动文字效果与代码,请常用我制作的这篇网页:
http://www.360doc.com/content/12/0705/09/4127803_222353071.shtml
8、相背而行的图片:
“相背而行”的图片,是用“向上”移动的移动标签控制第一个图片;用“向下”移动的移动标签控制第二个图片。
代码:
<MARQUEE direction=up><IMG title=春天没来欢迎您 alt=春天没来欢迎您 src="
http://image53.360doc.com/DownloadImg/2012/07/2822/25815401_2.jpg
" height=200></MARQUEE>
<MARQUEE direction=down><IMG title=春天没来欢迎您 alt=春天没来欢迎您 src="
http://image53.360doc.com/DownloadImg/2012/07/2822/25815401_2.jpg
" height=200></MARQUEE>
9、向“右上”移动的文字:
向“右上”移动的文字是用“向上”移动与“向右”移动的两个移动标签共同控制文字内容。
向“右上”移动的文字效果与代码,请参阅我制作的这篇网页:
http://www.360doc.com/content/12/0706/20/4127803_222682812.shtml
10、向“右上”移动的图片:
向“右上”移动的图片效果与代码,请参阅我制作的这篇网页:
http://www.360doc.com/content/12/0327/07/4127803_198141678.shtml
11、向“左上”移动的文字:
向“左上”移动的文字是用“向上”移动与“向左”移动的两个移动标签共同控制文字内容。
向“左上”移动的文字效果与代码,请参阅我制作的这篇网页:
http://www.360doc.com/content/12/0706/21/4127803_222693684.shtml
12、向“左上”移动的图片:
向“左上”移动的图片效果与代码,请参阅我制作的这篇网页:
http://www.360doc.com/content/12/0327/08/4127803_198156870.shtml
13、向“右下”移动的文字:
向“右下”移动的文字是用“向下”移动与“向右”移动的两个移动标签共同控制文字内容。
向“右下”移动的文字效果与代码,请参阅我制作的这篇网页:
http://www.360doc.com/content/12/0706/21/4127803_222697651.shtml
14、向“右下”移动的图片: 向“右下”移动的图片是用“向下”移动与“向右”移动的两个移动标签共同控制图片内容。
向“右下”移动的图片效果与代码,请参阅我制作的这篇网页:
http://www.360doc.com/content/12/0327/16/4127803_198314088.shtml
15、向“左下”移动的文字:
向“左下”移动的文字是用“向下”移动与“向左”移动的两个移动标签共同控制文字内容。
向“左下”移动的文字效果与代码,请参阅我制作的这篇网页:
http://www.360doc.com/content/12/0706/21/4127803_222696214.shtml
16、向“左下”移动的图片:
向“左下”移动的图片效果与代码,请参阅我制作的这篇网页:
http://www.360doc.com/content/12/0327/16/4127803_198307772.shtml
17、左右摇摆的文字:
在“左右摇摆的文字”中,相邻的两个文字,一个用设置了“来回走移动方式”的移动标签控制,另一个不用移动标签控制。
左右摇摆的文字效果与代码,请参阅我制作的这篇网页:
http://www.360doc.com/showWeb/0/0/222737263.aspx
18、左右摇摆的图片:
代码:
<MARQUEE behavior=alternate width=250><IMG style="WIDTH: 150px; HEIGHT: 150px" src="
http://image68.360doc.com/DownloadImg/2014/01/0313/37982749_17.gif"></MARQUEE><IMG
style="WIDTH: 150px; HEIGHT: 150px" src="
http://image68.360doc.com/DownloadImg/2014/01/0313/37982749_2.gif"><MARQUEE
behavior=alternate width=250><IMG style="WIDTH: 150px; HEIGHT: 150px" src="
http://image68.360doc.com/DownloadImg/2014/01/0313/37982749_17.gif"></MARQUEE
>
19、并排向上移动的文字:
“并排向上”移动的文字,是用“向上”移动的移动标签控制“几行”文字。移动标签中设置“居中对齐”的对齐方式,为的是效果比较美观。 “移动标签”中的居中“对齐方式”要用css样式:style="text-align: center"设置。
代码:
<MARQUEE style="TEXT-ALIGN: center" direction=up><FONT style="LINE-HEIGHT: normal; FONT-VARIANT: normal; FONT-STYLE: normal; FONT-SIZE: 28pt" color=#ff00ff>我们并排向上行<BR>我们并排向上行<BR>我们并排向上行</FONT></MARQUEE>
20、并排向上移动的图片:
“并排向上”移动的图片,是用“向上”移动的移动标签控制“几行”图片。移动标签中设置“居中对齐”的对齐方式,效果比较美观。
代码:
<MARQUEE style="TEXT-ALIGN: center" direction=up><IMG style="WIDTH: 300px; HEIGHT: 190px" alt="☆——春天没来——☆ " src="
http://image59.360doc.com/DownloadImg/2013/04/0517/31432995_6.png"><BR><BR><IMG
style="WIDTH: 300px; HEIGHT: 190px" alt="☆——春天没来——☆ " src="
http://image59.360doc.com/DownloadImg/2013/04/0517/31432995_2.jpg"><BR><BR><IMG
style="WIDTH: 300px; HEIGHT: 190px" alt="☆——春天没来——☆ " src="//image59.360doc.com/DownloadImg/2013/04/0517/31432995_10.png"></MARQUEE>
“并排向上”移动的文字与“并排向上”移动的图片,可以修改其移动方向,制作成为:“并排向下”移动的文字与“并排向下”移动的图片,“并排向左”移动的文字与“并排向左”移动的图片,“并排向右”移动的文字与“并排向右”移动的图片。
作业:
1、熟练掌握移动标签的表达方式,熟练掌握移动标签的常用属性属值。
2、认识并尽可能地掌握本节讲解的20种常用的“移动文字”与“移动图片”。
3、“练习制作”本节讲解的20种常用的“移动文字”与“移动图片”,并认真观察其显示效果。
4、尝试“修改”或“添加”(也可“删除”)本节讲解的20种常用的“移动文字”与“移动图片”中的属性,制作网页,认真观察其显示效果,总结成功的经验与失败的教训。
5、解析本节讲解的20种常用的“移动文字”与“移动图片”的代码,进一步熟悉标签名称与属性属值,并认真观察各种标签的应用顺序。深刻理解“首标签中的属性属值对其所控制内容的修饰与限制作用”,深刻理解“尾标签的收尾作用(“收尾作用”也可以叫做“闭合作用”)”。
学习知识,是一个积累的过程。它经历两个阶段。即:由薄变厚到由厚变薄。由薄变厚,是量的积累;由厚变薄,是质的飞跃。学习代码也是如此。当你学习每一种标签,每一种属性的时候,你的代码知识就一点一滴地积累起来了,就由薄变厚了。当你掌握了各种标签各种属性的用法,能够运用自如地制作网页的时候,你的代码知识就由厚变薄了。这时候,也许你就会说:欧!学习代码也不过如此啊!并不难学呀!
——“春天没来”
“春天没来”编撰
2014年4月17日于北京
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请
点击举报
。
打开APP,阅读全文并永久保存
查看更多类似文章
猜你喜欢
类似文章
文字跳动代码学习笔记
网页音画代码大全2
移动标签七
让你的图文动起来
代码学习练习册(草稿)
趣味的移动标签
更多类似文章 >>
生活服务
热点新闻
留言交流
回顶部
联系我们
分享
收藏
点击这里,查看已保存的文章
导长图
关注
一键复制
下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!
联系客服
微信登录中...
请勿关闭此页面
先别划走!
送你5元优惠券,购买VIP限时立减!
5
元
优惠券
优惠券还有
10:00
过期
马上使用
×