打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
第七节 移动标签
 

第七节 移动标签

“移动标签”是非常神奇的一种标签,也是非常有趣的一种标签。大凡能够看得见的内容,比如文章、图片、动画等等,我们都可以让它移动起来。用移动标签制作的网页,形式多样、丰富多彩,是值得我们研究、探讨的一种标签,也是我要讲解的一种重点标签。

本节重点了解“移动标签”的各种属性,各种属性中又以“移动方向”和“移动速度”为基础和重点。还应该了解移动标签常用的几种表达方式。从下一节课开始,讲解移动标签的具体应用。

———————————————————————————————————————————————

移动标签如下:<marquee>内容</marquee> (这里的“内容”可以是文字、图片等等内容。)

移动标签常用的属性有:

     移动方向(direction)、移动速度(scrollamount)、

      移动方式(behavior)、延时属性(scrolldelay)

      对齐方式(aligh)、  移动屏幕的宽(width)

                                                     和高(height)等等。

移动方向的属值有:

               left(向左移动)、 right(向右移动)、

                 up(向上移动)、down(向下移动)、

               默认为left 。  

移动方向的表示方法:

                 direction=up 或 direction=down 或

                 direction=left 或 direction=right

移动速度的属值是数字。

              数字越大速度越快,一般取值为3-4。

 移动速度的表示方法如:scrollamount=4

移动方式的表示方法如:
               behavior="scroll" 表示连续滚动;
               behavior="slide" 表示由一端快速滑动到另一端;
               alternate(来回滚动)
移动屏幕的宽和高:width(宽)、height(高)
对齐方式:例如:
         aligh=left ( 也可以是居右对齐、居中对齐。
                             right:居右 center :居中 )
<marquee>标记的默认情况是向左滚动无限次,字幕高度是文本高度,滚动范围:水平滚动的宽度是当前位置的宽度;垂直滚动的高度是当前位置的高度。
_____________________________________________________________________
移动标签举例:
★移动标签的几种表达方式:
1、<marquee direction=up scrollamount=4 >文字处</marquee>
2、<marquee direction=up scrollamount=4 ><font style="line-height: normal; font-size: 30pt; font-style: normal; font-variant: normal; font-weight: normal;" color="#ff00ff"><strong>"春天没来"欢迎您</strong></font></marquee>
3、按照原图片的规格移动:<MARQUEE><IMG src="//userimage2.360doc.com/12/0701/18/4127803_201207011844380474.png"></MARQUEE>
4、改变原图片的规格移动:<MARQUEE><IMG style="WIDTH: 500px; HEIGHT: 175px" src="//userimage2.360doc.com/12/0701/18/4127803_201207011844380474.png"></MARQUEE>
5、一行多列图片的移动:
<marquee style="left: 0px; width: 1340px;" height="270" behavior="alternate" scrollAmount="3">
<table style="width: 1340px;" border="0" cellSpacing="0" cellPadding="0" height="280">
<tbody>
<tr>
<td><img border="0" src="//image50.360doc.com/DownloadImg/2012/03/0120/21953071_6.jpg
" width="500" height="270"></td>
<td><img border="0" src="//image50.360doc.com/DownloadImg/2012/03/0120/21953071_5.jpg
" width="500" height="270"></td>
<td><img border="0" src="//image50.360doc.com/DownloadImg/2012/03/0120/21953071_4.jpg
" width="500" height="270"></td>
<td><img border="0" src="//image50.360doc.com/DownloadImg/2012/03/0120/21953071_3.jpg" width="500" height="270"></td>
</tr></tbody></table></marquee>
____________________________________________________________________________
有关说明:
1、一定要牢记:任何一种标签,它们的首标签与尾标签之间的内容,就是这个标签所管辖的对象。
2、上面的“移动标签表达方式1”:在首标签中设置了两个属性:移动方向(direction)和移动速度(scrollamount),移动方向是“向上”(up ),移动速度是4;“文字处”是指你要输入的移动文字内容。这种表达方式,文字是系统默认的文字,黑色,字体比较小。
3、上面的“移动标签表达方式2”:在“文字处”粘贴了我们前面学过的文字标签内容(蓝色字体内容),文字比较美观。
4、上面的“移动标签表达方式3——5”都是图片的移动标签。
————————————————————————————————————————
作业:
1、在括号内填写移动标签的属性与属值。
移动方向()、移动速度()、移动方式()、延时属性()、对齐方式()、移动屏幕的宽()、移动屏幕的高()、向左移动()、 向右移动()、向上移动()、向下移动()、默认方向()、表示连续滚动()、由一端快速滑动到另一端()、来回滚动()、移动屏幕的宽()、移动屏幕的高()。
2、把上面的“移动标签的五种表达方式”代码分别“复制”、“粘贴”到撰写文章处的“代码编辑”页面中,点击“发表”,观看移动效果。
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
人品以正直为贵(多张图片移动)
代码入门教程(5)
【聊代码】第十七集 移动标签(之五)
第二章  标签应用(23)
怎样自制移动相片
人品以正直为贵(多张图片移动)顶栏精品
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服