注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

黑玫瑰博客

开放思维磨练一双慧眼,把这世界看远看透再看淡

 
 
 

日志

 
 
关于我

看不清的城市,迷离的心路,到哪里找一个安逸的角落,容得下我的倦意,我有不屈的斗志,却没有称心的器械.我有高尚的灵魂,却不能平伏我欲望的漫延

网易考拉推荐

代码学习3  

2013-05-01 09:05:40|  分类: 代码学习 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

第二章 标签应用
第三节 移动文字(2)
    本节学习两种移动文字的代码:“原地跳动的文字”和“隔字跳动的文字”代码。
    一、原地跳动的文字
    代码:
<MARQUEE direction=up height=150 behavior=alternate width=80><FONT style="FILTER: glow(color: mistyrose,pink=50):
WIDTH: 100%; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云; COLOR: #ff0000; FONT-SIZE: 30pt">原</FONT></MARQUEE>
<MARQUEE direction=up height=150 behavior=alternate width=80><FONT style="FILTER: glow(color: mistyrose,pink=50):
WIDTH: 100%; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云; COLOR: #ff0000; FONT-SIZE: 30pt">地</FONT></MARQUEE>
<MARQUEE direction=up height=150 behavior=alternate width=80><FONT style="FILTER: glow(color: mistyrose,pink=50):
WIDTH: 100%; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云; COLOR: #ff0000; FONT-SIZE: 30pt">跳</FONT></MARQUEE>
<MARQUEE direction=up height=150 behavior=alternate width=80><FONT style="FILTER: glow(color: mistyrose,pink=50):
WIDTH: 100%; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云; COLOR: #ff0000; FONT-SIZE: 30pt">动</FONT></MARQUEE>
<MARQUEE direction=up height=150 behavior=alternate width=80><FONT style="FILTER: glow(color: mistyrose,pink=50):
WIDTH: 100%; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云; COLOR: #ff0000; FONT-SIZE: 30pt">文</FONT></MARQUEE>
<MARQUEE direction=up height=150 behavior=alternate width=80><FONT style="FILTER: glow(color: mistyrose,pink=50):
WIDTH: 100%; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云; COLOR: #ff0000; FONT-SIZE: 30pt">字</FONT></MARQUEE>
 
    代码解析:
        一、先看上面代码中的一小段代码(红色字体部分):这段代码由四个标签组成:移动标签、文字标签、文字尾标签、移动尾标签。“移动标签”和它的“尾标签”居于这段代码的首位和末尾,中间的部分是移动的内容。而中间的部分是“文字标签”和它的“尾标签”,“文字标签”和它的“尾标签”之间是文字内容“原”字,可见这段代码的实际效果是移动的文字:“原”字。
        其余的五小段代码与上面的这小段代码是一样的,只是分别用:“地”、“跳”、“动”、“文”、“字”替换了这段代码中的“原”字。
        二、在每个移动标签中,设置了四个属性与属值。它们依次是:移动方向=向上、 移动屏幕高度=150px、 移动方式=来回走、 移动屏幕宽度=80px。
        文字标签中设置了一个属性:样式(style)。样式的属性与属值依次是:CSS静态滤镜:加光辉在附近对象的边外(颜色:朦胧玫瑰色,粉红色=50)、宽度:100%、行与行的间距:150%、文字字体:华文彩云、文字颜色:红色、字号:30pt(注:pt是长度单位,大约等于0.353毫米)。
        说明:
关于“CSS静态滤镜”问题,内容比较深奥,暂时不予研究,只要先认识一下即可。
        三、移动标签中的属性:移动方向(向上)、移动方式(来回走)、移动屏幕的宽度(80px)必须设置。高度可以不设置,如果不设置高度,就变成默认的高度。
    “原地跳动的文字”作业:
        应用上面的代码制作一篇文章。代码中移动屏幕的高度与宽度可修改,文字内容可修改。
代码入门教程(9) - 黑玫瑰 - 黑玫瑰休闲阁代码入门教程(9) - 黑玫瑰 - 黑玫瑰休闲阁代码入门教程(9) - 黑玫瑰 - 黑玫瑰休闲阁代码入门教程(9) - 黑玫瑰 - 黑玫瑰休闲阁代码入门教程(9) - 黑玫瑰 - 黑玫瑰休闲阁代码入门教程(9) - 黑玫瑰 - 黑玫瑰休闲阁
        二、隔字跳动的文字
        代码:
<MARQUEE direction=up height=160 behavior=alternate width=80><FONT color=#ff0000 size=6 face=隶书>隔</FONT></MARQUEE>
<MARQUEE direction=up behavior=alternate width=80><FONT color=#0000ff size=6 face=隶书>字</FONT></MARQUEE>
<MARQUEE direction=up height=160 behavior=alternate width=80><FONT color=#ff0000 size=6 face=隶书>跳</FONT></MARQUEE>
<MARQUEE direction=up behavior=alternate width=80><FONT color=#0000ff size=6 face=隶书>动</FONT></MARQUEE>
<MARQUEE direction=up height=160 behavior=alternate width=80><FONT color=#ff0000 size=6 face=隶书>文</FONT></MARQUEE>
<MARQUEE direction=up behavior=alternate width=80><FONT color=#0000ff size=6 face=隶书>字</FONT></MARQUEE>
        代码解析:
        1、“隔字跳动的文字”代码:每个移动标签中放入了一个文字,相邻的两个移动标签中,移动屏幕的宽度相同,高度不同。其中一个移动标签中,高度设置为160px;另一个移动标签中,没有设置高度。没有设置高度的,其高度大概是采用系统默认的高度吧,在这里,这个高度大约是200px左右。
        2、每个移动标签中必须设置“向上”的移动方向和“来回走”的移动方式。
        3、不设置移动高度的哪些移动标签,也可以都“删除”掉。删除以后,这些文字就变成静止不动的文字了。这是“隔字跳动的文字”的另一种形式。
 
        "隔字跳动的文字"作业:
        作业1:
        将“隔字跳动的文字”代码复制、粘贴到撰写文章处的代码编辑页面中,把文字内容分别修改为“我”“要”“学”“习”“代”“码”发表一篇文章,观看其效果。
        作业2:在作业1的基础上,修改第一个、第三个、第五个移动标签的屏幕高度为260px,发表一篇文章,观看其效果。
        作业3:去掉所有的移动标签中的高度,修改第一个、第三个、第五个移动标签的字号为size=7,发表一篇文章,观看其效果。
代码入门教程(9) - 黑玫瑰 - 黑玫瑰休闲阁

 

 第二章 标签应用

第四节 移动文字(3)
    本节学习两种移动文字的代码:单字移动的横排版与竖排版代码。
        1、单字移动代码(横排版)
        代码:
<marquee height="55" width="55" scrollAmount="1" scrollDelay="10"><font style="line-height: normal; font-size: 30pt; font-style: normal; font-variant: normal; font-weight: normal;" color="#ff0000" face="华" 文彩云="">春</font></marquee>
<marquee height="55" width="55" scrollAmount="1" scrollDelay="10"><font style="line-height: normal; font-size: 30pt; font-style: normal; font-variant: normal; font-weight: normal;" color="#ff0000" face="华" 文彩云="">天</font></marquee>
<marquee height="55" width="55" scrollAmount="1" scrollDelay="10"><font style="line-height: normal; font-size: 30pt; font-style: normal; font-variant: normal; font-weight: normal;" color="#ff0000" face="华" 文彩云="">没</font></marquee>
<marquee height="55" width="55" scrollAmount="1" scrollDelay="10"><font style="line-height: normal; font-size: 30pt; font-style: normal; font-variant: normal; font-weight: normal;" color="#ff0000" face="华" 文彩云="">来</font></marquee>
<marquee height="55" width="55" scrollAmount="1" scrollDelay="10"><font style="line-height: normal; font-size: 30pt; font-style: normal; font-variant: normal; font-weight: normal;" color="#ff0000" face="华" 文彩云="">欢</font></marquee>
<marquee height="55" width="55" scrollAmount="1" scrollDelay="10"><font style="line-height: normal; font-size: 30pt; font-style: normal; font-variant: normal; font-weight: normal;" color="#ff0000" face="华" 文彩云="">迎</font></marquee>
<marquee height="55" width="55" scrollAmount="1" scrollDelay="10"><font style="line-height: normal; font-size: 30pt; font-style: normal; font-variant: normal; font-weight: normal;" color="#ff0000" face="华" 文彩云="">您</font></marquee>
        代码解析:
        1、单字移动代码(横排版)每一个文字用一个移动标签控制。
       2、移动标签中移动屏幕的高度和宽度,需要根据文字标签中字号的大小进行修改,要让文字在移动屏幕中都能够显示出来。
 
       
2、单字移动代码(竖排版)
        代码:
<marquee height="55" width="55" scrollAmount="1" scrollDelay="10" align="center"><font style="line-height: normal; font-size: 30pt; font-style: normal; font-variant: normal; font-weight: normal;" color="#ff0000" face="华" 文彩云=""><b>春</b></font></marquee><br>
<marquee height="55" width="55" scrollAmount="1" scrollDelay="10" align="center"><font style="line-height: normal; font-size: 30pt; font-style: normal; font-variant: normal; font-weight: normal;" color="#ff0000" face="华" 文彩云=""><b>天</b></font></marquee><br>
<marquee height="55" width="55" scrollAmount="1" scrollDelay="10" align="center"><font style="line-height: normal; font-size: 30pt; font-style: normal; font-variant: normal; font-weight: normal;" color="#ff0000" face="华" 文彩云=""><b>没</b></font></marquee><br>
<marquee height="55" width="55" scrollAmount="1" scrollDelay="10" align="center"><font style="line-height: normal; font-size: 30pt; font-style: normal; font-variant: normal; font-weight: normal;" color="#ff0000" face="华" 文彩云=""><b>来</b></font></marquee><br>
<marquee height="55" width="55" scrollAmount="1" scrollDelay="10" align="center"><font style="line-height: normal; font-size: 30pt; font-style: normal; font-variant: normal; font-weight: normal;" color="#ff0000" face="华" 文彩云=""><b>欢</b></font></marquee><br>
<marquee height="55" width="55" scrollAmount="1" scrollDelay="10" align="center"><font style="line-height: normal; font-size: 30pt; font-style: normal; font-variant: normal; font-weight: normal;" color="#ff0000" face="华" 文彩云=""><b>迎</b></font></marquee><br>
<marquee height="55" width="55" scrollAmount="1" scrollDelay="10" align="center"><font style="line-height: normal; font-size: 30pt; font-style: normal; font-variant: normal; font-weight: normal;" color="#ff0000" face="华" 文彩云=""><b>您</b></font></marquee><br>
 
        代码解析:
        1、单字移动代码(竖排版)每一个文字用一个移动标签控制。
        2、单字移动代码(竖排版)并没有使用文字竖排版代码,只是在每一个移动标签的尾标签后面添加了一个换行标签<br>,最后一个移动标签的尾标签后面不需添加。
        3、移动标签中移动屏幕的高度和宽度,需要根据文字标签中字号的大小进行修改,要让文字在移动屏幕中都能够显示出来。

        作业:
        1、认真阅读“代码解析”内容,掌握代码设置要点。
        2、把单字移动的横排版和竖排版都发表一篇文章。代码中的文字内容,字体、字号、文字颜色、移动方向等内容,可以进行修改,要认真观察修改以后的显示效果。
        3、如果把“春天没来欢迎您”用一个移动标签控制,又是什么效果呢(代码见下)?观察一下,并且和上面的两种代码对比一下显示效果。
代码:<marquee height="55" width="55" scrollAmount="1" scrollDelay="10" align="center">
<font style="line-height: normal; font-size: 30pt; font-style: normal; font-variant: normal;
font-weight: normal;" color="#ff0000" face="华" 文彩云=""><b>春天没来欢迎您</b></font></marquee>
 
 



 


  评论这张
 
阅读(118)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017