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

启野的博客

淡淡的雾,淡淡的雨,淡淡的云彩悠悠的游。

 
 
 

日志

 
 

HTML文字代码——移动文字(移动与非移动文字及特殊字符的结合变化)  

2011-03-19 10:10:14|  分类: HTML专区 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
                     
 
 
 
 

HTML

移动文字(移动与非移动文字及特殊字符的结合变化)

 

移动文字(移动与非移动文字及特殊字符的结合变化)博文简介

 


移动与非移动文字及特殊字符的结合变化同样让我们的网页更加丰富多彩。
博文未提到的属性问题和基本移动代码请点击:
HTML文字代码——移动文字(marquee 标签属性详解)

HTML文字代码——移动文字(marquee 标签属性的结合变化)

 

1、非移动文字+移动文字+非移动文字

代码

<DIV align=center>
<font style=font:30pt>启野博客</font>
<marquee behavior="alternate" width=300 height=30>
欢迎你光临指导!</marquee>
<font style=font:30pt>启野博客</font>
</DIV>

示例

  
启野博客 欢迎你光临指导!启野博客
 

说明

  

  • <DIV align=center>...</DIV>所有文本在整个页面中垂直居中。
    大字体代码<font style=font:30pt>启野博客</font>,根据需要调节font:30pt数值。
    来回移动代码<marquee behavior="alternate" width=300 height=30>欢迎你光临指导!</marquee>
  • 备注:
    来回移动代码的宽度和高度调节到适当很重要。
    居中属性直接添加,不然运用自动居中就换行不能够正确显示。
    另外添加文字的颜色和其他特效也很重要,在这里不做介绍。


2、非移动竖排+移动文字:

代码

<DIV align=center>
<font style=font:30pt style="LINE-HEIGHT: 120%; WRITING-MODE: tb-rl">启野博客</font>
<marquee behavior="alternate" width=300 height=100>欢迎你光临指导!</marquee>
</DIV>

示例

 

启野博客

 

 

欢迎你光临指导!

说明

  
  • <DIV align=center>...</DIV>所有文本在整个页面中垂直居中。
  • 大字体代码<font style=font:30pt>启野博客</font>,根据需要调节font:30pt数值。
  • 文本竖排样式style="LINE-HEIGHT: 120%; WRITING-MODE: tb-rl"
  • 来回移动代码<marquee behavior="alternate" width=300 height=30>欢迎你光临指导!</marquee>
  • 备注:
    来回移动代码的宽度和高度调节到适当很重要。
    居中属性直接添加,不然运用自动居中就换行不能够正确显示。
    另外添加文字的颜色和其他特效也很重要,在这里不做介绍。
    无法控制竖排文档时激活文本编辑框回车解决。

 

3、移动文字+非移动文字+移动文字:

代码

<DIV align=center>
<marquee behavior="alternate" width="20%" height=30>欢迎你光临指导!</marquee>
<font style=font:30pt>启野博客</font>
<marquee behavior="alternate" width="20%" height=30>欢迎你光临指导!</marquee>
</DIV>

示例

 
 
欢迎你光临指导!启野博客 欢迎你光临指导!
 

说明

 
  • <DIV align=center>...</DIV>所有文本在整个页面中垂直居中。
  • 来回移动代码<marquee behavior="alternate" width="20%" height=30>欢迎你光临指导!</marquee>
  • 大字体代码<font style=font:30pt>启野博客</font>,根据需要调节font:30pt数值。
  • 备注:
    来回移动代码的宽度和高度调节到适当很重要。
    居中属性直接添加,不然运用自动居中就换行不能够正确显示。
    另外添加文字的颜色和其他特效也很重要,在这里不做介绍。
4、移动英文+非移动中文:

代码

<DIV align=center>
<marquee behavior="alternate" width="10%" height=10>LOVE</marquee>
启野博客
<marquee behavior="alternate" width="10%" height=10>LOVE</marquee>
</DIV>

示例

 
LOVE启野博客 LOVE
 

说明

 
  • <DIV align=center>...</DIV>所有文本在整个页面中垂直居中。
  • 来回移动代码<marquee behavior="alternate" width="10%" height=10>LOVE</marquee>
    备注:
    来回移动代码的宽度和高度调节到适当很重要。
    居中属性直接添加,不然运用自动居中就换行不能够正确显示。
    另外添加文字的颜色和其他特效也很重要,在这里不做介绍。

 

5、移动特殊符号+非移动中文01:

代码

<DIV align=center>
<marquee behavior="alternate" width="10%">>></marquee>
启野博客
<marquee behavior="alternate" width="10%"><<</marquee>
</DIV>

示例

 
>>启野博客 <<
 

说明

  • <DIV align=center>...</DIV>所有文本在整个页面中垂直居中。
  • 来回移动代码<marquee behavior="alternate" width="10%">>></marquee>
  • 备注:
    来回移动代码的宽度和高度调节到适当很重要。
    居中属性直接添加,不然运用自动居中就换行不能够正确显示。
    另外添加文字的颜色和其他特效也很重要,在这里不做介绍。

 

6、移动特殊字体+非移动中文02:

代码

<DIV align=center>
<marquee behavior=alternate direction=left scrollAmount=3 width="4%">
<font face=Webdings>3</font></marquee>
<marquee scrollAmount=1 direction=left width="2%">| | |</MARQUEE>
启野博客
<marquee scrollAmount=1 direction=right width="2%">| | |</marquee>
<marquee behavior=alternate direction=right scrollAmount=3 width="4%">
<font face=Webdings>4</font></marquee>
</DIV>

示例

 
3 | | |启野博客 | | | 4
 

说明

 
  • <DIV align=center>...</DIV>所有文本在整个页面中垂直居中。
  • 来回移动代码:
    前两组移动代码的向左移动、速度和移动的宽度范围不同。
    <marquee behavior=alternate direction=left scrollAmount=3 width="4%">
    <font face=Webdings>3</font></marquee>
    <marquee scrollAmount=1 direction=left width="2%">| | |</marquee>
    后两组移动代码的向右移动、速度和移动的宽度范围不同。
    <marquee scrollAmount=1 direction=right width="2%">| | |</marquee>
    <marquee behavior=alternate direction=right scrollAmount=3 width="4%">
    <font face=Webdings>4</font></marquee>
  • <font face=Webdings>4</font>设置了一种字体
    Webdings是一个TrueType的dingbat字体,于1997年发表。
    搭载在其后的Microsoft Windows视窗系统内,大多的字形都没有Unicode的相对字。
    附对照表点击:
  • HTML文字代码——Webdings 字体
  • HTML文字代码——wingdings 字体
  • HTML文字代码——wingdings 3字体
  • 备注:
    来回移动代码的宽度和高度调节到适当很重要。
    居中属性直接添加,不然运用自动居中就换行不能够正确显示。
    另外添加文字的颜色和其他特效也很重要,在这里不做介绍。

 

7、移动特殊字体+非移动中文03:

代码

<DIV align=center>
<marquee behavior=alternate direction=left scrollAmount=3 width="4%">
<font face=Webdings>7</font></marquee>
<marquee scrollAmount=1 direction=left width="2%">| | |</marquee>
启野博客
<marquee scrollAmount=1 direction=right width="2%">| | |</marquee>
<marquee behavior=alternate direction=right scrollAmount=3 width="4%">
<font face=Webdings>8</font></marquee>
</DIV>

示例

 
7 | | |启野博客 | | | 8
 

说明

 
  • 方法同上,只改变了Webdings字体“3,4”替换为“7,8” 。

 

8、移动特殊字体+非移动中文04:

代码

<DIV align=center>
<marquee behavior=alternate direction=left scrollAmount=3 width="4%">
<font face=Webdings>9</font></marquee>
<marquee scrollAmount=1 direction=left width="2%">| | |</marquee>
启野博客
<marquee scrollAmount=1 direction=right width="2%">| | |</marquee>
<marquee behavior=alternate direction=right scrollAmount=3 width="4%">
<font face=Webdings>:</font></marquee>
</DIV>

示例

 
9 | | |启野博客 | | | :
 

说明

 
  • 说明:
    方法同上,只改变了Webdings字体“7,8”替换为“9,:” 。

 

9、移动特殊字体+非移动中文05:

代码

<DIV align=center>
<marquee behavior=alternate direction=left scrollAmount=3 width="4%">
<font face=Webdings>X</font></marquee>
<marquee scrollAmount=1 direction=left width="2%">| | |</marquee>
启野博客
<marquee scrollAmount=1 direction=right width="2%">| | |</marquee>
<marquee behavior=alternate direction=right scrollAmount=3 width="4%">
<font face=Webdings>W</font></marquee>
</DIV>

示例

 
X | | |启野博客 | | | W
 

说明

 
  • 说明:
    方法同上,只改变了Webdings字体“9,:”替换为“X,W” 。

 

10、移动特殊字体+非移动中文06:

代码

<DIV align=center>
<marquee behavior=alternate direction=down scrollAmount=3 width="4%" height=100>
<font style=font:20pt face=Webdings>!</font></marquee>
<font style=font:25pt style="LINE-HEIGHT: 120%; WRITING-MODE: tb-rl">启野博客</font>
<marquee behavior=alternate direction=up scrollAmount=3 width="4%"height=100>
<font style=font:20pt face=Webdings>!</font></marquee></DIV>

示例

 
!启野博客      !
 

说明

 

  • <DIV align=center>...</DIV>所有文本在整个页面中垂直居中。
    向下来回移动代码:
    <marquee behavior=alternate direction=down scrollAmount=3 width="4%" height=100>
    <font style=font:20pt face=Webdings>!</font></marquee>
  • 向上来回移动代码:
    <marquee behavior=alternate direction=up scrollAmount=3 width="4%"height=100>
    <font style=font:20pt face=Webdings>!</font></marquee>
  • 大字体竖排文本
    <font style=font:25pt style="LINE-HEIGHT: 120%; WRITING-MODE: tb-rl">启野博客</font>
    <font face=Webdings>!</font>设置了Webdings字体。
  • 整个代码不换行。

 

11、移动特殊字体+非移动中文07:

代码

 

<DIV align=center>
<marquee behavior=alternate direction=down scrollAmount=3 width="4%" height=100>
<font style=font:20pt face=Wingdings>[</font></marquee>
<font style=font:25pt style="LINE-HEIGHT: 120%; WRITING-MODE: tb-rl">启野博客</font>
<marquee behavior=alternate direction=up scrollAmount=3 width="4%"height=100>
<font style=font:20pt face=Wingdings>[</font></marquee></DIV>

示例

 
 
[启野博客      [

说明

 

  • <DIV align=center>...</DIV>所有文本在整个页面中垂直居中。
    向下来回移动代码:
    <marquee behavior=alternate direction=down scrollAmount=3 width="4%" height=100>
    <font style=font:20pt face=Wingdings>[</font></marquee>
  • 向上来回移动代码:
    <marquee behavior=alternate direction=up scrollAmount=3 width="4%"height=100>
    <font style=font:20pt face=Webdings>[</font></marquee>
  • 大字体竖排文本
    <font style=font:25pt style="LINE-HEIGHT: 120%; WRITING-MODE: tb-rl">启野博客</font>
    <font face=Wingdings>[</font>设置了Wingdings字体。
  • 整个代码不换行。
  • 比较适用的Wingdings图形字体:
  • stuvwTZ{|[&?@
  • 比较适用的Wingdings 3图形字体:
  • 3 4 5 6 1 2 p q t
  • r s v w
  • 比较适用的Webdings图形字体:
  • 3456789: WX
  • 附对照表点击:
    HTML文字代码——Webdings 字体
    HTML文字代码——wingdings 字体
    HTML文字代码——wingdings 3字体

 

欢迎光临启野博客!
  
  评论这张
 
阅读(1791)| 评论(0)
推荐 转载

历史上的今天

评论

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

页脚

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