标签功能是WEB发展的产物，EMLOG当然也具备文章添加标签的功能。而且在EMLOG的侧边栏组件中，用户也可以手动增加该模块。

不过，有一个小小的问题是，侧边栏组件中的标签默认是显示网站所有标签的，如果你的标签过多，势必会影响到网站的美观度。我的博客就是这样,标签太多了,模板默认是全部显示的,严重影响美观!所以Mrxn就网上搜索和自己实践,修改,验证,总结出在emlog中如何来获取固定数量的网站标签.

No.1

<?php
// 获取EMLOG固定数量网站标签
// Mrxn's Blog 收集整理发布 mrxn.net
function getTags($num){
    global $CACHE;
    $tag_cache = $CACHE->readCache('tags');
    foreach($tag_cache as $key => $value):
        if($key < $num):
        ?>
<span><a href="<?php echo Url::tag($value['tagurl']); ?>" title="<?php echo $value['usenum']; ?> 篇文章">
<?php echo $value['tagname']; ?></a></span>
        <?php 
        endif;
    endforeach;
}
?>

如上代码既实现了获取EMLOG网站固定数量标签的功能呢，参数$num即为用户设置的标签个数。使用方法是先将该段代码写在模板文件module.php当中，然后再模板前台文件中写入一行调用该函数的代码即可，如下：

<?php
//把这一段代码写到模板文件中即可实现调用10个网站标签
     getTags(10);
?>

另外，如果希望调用的标签随机显示，则需要使用shuffle()函数进行一次顺序的打乱。函数代码如下，相对于之前来说仅仅只添加了一行代码：

<?php
// 获取EMLOG固定数量网站标签（随机排序）
// Mrxn's Blog 收集整理发布  mrxn.net
function getTags($num){
    global $CACHE;
    $tag_cache = $CACHE->readCache('tags');
    shuffle($tag_cache); //添加这行代码实现标签随机排序
    foreach($tag_cache as $key => $value):
        if($key < $num):
        ?>
<span><a href="<?php echo Url::tag($value['tagurl']); ?>" title="<?php echo $value['usenum']; ?> 篇文章">
<?php echo $value['tagname']; ?></a></span>
        <?php 
        endif;
    endforeach;
}
?>

注:这个需要改动内核文件,请emer注意,新手慎用.Mrxn问题提示:使用之前做好备份!

emlog使用缓存的方法，事先将全部标签存放在\content\cache\tags缓存文件中，读取的时候使用模板中的$tag_cache = $CACHE->readCache('newtags')读取。

   1.找到\include\lib\cache.php并打开

   2.找到private function mc_tags()函数

你会发现他的sql语句是将你设置的所有标签全部查询出来，如果你的标签设置很多时候，打开一次就查询一次，显然不好。所以为将他改为每次随机查询30个标签出来，让他放到缓存文件中。

3.将$query = $this->db->query("SELECT gid FROM " . DB_PREFIX . "tag");改为$query = $this->db->query("SELECT gid FROM " . DB_PREFIX . "tag  ORDER BY RAND() LIMIT 30");

   4.将$query = $this->db->query("SELECT tagname,gid FROM " . DB_PREFIX . "tag");改为$query = $this->db->query("SELECT tagname,gid FROM " . DB_PREFIX . "tag ORDER BY RAND() LIMIT 30");

这样每次显示出来的标签都是随机抽出来的30个，当然这个数字你可以自己改，你想显示多少就改成多少，而且你可以通过更改查询条件来指定你要显示的标签，比如你如果想显示的30个标签不是随机的，而是你最新的30个，只需要将后面查询条件改为：

DESC LIMIT 0,30这样就行了。

可以调整标签字体的大小,颜色

//widget：标签
function widget_tag($title){
        global $CACHE;
        $tag_cache = $CACHE->readCache('tags');?>
        <li>
        <h3><span><?php echo $title; ?></span></h3>
        <ul id="blogtags">
        <?php
        foreach($tag_cache as $value):
        $minFontSize=12; //最小字体大小,可根据需要自行更改
    $maxFontSize=20; //最大字体大小,可根据需要自行更改
    $style='font-size:'.($minFontSize+lcg_value()*(abs($maxFontSize-$minFontSize))).'px;color:#'.dechex(rand(0,255)).dechex(rand(0,196)).dechex(rand(0,255));
        $text="        <a href='".Url::tag($value['tagurl'])."' title='".$value['usenum']."篇日志'><span style='".$style."'>".$value['tagname']."</span></a>";
        echo $text;
         endforeach;
         ?>
        </ul>
        </li>
<?php }?>

让emlog侧边栏显示彩色标签,随机显示标签,数量多少有你控制,本教程由 Mrxn 倾情发布,

嘿嘿,废话不多说,下面进入正题:

0X1:

打开模板的module.php,找到:widget：标签 字样,然后在

$tag_cache = $CACHE->readCache('tags');

下面添加如下两行代码:

$tag_cache = array_slice($tag_cache,0,42); //设置标签显示数量(0,num) 
shuffle($tag_cache);?>  <!--将数组打乱,即让它随机显示 <--> 

0X2  继续往下找到如下代码:

<?php foreach($tag_cache as $value):?> 

将其修改成如下代码:

<?php foreach($tag_cache as $value): $color = dechex(rand(0,16777215));?>
//设置颜色值范围,温馨提示:标签多颜色值范围大点好,反之,亦然

0X3: 最后一步,颜色效果引用:

<a href="<?php echo Url::tag($value['tagurl']); ?>" style="color:#<?php echo $color;//在标签链接href里面应用颜色样式 ;?>;"><?php echo $value['tagname']; ?>(<?php echo$value['usenum'];?>)</a>

最终效果就如我博客右侧的标签效果一样,刷新一次标签顺序变换一次,颜色也变换一次:

如有不懂得,欢迎留言交流,这是我的代码:module.zip

因为要用百度的sitemap所以得自己写个sitemap,百度说:

将xml数据写入一个本地文件，比如thread.xml，然后调用curl命令：

使用php、python、java等可以参照这个过程推送结构化数据。

于是就开始去各种搜索,并且找到了,自己也正在写百度的sitemap......         用度娘的收录好,利于SEO......

可以看作命令行浏览器

1、开启gzip请求
curl -I http://www.sina.com.cn/ -H Accept-Encoding:gzip,defalte

2、监控网页的响应时间
curl -o /dev/null -s -w "time_connect: %{time_connect}\ntime_starttransfer: %{time_starttransfer}\ntime_total: %{time_total}\n" "http://www.kklinux.com"

3. 监控站点可用性
curl -o /dev/null -s -w %{http_code} "http://www.kklinux.com"

4、以http1.0协议请求（默认为http1.1） 
curl -0 .............. 
      1）读取网页 
$ curl linuxidc.com">http://www.linuxidc.com 
2）保存网页 
$ curl http://www.linuxidc.com > page.html $ curl -o page.html http://www.linuxidc.com 
3）使用的proxy服务器及其端口：-x 
$ curl -x 123.45.67.89：1080 -o page.html http://www.linuxidc.com 
4）使用cookie来记录session信息 
$ curl -x 123.45.67.89：1080 -o page.html -D cookie0001.txt http://www.linuxidc.com 
option： -D 是把http的response里面的cookie信息存到一个特别的文件中去，这样，当页面被存到page.html的同时，cookie信息也被存到了cookie0001.txt里面了 
    5）那么，下一次访问的时候，如何继续使用上次留下的cookie信息呢？ 
使用option来把上次的cookie信息追加到http request里面去：-b 
$ curl -x 123.45.67.89：1080 -o page1.html -D cookie0002.txt -b cookie0001.txt http://www.linuxidc.com 

6）浏览器信息~~~~ 
随意指定自己这次访问所宣称的自己的浏览器信息： -A
curl -A "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)" -x 123.45.67.89:1080 -o page.html -D cookie0001.txt http://www.yahoo.com 
这样，服务器端接到访问的要求，会认为你是一个运行在Windows 2000上的IE6.0，嘿嘿嘿，其实也许你用的是苹果机呢！ 
而"Mozilla/4.73 [en] (X11; U; Linux 2.2; 15 i686"则可以告诉对方你是一台PC上跑着的Linux，用的是Netscape 4.73，呵呵呵 

7）
另外一个服务器端常用的限制方法，就是检查http访问的referer。比如你先访问首页，再访问里面所指定的下载页，这第二次访问的referer地址就是第一次访问成功后的页面地 
址。这样，服务器端只要发现对下载页面某次访问的referer地址不 是首页的地址，就可以断定那是个盗连了~~~~~ 
讨厌讨厌~~~我就是要盗连~~~~~！！
幸好curl给我们提供了设定referer的option： -e
curl -A "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)" -x 123.45.67.89:1080 -e "mail.yahoo.com" -o page.html -D cookie0001.txt http://www.yahoo.com 
这样，就可以骗对方的服务器，你是从mail.yahoo.com点击某个链接过来的了，呵呵呵 

8）curl 下载文件 
刚才讲过了，下载页面到一个文件里，可以使用 -o ，下载文件也是一样。
比如， curl -o 1.jpg http://cgi2.tky.3web.ne.jp/~zzh/screen1.JPG
这里教大家一个新的option： -O
大写的O，这么用： curl -O http://cgi2.tky.3web.ne.jp/~zzh/screen1.JPG
这样，就可以按照服务器上的文件名，自动存在本地了！ 
再来一个更好用的。
如果screen1.JPG以外还有screen2.JPG、screen3.JPG、....、screen10.JPG需要下载，难不成还要让我们写一个script来完成这些操作？
不干！
在curl里面，这么写就可以了：
curl -O http://cgi2.tky.3web.ne.jp/~zzh/screen[1-10].JPG 
呵呵呵，厉害吧？！~~~ 
9）
再来，我们继续讲解下载！
curl -O http://cgi2.tky.3web.ne.jp/~{zzh,nick}/[001-201].JPG 
这样产生的下载，就是
~zzh/001.JPG
~zzh/002.JPG
...
~zzh/201.JPG
~nick/001.JPG
~nick/002.JPG
...
~nick/201.JPG 
够方便的了吧？哈哈哈 
咦？高兴得太早了。
由于zzh/nick下的文件名都是001，002...，201，下载下来的文件重名，后面的把前面的文件都给覆盖掉了~~~ 
没关系，我们还有更狠的！
curl -o #2_#1.jpg http://cgi2.tky.3web.ne.jp/~{zzh,nick}/[001-201].JPG 
--这是.....自定义文件名的下载？
--对头，呵呵！ 
#1是变量，指的是{zzh,nick}这部分，第一次取值zzh，第二次取值nick
#2代表的变量，则是第二段可变部分---[001-201]，取值从001逐一加到201
这样，自定义出来下载下来的文件名，就变成了这样：
原来： ~zzh/001.JPG ---> 下载后： 001-zzh.JPG
原来： ~nick/001.JPG ---> 下载后： 001-nick.JPG 
这样一来，就不怕文件重名啦，呵呵 

9）
继续讲下载
我们平时在windows平台上，flashget这样的工具可以帮我们分块并行下载，还可以断线续传。
curl在这些方面也不输给谁，嘿嘿 
比如我们下载screen1.JPG中，突然掉线了，我们就可以这样开始续传
curl -c -O http://cgi2.tky.3wb.ne.jp/~zzh/screen1.JPG 
当然，你不要拿个flashget下载了一半的文件来糊弄我~~~~别的下载软件的半截文件可不一定能用哦~~~ 
分块下载，我们使用这个option就可以了： -r
举例说明
比如我们有一个http://cgi2.tky.3web.ne.jp/~zzh/zhao1.mp3 要下载（赵老师的电话朗诵 :D ）
我们就可以用这样的命令：
curl -r 0-10240 -o "zhao.part1" http:/cgi2.tky.3web.ne.jp/~zzh/zhao1.mp3 &\
curl -r 10241-20480 -o "zhao.part1" http:/cgi2.tky.3web.ne.jp/~zzh/zhao1.mp3 &\
curl -r 20481-40960 -o "zhao.part1" http:/cgi2.tky.3web.ne.jp/~zzh/zhao1.mp3 &\
curl -r 40961- -o "zhao.part1" http:/cgi2.tky.3web.ne.jp/~zzh/zhao1.mp3 
这样就可以分块下载啦。
不过你需要自己把这些破碎的文件合并起来
如果你用UNIX或苹果，用 cat zhao.part* > zhao.mp3就可以
如果用的是Windows，用copy /b 来解决吧，呵呵 
上面讲的都是http协议的下载，其实ftp也一样可以用。
用法嘛，
curl -u name:passwd ftp://ip:port/path/file
或者大家熟悉的
curl ftp://name:passwd@ip:port/path/file 
  
10)上传的option是 -T 
比如我们向ftp传一个文件： curl -T localfile -u name:passwd ftp://upload_site:port/path/ 
当然，向http服务器上传文件也可以
比如 curl -T localfile http://cgi2.tky.3web.ne.jp/~zzh/abc.cgi
注意，这时候，使用的协议是HTTP的PUT method 
刚才说到PUT，嘿嘿，自然让老服想起来了其他几种methos还没讲呢！
GET和POST都不能忘哦。 
http提交一个表单，比较常用的是POST模式和GET模式 
GET模式什么option都不用，只需要把变量写在url里面就可以了
比如：
curl http://www.yahoo.com/login.cgi?user=nickwolfe&password=12345 
而POST模式的option则是 -d 
比如，curl -d "user=nickwolfe&password=12345" http://www.yahoo.com/login.cgi
就相当于向这个站点发出一次登陆申请~~~~~ 
到底该用GET模式还是POST模式，要看对面服务器的程序设定。 
一点需要注意的是，POST模式下的文件上的文件上传，比如
<form method="POST" enctype="multipar/form-data" action="http://cgi2.tky.3web.ne.jp/~zzh/up_file.cgi">
<input type=file name=upload>
<input type=submit name=nick value="go">
</form>
这样一个HTTP表单，我们要用curl进行模拟，就该是这样的语法：
curl -F upload=@localfile -F nick=go http://cgi2.tky.3web.ne.jp/~zzh/up_file.cgi 
罗罗嗦嗦讲了这么多，其实curl还有很多很多技巧和用法
比如 https的时候使用本地证书，就可以这样
curl -E localcert.pem https://remote_server 
再比如，你还可以用curl通过dict协议去查字典~~~~~
curl dict://dict.org/d:computer 

今天为了检查所有刺猬主机上所有域名是否有备案．在使用wget不爽的情况下，找到了curl这个命令行流量器命令．发现其对post的调用还是蛮好的．特别有利于对提交信息及变 
更参数进行较验．对于我想将几十万域名到miibeian.gov.cn进行验证是否有备案信息非常有用．发现这篇文章很不错，特为转贴． 
我的目标：
curl -d "cxfs=1&ym=xieyy.cn" http://www.miibeian.gov.cn/baxx_cx_servlet 
在出来的信息中进行过滤，提取备案号信息，并设置一个标识位．将域名，备案号及标识位入库 

用curl命令，post提交带空格的数据 
今天偶然遇到一个情况，我想用curl登入一个网页，无意间发现要post的数据里带空格。比如用户名为"abcdef"，密码为"abc def"，其中有一个空格，按照我以前的方式提交： 
curl -D cookie -d "username=abcdef&password=abc def" http://login.xxx.com/提示登入失败。 

于是查看curl手册man curl。找到： 
d/--data (HTTP) Sends the speci?ed data in a POST request to the HTTP server, in a way that can emulate as if a user has ?lled in a HTML form and pressed the 
submit button. Note that the data is sent exactly as speci?ed with no extra processing (with all newlines cut off). The data is expected to be "url-encoded". 
This will cause curl to pass the data to the server using the content-type application/x-www-form-urlencoded. Compare to -F/--form. If this option is used 
more than once on the same command line, the data pieces speci?ed will be merged together with a separating &-letter. Thus, using ’-d name=daniel -d 
skill=lousy’ would generate a post chunk that looks like ’name=daniel&skill=lousy’. 
于是改用： 
curl -D cookie -d "username=abcdef" -d "password=abc efg" http://login.xxx.com/这样就能成功登入了。 

一、规范说明

性能是网站运行是否良好的关键因素， 网站的性能与效率影响着公司的运营成本及长远发展，编写出高质高效的代码是我们每个开发人员必备的素质,也是我们良好的职业素养。

二、影响性能的因素

A、 商业需求

1. 需求合理性

2. 需求与系统的整合

3. 需求所带来的商业利益是否与需求开发的成本成正比

4. 需求所带来的风险

B、 Web 服务器

1. 并发处理能力

2. 高负载的能力

3. 负载均衡的能力

4. 动态内容与静态内容的处理能力

5. Web 服务器部署

C、 DataBase 服务器

1. 并发访问

2. 数据库服务器的部署

3. 数据库的 shema 架构与的表设计是否合理

4. 数据检索

D、 操作系统

E、 客户端请求

F、 程序/语言

三、分析性能的指标

1. 程序的运行时间 2

2. 程序的运行所消耗的内存

3. 单位时间内的并行处理

4. 磁盘 IO 的处理

四、优化性能的目标

快速、并发、资源消耗低（内存、磁盘 IO、CPU 负载）

五、优化性能的原则

1. 服务器配配置最优化

2. 服务器部署合理化

3. 商业需求合理并与产出的商业价值成正比

4. 架构可用、可维护、可扩展

5. 程序的正确性、简单性、逻辑的合理性。

6. 不断的分析性能的的瓶颈

7. 不断的重构已有的代码

8. 优化的优先级：program->database->web sersver->os->client

六、优化

A、 程序优化

· 变量

1、 变量大小,注意变量大小是节约内存的最有效手段，对于来自用户表单、数据库和文件缓存的数据都需要控制变量的大小。 因为cpu要处理的数据是来源于内存

2、 变量有效期，使用unset()函数注销不需要的变量是一种良好的习惯，将一些不需要的变量立即注销可提高内存的使用率。

3、 复制变量，尽量不要复制变量，否则就会带来1倍的内存消耗，即使复制变量也应该要立即注销原有变量。

4、 变量类型,初始化变量请注意其变量类型，一个变量在执行过程中最好只有一种类型状态。对于数组变量，请初始化声明，如下： $a = array();

5、 临时变量,是处理业务逻辑的临时存储，这些都是需要消耗内存的。如果临时变量使用结束请立即注销，特别是在一些过程式代码的执行流程中，对于一些函数，如果业务非常复杂，同样需要立即注销临时变量

6、 静态变量,对于一些需要由复杂业务产生的变量，如果在程序的执行过程中多次产生并使用，可考虑使用静态变量，减少程序的cpu执行次数

7、 变量的性能：局部变量>全局变量>类属性>未定义的变量。

· 循环

1、 尽量减少循环的次数。

2、 尽量减少循环的潜逃的层次，不要超过三层。

3、 避免在循环内有过多的业务逻辑。

4、 不要循环包含文件

5、 不要循环执行数据库操作。

6、 优先使用foreach,它比for/while效率高

7、 不要把 count/strlen/sizeof 放到 for 循环的条件语句中 For($i=0,$count=count($array);$i<$count;$i++){} 不要使用for($i=0;$i<count($array);$i++){};

8、 for($i=$total;$i>0;$i–){}性能好于for($i=0;$i<$total;$–){}

9、 保持循环体内的业务逻辑清晰

· 函数

1、 函数职责清晰，一个函数只干一件事，不要杂揉过多的业务逻辑

2、 函数代码体不要超过20行，反之，考虑拆分。

3、 优先使用php内置函数

4、 常量与函数同时能干一件事，优先使用常量。

· phpversion() < PHP_VERSION

· get_class() < CLASS

· is_null() < NULL ===

5、 echo 的性能好于print,输入多个变量的时候用echo $str,$str1,不用.连接符

6、 $_SERVER[REQUEST_TIME]替换time();

7、 字符串替换strtr()->str_replace()->preg_replace()->epreg();

8、 发挥trim最大功效，替换substr。$filepath=trim($filename,’/’).’/’;

9、Isset/empty 虽然两个函数功能有所差异，但在同样的情况下推荐使用 empty()

10、isfile/file_exist 两个函数的功能有所不同，file_exist既可判断文件是否存在，也可以判断目录是否存在，在同样的情况下推荐使用is_file

· 文件

1、 减少文件包含数，减少磁盘 IO

2、 使用完整路径，或者容易转换的相对路径。避免在 include_path 查找

3、 文件的代码行数不要超过 2000 行

4、Require_once/include_once 效率低于 require/include, 需要额外的去查看系统是否已经调用过这个文件. 因为它们在一个 opcode 缓存下的调用非常慢

5、程序执行文件用 requie/require_once,缓存文件用include/include_once。Include 效率好于 require

6、优化 spl 中的文件自动加载机制，可参靠 yii

7、类库文件加载，是否考虑类是否已经实例化，可考虑采用设计模式之单例模式

8、文件读写的并发性

面向对象

1、 控制实例的创建的数量

2、 优先使用常量、类常量

3、 优先例用静态变量，静态属性

4、 类的结构合理

5、 面象接口编程

6、 封装变化点

7、 依赖于抽象，不依赖于细节

8、 优先使用静态成员

9、 类的接口清晰稳定，类的职责单一，类与类的通信合理

10、 使用常量的好处 编译时解析，没有额外开销 杂凑表更小，所以内部查找更快 类常量仅存在于特定「命名空间」，所以杂凑名更短 代码更干净，使除错更方便

字符串

1、 用单引号替代双引号引用字符串；避免检索字符串中的变量

运算

1、 用 i+=1 代替i=i+1。符合c/c++的习惯，效率还高

2、 ++$i 的效率高于++$i,–$i 同理

数组

1、 多维数组尽量不要循环嵌套赋值；

2、 使用$array[‘name’]方式访问数组，禁止$array[name]/$array[“name”]

判断

1、 逻辑判断请优先使用switch 的方式，对于业务逻辑相对较多的情况请选择if/else，提高代码的可读性

2、 尽量控制if/else判断的个数，如果太多请考虑功能优化或代码优化

3、 尽量使用恒等用于比较判断，恒等的效率高于等于，而且还能避免一些类型强制转换的错误

4、 if/else与_&&,单条语句判断请选择&&的形式， &&的效率高于if/else，如下 :

if ($a == 1) {

$b = 2;

}可选择为($a == 1) && $b = 2;

缓存

1、 使用php加速器，缓冲opcode

2、 例用memcache/nosql

3、 使用内存数据库、

4、 使用文件缓存

5、 缓冲功能 5

其它

1、 少用@符号，严重影响性能

2、 适时关闭远程资源连接如数据库，ftp、socket等，适时的清理这些资源

B、 数据库优化

1、 合理的商业需情

2、 数据库 schema 架构优化

3、 垂直与水平分库分表

4、 索引优化，查询优化

5、 第三方开源检索工具(sphinx)

6、 主从数据库服务器的使用。

C、 Web 服器优化（暂未整理,有相应的 Web 服务器优化手册）

D、 操作系统优化(暂未整理,有相应的 OS 优化手册)

E、 前端优化

1、合理的 html 结构

2、合理 html 与css 的同时，考虑 Css 设计合理，减少 http 请求

3、合理 html 与java script 的同时，考虑拆分是否合理，减少 http 请求

4、优化 java script 代码，让用户有良好的体验

5、根据 http 协议，优化高并发请求

七、性能检测工具

Web Server

ab

http_load

PHP

apd

xdebug

Mysql

explain

profiler

       纯JS+CSS制作的俄罗斯方块  欢迎体验：俄罗斯方块

分析：我们为文章添加缩略图地址是保存到数据库中的，并且是保存在文章表中，这样做的原因是在取文章的时候，顺便取出缩略图地址，效率很高，不影响原有系统性能。

1）有些同学是从附件表取的。

2）有些同学是从内容摘要中解析出图片地址。

这个各有各的好处，这里不做评价，适合自己的是最好的。



楼主是在文章表中添加了一个字段：thumbUrl，见下图：

代码编写开始 ------>>>>>



1.  我们在后台发布文章，添加缩略图地址，首先要提供一个可输入的编辑框，找到文章发布页面admin\views\add_log.php    



1) 文件中找到以下代码：

<div>

    <label for="title" id="title_label">输入文章标题</label>

    <input type="text" maxlength="200" name="title" id="title"/>

</div>

在以上代码下面添加如下代码：

<div>

    <label for="thumbUrl" id="thumbUrl_label">输入缩略图地址</label>

    <input type="text" maxlength="200" name="thumbUrl" id="thumbUrl"/>

</div>

代码描述：在文章标题下面添加了可输入缩略图地址的输入框。

2) 文中找到以下代码：

$("#title").focus(function(){$("#title_label").hide();});

$("#title").blur(function(){if($("#title").val() == '') {$("#title_label").show();}});

在以上代码下面添加如下代码：

$("#thumbUrl").focus(function(){$("#thumbUrl_label").hide();});

$("#thumbUrl").blur(function(){if($("#thumbUrl").val() == '') {$("#thumbUrl_label").show();}});

代码描述：添加文本框的JS特效，当鼠标点到这个文本框的时候，让里面的提示的字消失，鼠标离开的时候再显示。

2. 给录入缩略图地址的输入框添加CSS样式，和标题的输入框样式一致，美观。找到admin\views\css\css-min.css

3. 在文章编辑页面，也要加上缩略图地址编辑的输入框，使其可以编辑，找到文章编辑页面admin\views\edit_log.php



1) 文件中找到以下代码：

<div>

    <label for="title" id="title_label">输入文章标题</label>

    <input type="text" maxlength="200" name="title" id="title" value="<?php echo $title; ?>" />

</div>

在以上代码下面添加如下代码：

<div>

    <label for="thumbUrl" id="thumbUrl_label">输入缩略图地址</label>

    <input type="text" maxlength="200" name="thumbUrl" id="thumbUrl" value="<?php echo $thumbUrl; ?>"/>

</div>

代码描述：在文章标题下面添加了可编辑缩略图地址的输入框。

2) 文中找到以下代码：

$("#title").focus(function(){$("#title_label").hide();});

$("#title").blur(function(){if($("#title").val() == '') {$("#title_label").show();}});

在以上代码下面添加如下代码：

$("#thumbUrl").focus(function(){$("#thumbUrl_label").hide();});

$("#thumbUrl").blur(function(){if($("#thumbUrl").val() == '') {$("#thumbUrl_label").show();}});

3) 文中找到以下代码：

if ($("#title").val() != '')$("#title_label").hide();

在以上代码下面添加如下代码：

if ($("#thumbUrl").val() != '')$("#thumbUrl_label").hide();

4. 文章编辑页面，文章内容保存分为自动保存和手动保存，自动保存通过JS实现，找到admin\views\js\common.js





切记，在170行后面进行查找，170行之前也有，但不是我们要操作的。

对于经常逛论坛和在空间写日志的朋友来说，显示IP签名的图片应该并不陌生吧，博主我经过一段时间的折腾，成功了，嘿嘿，下面是效果：

大家也可以在论坛或者是空间调用我的这个签名图片了，地址是:https://mrxn.net/ip/ip.asp 

例如在论坛签名里面：

[img]https://mrxn.net/ip/ip.asp[/img] 就能够直接显示在你的签名里面了。

这只是开始，后期会增加DIY功能：

1.自定义背景颜色或者是图片；

2.自定义头部和底部信息；

3.增加自动更换背景图片或颜色和底部信息。

更多功能，你也可以留言评论你想增加的功能！

注：本功能只是用于学习，不保证其时效性！

网页前端工作者经常会遇到子元素设置float浮动后导致父容器高度不能自适应，也就是俗称的外部容器不能被“撑大”，常见表现为背景或边框异常，这时我们就需要来清除“闭合浮动”，方法主要有以下4种：

1.  额外标签法

这种方法就是向父容器的末尾再插入一个额外的标签，并令其清除浮动（clear）以撑大父容器。这种方法浏览器兼容性好，没有什么问题，缺点就是需要额外的（而且通常是无语义的）标签。

虽然许多人不喜欢这种方法，但是它却是W3C推荐的方法。

<div style="clear:both;"></div>

或者使用

<br style="clear:both;" />

2. 使用after伪类

这种方法就是对父容器使用after伪类和内容声明在指定的现在内容末尾添加新的内容。经常的做法就是添加一个“点”，因为它比较小不太引人注意。然后我们再利用它来清除浮动（闭合浮动元素），并隐藏这个内容。

这种方法兼容性一般，但经过各种 hack 也可以应付不同浏览器了，同时又可以保证html比较干净，所以用得还是比较多的。

以下为一个采用伪类的CSS示范写法：

#box:after{  
     content:".";  
     height:0;  
     visibility:hidden;  
     display:block;  
     clear:both;  
}

3. 设置overflow为hidden或者auto

这种做法就是将父容器的overflow设为hidden或auot就可以在标准兼容浏览器中闭合浮动元素.

不过使用overflow的时候，可能会对页面表现带来影响，而且这种影响是不确定的，你最好是能在多个浏览器上测试你的页面。如无特殊情况，一般推荐使用hidden属性。

4. 浮动外部元素，float-in-float

这种做法就是让父容器也浮动，这利用到了浮动元素的一个特性——浮动元素会闭合浮动元素。这种方式在 IE/Win 和标准兼容浏览器中都有较好的效果，但缺点也很明显——父容器未必想浮动就浮动的了，毕竟浮动是一种比较特殊的行为，有时布局不允许其浮动也很正常。

在学习HTML文字特效处理之前，应该先阅读：Html语言解析

对于不熟悉洋文的人来说，HTML确实难。但只要你有悟性、有恒心，静下心来慢慢学，对每个问题琢磨琢磨、捣鼓捣鼓，肯定能学会。 下面一步一步来：

        1、写字：点日志---写日志---全部功能---<>---进入HTML编辑状态。写你要展现的字，如：欢迎您光临Mrxn的博客！！

        2、确定字体： FONT表示文字的属性； face表示字体；即<FONT face=隶书> 欢迎您光临Mrxn的博客！！“=”号后填选择的字体，你想选什么字体，就填什么字体； 这个尖括号“<>”,是不能省掉的，而且代码必须写在这个尖括号之内。

       3、确定文字大小：  size表示字的大小，即：<FONT face=隶书 size=5> 欢迎您光临Mrxn的博客！！“5”是取的值，可以变化，数字越大字越大。

       4、确定文字颜色：color表示颜色；颜色的代码为：#  xxxxxx。   代码是：color=#ff0000 即：<FONT face=隶书color=#ff0000  size=5> 欢迎您光临Mrxn的博客！！

另外需熟记的几个颜色代码：红色：ff0000  绿色：00ff00  蓝色：0000ff    黑色：000000  白色：ffffff      要记住：颜色代码编入HTML语言中时可别忘了写“#”。

其它颜色代码请参看：颜色代码表

预览一下，看是不是红色：

                           欢迎您光临Mrxn的博客！！

5、文字加粗：好，红色字显示出来了，但有点瘦。在用WODE处理中文时我们用“B”可使文字丰满。试试：<FONT face=隶书 color=#ff0000  size=5> <B>欢迎您光临Mrxn的博客！！</B>  。再加上文字属性结束符号 </FONT > 就变为：<FONT face=隶书 color=#ff0000  size=5> <B>欢迎您光临Mrxn的博客！！</B> </FONT >       

        看看效果：

                       欢迎您光临Mrxn的博客！！

         6、移动文字：文字丰满了，如果能移动不更漂亮吗？ 好办，就在所有代码的前面加一个移动代码<marquee>，  再在所有代码和文字的最后加一个移动代码</marquee> , 注意多了一个“/” 。即：<marquee> <FONT face=隶书 color=#ff0000  size=5> <B>欢迎您光临Mrxn的博客！！</B> </FONT >  </marquee>

         看看效果：

欢迎您光临Mrxn的博客！！

     注意两点；一是这个移动代码<marquee>默认向左移动；二是要点右上角“预览”才能动起来。

        移动 属性如下：
        direction=移动方向　可选值为向上(up)　向下(down)　向左(left)　向右(right)

        向右移动：<marquee direction= right> <FONT face=隶书 color=#ff0000  size=5> <B>欢迎您光临Mrxn的博客！！</B> </FONT >  </marquee>

欢迎您光临Mrxn的博客！！

         左右来回移动：<marquee behavior=alternate> <FONT face=隶书 color=#ff0000  size=5> <B>欢迎您光临Mrxn的博客！！</B> </FONT >  </marquee>

欢迎您光临Mrxn的博客！！ 

         向上移动：<marquee direction= up> <FONT face=隶书 color=#ff0000  size=5> <B>欢迎您光临Mrxn的博客！！</B> </FONT >  </marquee>

欢迎您光临Mrxn的博客！！

         向下移动：<marquee  direction= down> <FONT face=隶书 color=#ff0000  size=5> <B>欢迎您光临Mrxn的博客！！</B> </FONT >  </marquee>

欢迎您光临Mrxn的博客！！

         上下来回移动：<marquee   direction= down  behavior=alternate > <FONT face=隶书 color=#ff0000  size=5> <B>欢迎您光临Mrxn的博客！！</B> </FONT >  </marquee>

欢迎您光临Mrxn的博客！！注意：使用“direction= up  behavior=alternate”也可得此效果。

 7、调整移动速度： 代码是:scrollamount=1   “1”是可变值，数值越大越快。

 这个代码加在哪里？因为它是属于移动这一属性的，所以就要写在移动代码一起。即：<marquee direction= up  scrollamount=1 > <FONT face=隶书 color=#ff0000  size=5> <B>欢迎您光临Mrxn的博客！！</B> </FONT >  </marquee>         看看效果：

欢迎您光临Mrxn的博客！！

         8、调整文字位置：那就加一个表示位置的代码：

              <p align=center>　表示字体居中

              <p align=left>    表示字体居左

              <p align=right>   表示字体居右

即：<marquee direction= up  scrollamount=1 > <p align=center><FONT face=隶书 color=#ff0000  size=5> <B>欢迎您光临Mrxn的博客！！</B> </FONT >  </marquee>     

              注意：这一位置代码不能和FONT这一属性的写在一起，因为不是同一属性，只能另放在<FONT ...... </FONT > 这一属性的前面。

          看看效果吧!是不是居中了.？

欢迎您光临Mrxn的博客！！

         9、走走停停文字设置：

         基本语法：
         <marquee scrolldelay=500 scrollamount=100>插入文字</marquee>

         即：   <marquee scrolldelay=500 scrollamount=100><FONT face=隶书 color=#ff0000  size=5> <B>欢迎您光临Mrxn的博客！！</B> </FONT >   </marquee>    

         效果：

欢迎您光临Mrxn的博客！！

          10、跳跃式移动（即上下来回移动+左右来回移动）： <MARQUEE scrollAmount=5 direction=up behavior=alternate height=150>
<MARQUEE scrollAmount=2 behavior=alternate width=660><IMG src="http://xianyangygdz.blog.163.com/图片地址"><FONT face=楷体_gb2312 color=red size=6>插入文字</FONT></MARQUEE></MARQUE></MARQUEE>

        上下来回移动代码：<MARQUEE scrollAmount=5 direction=up behavior=alternate height=150>
        左右来回移动代码：<MARQUEE scrollAmount=2 behavior=alternate width=660> 

       11、 上下两行文字相向移动：

<P align=center><FONT color=#0096ff face=隶书 size=7><MARQUEE height=50 width=350>插入文字</FONT></MARQUEE></P><FONT color=#0000ff face=隶书 size=7><MARQUEE direction=right height=50 width=350>插入相反的文字</MARQUEE></FONT></FONT></P>

       上行文字代码：<FONT color=#0096ff face=隶书 size=7><MARQUEE height=50 width=350>插入文字</FONT></MARQUEE>

       下行文字代码：<FONT color=#0000ff face=隶书 size=7><MARQUEE direction=right height=50 width=350>插入相反的文字</MARQUEE></FONT>

       提醒：在用这种效果时，文字移动范围的宽width的取值很重要，两段文字移动范转的width取值和一定要小于背景层width的取值。

 效果如下：

欢迎您光临Mrxn的博客！！

！！客博的nxrM临光您迎欢

      12、由中间向两边移动文字：在上例"11"中取掉上下行中间的“</P>”，就可变为在同一水平线上由中间向两边移动的文字。为了美观，再在文字前加个图片，即为：<P align=center><FONT face=隶书 color=#ff0000 size=5>
<MARQUEE width=350 height=50><IMG src="图片地址">欢迎您光临Mrxn的博客！！</MARQUEE></FONT></MARQUEE></MARQUEE><FONT face=隶书 color=#c000c0 size=5><MARQUEE direction=right width=350 height=50>！！客博的虎老临光您迎欢<IMG src="图片地址"></MARQUEE></FONT></FONT></P>

效果漂亮吧？

欢迎您光临老虎的博客！！  ！！客博的虎老临光您迎欢

       由两边向中间移动文字：

<P align=center><FONT face=华文彩云 color=#ee110e size=5>
<MARQUEE direction=right width=280 height=50>！！客博的nxrM临光您迎欢<IMG style="CURSOR: pointer" src="http://img.blog.163.com/photo/joeubzjS_MRGXKeH6hAGog==/2010857233621410887.jpg" bbimg(this)?></MARQUEE></FONT></MARQUEE><FONT face=华文彩云 color=#ee110e size=5>
<MARQUEE width=280 height=50><IMG style="CURSOR: pointer" src="http://img.blog.163.com/photo/wpc64e02arvSPnFzjjAXuA==/5397564153404060463.jpg" bbimg(this)?>欢迎您光临Mrxn的博客！！</MARQUEE></FONT></MARQUEE></P>

      13、原地跳动文字基本语法：

 <DIV></DIV></B>
<CENTER><FONT style="FONT-SIZE: 40pt; FILTER: glow(color: mistyrose,pink=50); WIDTH: 100%; COLOR: #0033ff; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云">
<MARQUEE direction=up behavior=alternate width=60 height=120>
<CENTER><B>原</B></CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=60 height=120>
<CENTER><B>地</B></CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=60 height=120>
<CENTER><B>跳</B></CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=60 height=120>
<CENTER><B>动</B></CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=60 height=120>
<CENTER><B>文</B></CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=60 height=120>
<CENTER><B>字</B></CENTER></MARQUEE></FONT></CENTER>

         14、交替跳跃文字基本语法：

 <DIV></DIV>
<CENTER><FONT style="FONT-SIZE: 40pt; FILTER: glow(color: mistyrose,pink=50); WIDTH: 100%; COLOR: #ff6600; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云">
<MARQUEE direction=up behavior=alternate width=80 height=160>
<MARQUEE direction=up behavior=alternate width=80 height=160>
<CENTER><B>欢</B></CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=80>
<CENTER><B>迎</B></CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=80 height=160>
<CENTER><B>您</B></CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=80>
<CENTER><B>！</B> </CENTER></MARQUEE></FONT></CENTER>

  15、右向左上下起伏飞翔基本语法：



<MARQUEE>

<MARQUEE direction=up behavior=alternate height=150><IMG src="图片地址"><IMG src="图片地址"><FONT face=华文行楷 color=#0000ff size=5>填写文字</B></FONT></MARQUEE></MARQUEE>



       右向左上下起伏飞翔，height=100 是上下起伏飞翔幅度，可以调整，区分图片大小，一般设置在50至150的范围内比较好

16、左向右上下起伏飞翔文字基本语法：



        <marquee direction=right><marquee behavior=alternate direction=up height=200><font color=0000ff size=4 face=华文行楷><b>!去回快</b></font><br><img src=图片地址><img src=图片地址><img src=图片地址></marquee><br></marquee>



      左向右上下起伏飞翔， height=200 是上下起伏飞翔幅度，可以调整，区分图片大小，一般设置在50至150的范围内比较好。

17、原地跳高跳低基本语法：



 <CENTER><FONT face=隶书 color=red size=25>

<MARQUEE direction=up behavior=alternate width=60 height=120>虚</MARQUEE>



<FONT color=yellow>

<MARQUEE direction=up behavior=alternate width=60 height=80>拟</MARQUEE>



<FONT color=brown>

<MARQUEE direction=up behavior=alternate width=60 height=120>祝</MARQUEE>



<FONT color=green>

<MARQUEE direction=up behavior=alternate width=60 height=80>您</MARQUEE>



<FONT color=orange>

<MARQUEE direction=up behavior=alternate width=60 height=120>永</MARQUEE>



<FONT color=orange>

<MARQUEE direction=up behavior=alternate width=60 height=80>远</MARQUEE>



<FONT color=yellow>

<MARQUEE direction=up behavior=alternate width=60 height=120>幸</MARQUEE>



<FONT color=orange>

<MARQUEE direction=up behavior=alternate width=60 height=80>福</MARQUEE>

</FONT></B></MARQUEE></FONT></CENTER></FONT

 18、设置大字体的文字：

       （1）、基本语法：
       <font style=font:30pt face=新宋体 color=#ff0000>插入文字</font>

       （2）、属性如下：
       font:30pt　数值越大文字就越大

      （3）、效果：

  相逢是缘 相思是福

19、彩色字体基本语法：

        <P align=center><STRONG><FONT size=6><FONT face=华文新魏><FONT color=#ff0000>彩
</FONT><FONT color=#ff8900>色</FONT><FONT color=#92c000>文</FONT><FONT color=#00c024>字</FONT><FONT color=#00c0da>色</FONT><FONT color=#0053ff>彩</FONT><FONT color=#AO00ff> 斑</FONT><FONT color=#ff00ff>斓</FONT></FONT></FONT></STRONG></P>

        代码说明：<strong>是用作重点强调的，其文本通常以粗体显示。

看看效果吧！

彩色文字色彩斑斓

         20、文字阴影、投影效果：
 (1)、文字阴影效果：

<DIV align=center>
<DIV style="FONT-SIZE: 35pt; FILTER: shadow(color=阴影颜色代码,direction=阴影方向); WIDTH: 400px; COLOR: 文字颜色代码; LINE-HEIGHT: 150%; FONT-FAMILY: 字体; HEIGHT: 51px">
<DIV align=center><B>文字内容</B></DIV></DIV></DIV> 

         说明：FILTER: shadow滤镜效果是沿对象边缘产生阴影。

          抛射字体基本语法：

<DIV align=center>

<DIV style="FILTER: shadow(color=#FF9999

 strength=60); WIDTH: 480px; HEIGHT: 121px"><FONT face=华文彩云 color=#ff0000 size=7>

<B>

<CENTER>抛射字体</B></CENTER></FONT>

<DIV align=left><BR><BR></DIV></DIV></DIV>

<P align=left> </P>

看看效果吧!

(2)、文字定点投影效果：

<TABLE style="FILTER: dropshadow(color=阴影颜色代码,offx=3,offy=3,positive=true)" align=center><FONT face=字体 color=文字颜色代码 size=字号><B>文字内容</B></FONT> 
<TBODY></TBODY></TABLE> 

         说明： FILTER: dropshadow滤镜可使对象在指定的方向和位置上产生阴影。阴影相对于对象的位置可通过offx和offy来设定。

文字定点投影效果

           文字浮雕效果：

<TABLE style="FILTER: dropshadow(color=#6699FF, offx=1, offy=1, positive=1)" align=center><FONT face=隶书 color=#ffffff size=7>文字浮雕效果</FONT> 
<TBODY></TBODY></TABLE>

文字浮雕效果

（3）、投影字体效果：

 <DIV align=center>
<DIV style="FONT-WEIGHT: bolder; FONT-SIZE: 40px; FILTER: blur(add=1, direction=45,strength=10); WIDTH: 450px" align=center><Font color=文字颜色代码 face=字体>
<DIV align=center><B>文字内容</B></DIV></Font></DIV></DIV>

         说明：FILTER: blur滤镜可使对象在指定的方向和位置上产生动感模糊效果。font-weight为文字浓淡粗细属性，可用normal、bold、bolder、light、lighter及数值100-900来表示。

          文字模糊效果：

 <TABLE style="FILTER: blur(add=true,direction=135,strength=30)" align=center><FONT face=黑体 color=#ee00ee size=6><B>文字模糊效果</B></FONT> 
<TBODY></TBODY></TABLE>

文字模糊效果

立体镂空字基本语法:

<DIV style="FILTER: shadow(color=#ff4400, strength=40); WIDTH: 708px; HEIGHT: 483px"><FONT size=3><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 150pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文彩云 color=#ff0000>虚拟</FONT><BR></FONT></DIV>

21、日志美术字：

（1）、<DIV style="FILTER: shadow(color=dcdcdc); COLOR: black; HEIGHT: 5px">日志美术字</FONT></DIV>

（2）、<DIV style="FILTER: shadow(color=c0c0c0); HEIGHT: 1px"><PRE> <FONT face=黑体 color=deeppink size=4><B>日志美术字</B> </FONT></PRE></DIV>

 日志美术字 

 （3）、<DIV style="FONT-WEIGHT: bold; FONT-SIZE: 16pt; FILTER: Shadow(Color=#dcc4c4,Direction=135); WIDTH: 131px; COLOR: #0000cd; LINE-HEIGHT: 150%; FONT-FAMILY: 隶书; HEIGHT: 40px; writing: tb-rl">日志美术字</DIV>

 （4）、<DIV style="FILTER: shadow(color=deeppink); HEIGHT: 5px"><SPAN style="FILTER: shadow(color=c0c0c0); HEIGHT: 1px"><FONT face=幼圆 color=#000000 size=5><B>日志美术字</B> </FONT></DIV></SPAN>

（5）、<DIV style="FONT-SIZE: 14pt; FILTER: shadow(color=black,direction=135); WIDTH: 100%; COLOR: white; HEIGHT: 12px">日志美术字</DIV> </DIV>

 （6）、<DIV style="FONT-SIZE: 14pt; FILTER: shadow(color=3399ff,direction=135); WIDTH: 100%; COLOR: white; HEIGHT: 12px">日志美术字</DIV>

 （7）、<DIV style="FILTER: glow(color=9400de); COLOR: #ffffff; HEIGHT: 14px">日志美术字 </DIV>

 （8）、<DIV style="FONT-SIZE: 12pt; FILTER: Glow(color=006363,

strength:2); WIDTH: 100%; COLOR: #ffffe6; FONT-FAMILY: 黑体; HEIGHT: 20px">日志美术字</DIV>

（9）、<DIV style="FONT-SIZE: 14pt; FILTER: glow (color=blue,strength:2); WIDTH: 100%; COLOR: #ff0000; HEIGHT: 20px; valign: bottom"><STRONG><BIG>日志美术字</BIG></STRONG></DIV>

           22、带背景色文字效果：

<DIV align=center>
<DIV style="FONT-SIZE: 27pt; FONT-FAMILY: 字体; WIDTH: 背景宽度; BACKGROUND-COLOR: 背景颜色代码">文字内容</DIV></DIV>

          说明：font-family为字体属性，font-size为文字大小属性。

         23、文字反转效果：

  (1)、左右反转效果：

<TABLE style="FILTER: FlipH" align=center>

<FONT face=字体 color=文字颜色代码 size=字号>文字内容</FONT> 
<TBODY></TBODY></TABLE> 

         说明：FILTER: FlipH表示沿水平方向翻转对象的滤镜效果。

文字左右反转

(2)、上下反转效果：

<TABLE style="FILTER: FlipV" align=center>

<FONT face=字体 color=文字颜色代码 size=字号>文字内容</FONT> 
<TBODY></TBODY></TABLE> 

          说明：FILTER: FlipV表示沿垂直方向翻转对象的滤镜效果。
 

文字上下反转

     (3、)倒影字效果：

<DIV align=center><FONT face=华文行楷 color=#ff0033 size=6><B>倒影代码</B></FONT></DIV>
<TABLE style="FILTER: FlipV; LINE-HEIGHT: 100%" align=center><FONT face=华文行楷 color=#ff0033 size=6><B>倒影代码</B> </FONT>
<TBODY></TBODY></TABLE>

倒影代码

 <DIV style="FONT-SIZE: 35pt; WIDTH: 100%; COLOR: green;

FONT-FAMILY: 华文新魏" align=center>

<B><EM>老虎的倒影代码</EM></B></DIV>
<DIV style="FONT-SIZE: 35pt; FILTER: FlipV; WIDTH: 100%; COLOR: blue; FONT-FAMILY: 华文新魏" align=center>

<B><EM>老虎的倒影代码</EM></B></DIV>

 24、空心字效果：

<TABLE style="FILTER: glow(strength=1) mask(color=#ff0033) chroma(color=#ff0033)"

align=center><FONT face=字体 size=字号>文字内容</FONT>
<TBODY></TBODY></TABLE>  

         说明：空心字是用滤镜glow、mask、chroma组合，mask和chroma的颜色要相同，这个颜色决定了字体的颜色。

空心字效果

          25、阴、阳文字效果：

  (1）、阴文字效果：

<TABLE style="FILTER: mask(color=文字颜色代码) shadow(color=阴影颜色代码,direction=135) chroma(color=文字颜色代码)" align=center><FONT face=字体 size=字号>文字内容</FONT> 
<TBODY></TBODY></TABLE>

        说明：阴文字是用滤镜mask，shadow，chroma组合。字体的颜色由shadow决定，mask和chroma的颜色要相同，色彩任意。

阴文字效果

(2)、阳文字效果：

<TABLE style="FILTER: mask(color=#a09261) dropshadow(color=#000000,offx=-3,offy=-3,positive=1) chroma(color=#a09261)" align=center><FONT face=字体 size=字号>文字内容</FONT> 
<TBODY></TBODY></TABLE>

        说明：阳文字是用滤镜mask，dropshadow，chroma组合。mask和chroma的颜色相同，色彩由dropshadow决定。

阳文字效果

         26、齿边字效果；

<TABLE style="FILTER: glow(strength=30) mask(color=blue)" align=center><FONT face=字体 size=字号>文字内容</FONT> <TBODY></TBODY></TABLE>

         说明：齿边字是用滤镜glow，mask组合，mask的颜色决定字体的颜色。

齿边字效果

           27、文字光晕效果：

<DIV style="FONT-SIZE: 35pt; FILTER: glow(color=光晕颜色代码,strength=5); WIDTH: 100%; COLOR: 文字颜色代码; LINE-HEIGHT: 150%; FONT-FAMILY: 字体" align=center>
<DIV align=center><B>文字内容</B></DIV></DIV>

           说明：strength表示光晕强度

          28、文字透明、渐变效果：

 (1)、文字透明效果：

<TABLE style="FILTER: alpha(opacity=10,finishopacity=20,sytle=2,startx=1,starty=1,finishx=100,finishy=100)" align=center><FONT face=字体 color=文字颜色代码 size=字号>文字内容</FONT> 
<TBODY></TBODY></TABLE> 

       说明：opacity：表示文字起始透明度，有效范围是0-100；100是完全不透明，0是完全透明。
        finishOpacity：表示文字结束透明度，有效范围是0-100；100是完全不透明，0是完全透明。
        style：表示文字滤镜样式，可更改等号后面参数：0-平均透明；1-线状渐变透明；2-圆形渐变透明；3-菱形(X形)渐变透明。
        startx、startx、finishx、finishy分别表示文字滤镜效果的起始和结束位置。

文字透明效果

    (2)、文字渐变效果：

<DIV style="FONT-SIZE: 35pt; FILTER: alpha(opacity=100,style=1); WIDTH: 100%; COLOR: 字体颜色代码; LINE-HEIGHT: 100%; FONT-FAMILY: 字体" align=center>文字内容</DIV> 

          说明：LINE-HEIGHT: 为行间距。

           29、文字波纹效果：

  (1)、文字波浪效果：

<DIV style="FONT-SIZE: 35pt; FILTER: wave(add=0,lightstrength=50,strength=3,freq=2,phrase=10); WIDTH: 100%; COLOR: red; LINE-HEIGHT: 100%; FONT-FAMILY: 字体" align=center><B>文字内容</B> </DIV>

        说明：add属性：布尔型，0或1，0表示将原始对象加入最后效果中，1则反之；freq属性：决定显示的频率，即应出现多少个波形；phrase属性：决定波形的形状，值取0至360之间；strength属性：决定波形的振幅(扭曲强度)。

 (2)、文字扭曲效果：

代码格式：与文字波浪效果的性质相同，均为同一种滤镜效果，只是参数设置不同罢了。

 <DIV align=center><DIV style="FONT-SIZE: 35pt; FILTER: Wave(freq=17,strength=3,lightstrength=1,phase=0); WIDTH: 300px; LINE-HEIGHT: 15pt; FONT-FAMILY: Verdana; HEIGHT: 20px" align=center><FONT face=华文行楷 color=#ff0033><STRONG><B>扭曲文字效果</B></STRONG></FONT></DIV></DIV>

            30、彩光闪动文字的基本语法：

 <TABLE align=center background=http://img.blog.163.com/photo/eHaHkYknewet3nHzUNS3RQ==/3702803318628988464.jpg border=5>
<TBODY>
<TR>
<TD style="FILTER: mask(color=#000000)" align=middle><FONT style="FONT-SIZE: 50pt" face=隶书 color=#336699><B>老虎欢迎您的光临</B></FONT></TD></TR></TBODY></TABLE>

                   再作个火焰燃烧效果：

 <TABLE borderColor=#cd5c5c height=100 width=400 align=center border=3>
<TBODY>
<TR>
<TD background=http://img.blog.163.com/photo/PFDxwoiNrj8piPXB9KhTiQ==/3702803318628988463.jpg>
<P align=center>
<MARQUEE scrollAmount=3 behavior=alternate width=500><IMG alt="" src="http://img.blog.163.com/photo/hVkuquHNeKNqc4o21FiEFw==/4240139049169747688.jpg"><FONT color=#ff0000 size=6><B>虚拟欢迎您！</B><IMG alt="" src="http://img.blog.163.com/photo/hVkuquHNeKNqc4o21FiEFw==/4240139049169747688.jpg"></FONT></MARQUEE></P></TD></TR></TBODY></TABLE>

 （带背景的闪光字体）

<TABLE cellSpacing=0 cellPadding=0 align=center background=文字内闪光图片地址>
<TBODY>
<TR>
<TD style="FILTER: chroma(color=#336699)">
<TABLE align=center background=文字的背景图片地址>
<TBODY>
<TR>
<TD align=middle><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 56pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=字体 color=#336699><B>带背景的闪光字体</B></FONT></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE> 

        说明：实际上是使用了两层表格达到的效果。font-style为字体风格属性，font-variant为字体变量属性(这个属性有两个值，normal和small-caps，normal是缺省值)；font-weight为文字浓淡粗细属性。

   31、文字在图片上向上移动的基本语法 ：

<DIV style="PADDING-RIGHT: 0px; MARGIN-TOP: 10px; FONT-SIZE: 9pt; OVERFLOW-X: hidden; WIDTH: 97%; WORD-BREAK: break-all; TEXT-INDENT: 24px; LINE-HEIGHT: normal; HEIGHT: 200px; WORD-WRAP: break-word" auto?>
<P align=center><BR>
<TABLE height=390 cellSpacing=0 cellPadding=0 width=550 align=center background=http://img.blog.163.com/photo/ADCF8YQn4AeGVOsgxhfg6g==/879609302221279143.jpg border=3>
<TBODY>
<TR>
<TD>
<P align=center>
<MARQUEE scrollAmount=3 direction=up>
<P align=center><FONT face=华文行楷 color=#ff0000 size=8>朋友您好！</FONT></P>
<P align=center><FONT face=华文行楷 color=#ff0000 size=8>亲自动手！</FONT></P>
<P align=center><FONT face=华文行楷 color=#ff0000 size=8>体验成功！</FONT></P>
<P align=center><FONT face=华文行楷 color=#ff0000 size=8>其乐无穷！</FONT></P></MARQUEE></P></TD></TR></TBODY></TABLE></P></DIV>

         32、竖排渐出字基本语法：

<DIV align=center>
<MARQUEE scrollAmount=1 scrollDelay=100 behavior=slide loop=1 width=550 height=293>
<MARQUEE style="LINE-HEIGHT: 120%; WRITING-MODE: tb-rl" scrollAmount=1 scrollDelay=100 direction=up width=550 height=290>
<P align=left><FONT style="FONT-SIZE: 18pt; FILTER: WIDTH: 100%; COLOR: #ea0000; LINE-HEIGHT: 130%; FONT-FAMILY: 方正姚体" color=#ff0000>我带着远古的心愿<BR>你怀揣前世的祈盼<BR>我饱含如许的虔诚<BR>你浸润最深的期待<BR>我们跨越万水千山<BR>赴今世的约定...<BR>你感觉我深情凝眸的甜柔<BR>我倾听你心室澎湃的跳动<BR>白云轻盈飘荡<BR>星月神秘闪烁<BR><BR>燃烧的篝火旁<BR>我们席地而坐<BR>倾诉不尽的相思<BR>燃烧的火焰是不灭的炙热<BR>让我们一起出发<BR>背上快乐的行囊<BR>携着一路的欢唱<BR>踏着灿烂的芬芳<BR>望--天上云卷霞飞<BR>看--地下小桥流水<BR>拥--郁郁山川入怀<BR>枕--簇簇波浪入眠<BR>把--忧烦抛在身后<BR>让--愉悦洒满诗行 <BR><BR></FONT></P></MARQUEE></MARQUEE></DIV>

                                                                  看看添加背景后的效果：

        方法是:将第32例的所有代码嵌入下面的代码中,然后在“背景图片地址”处换上你所喜欢的图片地址，调整一下图片的宽度和高度，合适为止。

<DIV></DIV>
<TABLE borderColor=#cd5c5c height=350 width=450 align=center border=3>
           <TBODY>
           <TR>
           <TD background=背景图片地址>第32例的所有代码</TD></TR></TBODY></TABLE> 

  33、让文字在背景图片上悠闲地飘飞 ：

<DIV></DIV>
<TABLE borderColor=#a000ff height=350 width=450 align=center border=3>
<TBODY>
<TR>
<TD background=图片地址>
<MARQUEE scrollAmount=3 direction=down behavior=alternate height=350>
<MARQUEE scrollAmount=3 behavior=alternate width=450>
<P align=center><FONT face=隶书 color=#ff0000 size=6 ff><B>写文字 </B></FONT></P></MARQUEE></MARQUEE></TD></TR></TBODY></TABLE>

 说明：

                 A、图片地址自己输入；

                 B、文字、字体和颜色可以变动。