详细分析如何实现图片懒加载(lazyload)，提高用户体验 代码人生
-
懒加载的意义（为什么要使用懒加载）
-
原理
-
代码
懒加载的意义（为什么要使用懒加载）
对页面加载速度影响最大的就是图片，一张普通的图片可以达到几M的大小，而代码也许就只有几十KB。当页面图片很多时，页面的加载速度缓慢，几S钟内页面没有加载完成，也许会失去很多的用户。
所以，对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升，也提高了用户体验。
原理
将页面中的img标签src指向一张小图片或者src为空，然后定义data-src（这个属性可以自定义命名，我才用data-src）属性指向真实的图片。src指向一张默认的图片，否则当src为空时也会向服务器发送一次请求。可以指向loading的地址。
注：图片要指定宽高
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" />
当载入页面时，先把可视区域内的img标签的data-src属性值负给src，然后监听滚动事件，把用户即将看到的图片加载。这样便实现了懒加载。
代码
在写代码前，需要了解各种高度。可以参考这篇文章：https://mrxn.net/codelife/jQuery-css-scrollTop-scrollLeft-offsetLeft.html
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img {
display: block;
margin-bottom: 50px;
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
<img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">
<img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
<img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
</body>
JavaScript
<script>
var num = document.getElementsByTagName('img').length;
var img = document.getElementsByTagName("img");
var n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历
lazyload(); //页面载入完毕加载可是区域内的图片
window.onscroll = lazyload;
function lazyload() { //监听页面滚动事件
var seeHeight = document.documentElement.clientHeight; //可见区域高度
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度
for (var i = n; i < num; i++) {
if (img[i].offsetTop < seeHeight + scrollTop) {
if (img[i].getAttribute("src") == "default.jpg") {
img[i].src = img[i].getAttribute("data-src");
}
n = i + 1;
}
}
}
</script>
jQuery
<script>
var n = 0,
imgNum = $("img").length,
img = $('img');
lazyload();
$(window).scroll(lazyload);
function lazyload(event) {
for (var i = n; i < imgNum; i++) {
if (img.eq(i).offset().top < parseInt($(window).height()) + parseInt($(window).scrollTop())) {
if (img.eq(i).attr("src") == "default.jpg") {
var src = img.eq(i).attr("data-src");
img.eq(i).attr("src", src);
n = i + 1;
}
}
}
}
</script>
使用节流函数进行性能优化
如果直接将函数绑定在scroll事件上，当页面滚动时，函数会被高频触发，这非常影响浏览器的性能。
我想实现限制触发频率，来优化性能。
节流函数：只允许一个函数在N秒内执行一次。下面是一个简单的节流函数：
// 简单的节流函数
//fun 要执行的函数
//delay 延迟
//time 在time时间内必须执行一次
function throttle(fun, delay, time) {
var timeout,
startTime = new Date();
return function() {
var context = this,
args = arguments,
curTime = new Date();
clearTimeout(timeout);
// 如果达到了规定的触发时间间隔，触发 handler
if (curTime - startTime >= time) {
fun.apply(context, args);
startTime = curTime;
// 没达到触发间隔，重新设定定时器
} else {
timeout = setTimeout(fun, delay);
}
};
};
// 实际想绑定在 scroll 事件上的 handler
function lazyload(event) {}
// 采用了节流函数
window.addEventListener('scroll',throttle(lazyload,500,1000));
php加密-使用php_screw 1.5加密PHP文件的安装与使用 PHP
php文件通常以文本格式存贮在服务器端, 很容易被别人读到源代码, 为了对源代码进行保护, 可以采用对源代码进行加密的方式.要实现该功能需要两部分:
一是加密程序,实现对PHP文件的加密. 另一个就是对加密过的PHP文件进行解析, 以得到运行结果. 前者的实现比较简单, 就是一程序而已. 后者的实现大部分都是通过php module的形式来实现的.
php_screw(螺丝钉)可以实现以上的功能.最新版本是1.5,可以在sourceforge上下载.
安装:
安装的目的其实就是产生两个文件:一个是用于加密PHP文件的screw, 另一个就是php加载的解析模块php_screw.so
0.先下载php_screw http://sourceforge.net/projects/php-screw/files/ 或者是 http://jaist.dl.sourceforge.net/project/php-screw/php-screw/1.5/php_screw-1.5.tar.gz
解压，更改my_screw.h，里面的几个数字就是SEED，相当于密码，可以随意更改、增加
#tar -xzvf php_screw_1.5.tar.gz #cd php_screw_1.5 #/opt/php/bin/phpize #./configure --with-php-config=/opt/php/bin/php-config #vi my_screw.h (这个是密码文件，用户自己设置加密码的密码） #make （make的作用是生成php_screw.so文件，这个文件是php用来解释加密码php文件的，生成的文件在./modules目录下. #cp ./modules/php_screw.so /opt/php/lib/php/extensions (php的扩展目录) #cd tools #make (make 生成screw 这个可执行文件，它用来加密码php文件，生成加密码后的.php文件） OK，编译完成
或者是下面的方法：
1.将源代码包展开, 并进入该入目录:
2. 执行phpize, 就会在该目录下产生一个configure
3. 然后,运行configure
4. 再make
这样, 解析用的php_screw.so就生成了. 接下来要得到加密用的screw
1. 进入源码的tools目录
2. make
这样就生成了screw了. 如果要加密一个lx.php文件, 则: screw lx.php, lx.php就变成加密的了, 原来明文的lx.php被改名为lx.php.screw
接下来的任务就应该是加载php_screw.so模块了,
首先, 将该文件COPY到module目录下, 具体是哪个目录,可以参见/etc/php.ini配置文件中的extension_dir项,RHEL 5中为/usr/lib/php/modules
方法一:可以在/etc/php.d目录下新建一个screw.ini文件(文件是可以任意取的),其内容是一句话extension=php_screw.so
方法二:通过修改php.ini文件, 增加了一句extension=php_screw.so, 重启apache后就成功了.
重要说明：
编译的.so文件理论上跟你当前的php版本是相关的，也就是说，如果你是在php 5.1下编译的，就不能拿到php 5.2下去用，因为php的可加载模块总是与其版本相关的．而加密用的screw可执行文件理论上讲无所谓，只有他跟screw.so属于同一个版本就可以
测试:
编写一个hello, world程序,文件名为hello.php如下:
<?php echo "Hello,world"; ?>
用php hello.php测试程序是否能成功显示, 成功显示后, 用screw对其进行加密(screw helllo.php), 然后cat一下该php文件, 发现已经不是文本的了, 变成了许多乱字符, 说明加秘成功, 然后再php hello.php, 如果能正常显示hello,world, 则说明加密的解析也没有问题了, 一切就算OK了.否则, 就说明还有不对的地方, 需要再仔细检查.
安装过程中遇到的问题:
1.找不到phpize
phpize是属于php-develp的一个工具, (具体作用请自行解决) 因此, 必须要安装php-develp包. 中间有一些依赖, 如下:
[root@localhost Server]# rpm -ivh php-devel-5.1.6-5.el5.i386.rpm
warning: php-devel-5.1.6-5.el5.i386.rpm: Header V3 DSA signature: NOKEY, key ID 37017186
error: Failed dependencies:
autoconf is needed by php-devel-5.1.6-5.el5.i386
automake is needed by php-devel-5.1.6-5.el5.i386
[root@localhost Server]# rpm -ivh autoconf
autoconf213-2.13-12.1.noarch.rpm autoconf-2.59-12.noarch.rpm
[root@localhost Server]# rpm -ivh autoconf-2.59-12.noarch.rpm
warning: autoconf-2.59-12.noarch.rpm: Header V3 DSA signature: NOKEY, key ID 37017186
error: Failed dependencies:
imake is needed by autoconf-2.59-12.noarch
[root@localhost Server]# rpm -ivh imake-1.0.2-3.i386.rpm
warning: imake-1.0.2-3.i386.rpm: Header V3 DSA signature: NOKEY, key ID 37017186
Preparing... ########################################### [100%]
1:imake ########################################### [100%]
[root@localhost Server]# rpm -ivh autoconf-2.59-12.noarch.rpm
warning: autoconf-2.59-12.noarch.rpm: Header V3 DSA signature: NOKEY, key ID 37017186
Preparing... ########################################### [100%]
1:autoconf ########################################### [100%]
[root@localhost Server]# rpm -ivh automake
automake14-1.4p6-13.noarch.rpm automake16-1.6.3-8.noarch.rpm automake-1.9.6-2.1.noarch.rpm
automake15-1.5-16.noarch.rpm automake17-1.7.9-7.noarch.rpm
[root@localhost Server]# rpm -ivh automake-1.9.6-2.1.noarch.rpm
warning: automake-1.9.6-2.1.noarch.rpm: Header V3 DSA signature: NOKEY, key ID 37017186
Preparing... ########################################### [100%]
1:automake ########################################### [100%]
[root@localhost Server]# rpm -ivh php-devel-5.1.6-5.el5.i386.rpm
warning: php-devel-5.1.6-5.el5.i386.rpm: Header V3 DSA signature: NOKEY, key ID 37017186
Preparing... ########################################### [100%]
1:php-devel ########################################### [100%]
2.每个加密的文件头部都一个很明显的字符串PM9SCREW, 这样很容易被人猜到是用screw加密的.
这个问题的解决需要在安装的第一步就开始. 该标识串在源码的php_screw.h中. 在编译之前, 可以更改这个字符串, 例如,更改为PeterHu, 相应的下面的长度就不再是10了, 而是\tPeterHu\t,一共7个了.
#define PM9SCREW "\tPM9SCREW\t" #define PM9SCREW_LEN 10
PS:编译过程中碰见的几个问题如下（解决方法）
1。 /root/php_screw-1.5/php_screw.c: In function ‘pm9screw_compile_file’:
解决方法：
需要修改php_screw.c
把第78,84,93行的org_compile_file(file_handle, type);
修改为：
org_compile_file(file_handle, type TSRMLS_CC);
然后再make就成功了。
2. /opt/soft/php_screw-1.5/php_screw.c: In function ‘zm_startup_php_screw’:/opt/soft/php_screw-1.5/php_screw.c:124: 错误：‘zend_compiler_globals’ 没有名为 ‘extended_info’ 的成员/opt/soft/php_screw-1.5/php_screw.c: In function ‘zm_shutdown_php_screw’:/opt/soft/php_screw-1.5/php_screw.c:133: 错误：‘zend_compiler_globals’ 没有名为 ‘extended_info’ 的成员make: *** [php_screw.lo] 错误 1
解决方法：
需要修改php_screw.c
把CG(extended_info) = 1;
修改为：
CG(compiler_options) |= ZEND_COMPILE_EXTENDED_INFO;
php_screw如何对当前目录下，对目录下包含的文件，以及包含目录下的文件进行整体加密
find ./ -name "*.php" －print|xargs -n1 screw //加密所有的.php文件
find ./ -name "*.screw" -print/xargs -n1 rm //删除所有的.php源文件的备份文件
命令都实验过成功的.........应该没什么再补充的咯....
css样式设置小技巧汇总 PHP
水平居中设置-行内元素
如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。如下代码：
html代码：
<body> <div class="txtCenter">我是文本，哈哈，我想要在父容器中水平居中显示。</div> </body>
css代码：
<style>
div.txtCenter{ text-align:center; }
</style>
水平居中设置-定宽块状元素
当被设置元素为块状元素时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。这一小节我们先来讲一讲定宽块状元素。
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中：
html代码：
<body> <div>我是定宽块状元素，哈哈，我要水平居中显示。</div> </body>
css代码：
<style>
div{
border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
width:500px;/*定宽*/ margin:20px auto;/* margin-left 与 margin-right 设置为 auto */ }
</style>
也可以写成：
margin-left:auto; margin-right:auto;
注意：元素的“上下 margin” 是可以随意设置的。
水平居中总结-不定宽块状元素方法（一）
在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。
不定宽度的块状元素有三种方法居中（这三种方法目前使用的都比多）：
- 加入 table 标签
- 设置 display;inline 方法
- 设置 position:relative 和 left:50%;
这一小节我们来讲一下第一种方法：
第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。
第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。
举例如下：
html代码：
<div> <table> <tbody> <tr><td> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </td></tr> </tbody> </table> </div>
css代码：
<style> table{
margin:0 auto;
} ul{list-style:none;margin:0;padding:0;}
li{float:left;display:inline;margin-right:8px;}
</style>
水平居中总结-不定宽块状元素方法（二）
第二种方法：改变块级元素的 dispaly 为 inline 类型，然后使用 text-align:center 来实现居中效果。如下例子：
html代码：
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
css代码：
<style>
.container{ text-align:center; }
.container ul{
list-style:none;
margin:0;
padding:0; display:inline; }
.container li{
margin-right:8px;
display:inline;
}
</style>
这种方法相比第一种方法的优势是不用增加无语义标签，简化了标签的嵌套深度，但也存在着一些问题：它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值。
水平居中总结-不定宽块状元素方法（三）
方法三：通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:-50% 来实现水平居中。
代码如下：
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
css代码：
<style>
.container{ float:left;
position:relative;
left:50% }
.container ul{
list-style:none;
margin:0;
padding:0; position:relative;
left:-50%; }
.container li{float:left;display:inline;margin-right:8px;}
</style>
这种方法可以保留块状元素仍以 display:block 的形式显示，优点不添加无语议表标签，不增加嵌套深度，但它的缺点是设置了 position:relative，带来了一定的副作用。
这三种方法使用得都非常广泛，各有优缺点，具体选用哪种方法，可以视具体情况而定。
垂直居中-父元素高度确定的单行文本
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。如下代码：
<div class="container">
hi,Mrxn!
</div>
css代码：
<style>
.container{ height:100px;
line-height:100px; background:#999;
}
</style>
垂直居中-父元素高度确定的多行文本（方法一）
父元素高度确定的多行文本、图片、块状元素的竖直居中的方法有两种：
方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
说到竖直居中，css 中有一个用于竖直居中的属性 vertical-align，但这个样式只有在父元素为 td 或 th 时，才会生效。所以又要插入 table 标签了。下面看一下例子：
html代码：
<body> <table><tbody><tr><td class="wrap"> <div> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> </div> </td></tr></tbody></table> </body>
css代码：
table td{height:500px;background:#ccc}
因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。
垂直居中-父元素高度确定的多行文本（方法二）
在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell，激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式。
html代码：
<div class="container">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</div>
css代码：
<style>
.container{
height:300px;
background:#ccc; display:table-cell;/*IE8以上及Chrome、Firefox*/ vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>
这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容 IE6、7。
隐性改变display类型
有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：
- position : absolute
- float : left 或 float:right
元素会自动变为以 display:inline-block 的方式显示，当然就可以设置元素的 width 和 height 了且默认宽度不占满父元素。
如下面的代码，小伙伴们都知道 a 标签是行内元素，所以设置它的 width 是 没有效果的，但是设置为 position:absolute 以后，就可以了。
<div class="container">
<a href="#" title="">请单击这里</a>
</div>
css代码
<style>
.container a{ position:absolute; width:200px;
background:#ccc;
}
</style>
自动压缩、加密 CSS/JavaScript 优化网站性能 PHP
关于压缩
压缩 CSS 的方法, 无外乎缩写代码和清除多余字符来实现, 平时只要养成使用缩写的技巧就可以明显减少最终代码的整体大小. 在此我就不做过多的描述, 后文也会有简单的压缩代码.
相比于前者, JavaScript 的压缩方式就比较丰富工具也很多, 常用的有: Packer/YUI-compressor/Dojo Compressor 等, 本人比较喜欢用 Packer 来压缩, 压缩比例可以达到 50% 上下.
我不知道读者是如何对 CSS/JavaScript 进行处理的, 但在此之前我都是线下压缩然后在上传, 但还是有些麻烦且不便于管理. 于是最近正好找到一个 Packer 的后端类, 在不改动原 CSS/JavaScript 的前提下实时压缩文件并输出, 可以更好的解决我目前的困扰.
实现过程
首先在下载：packer.php-1.1.zip 并解压 class.JavaScriptPacker.php 到你的当前主题目录, 然后在相同位置创建compress.php 文件, 内容如下:
<?php
'javascript', 'css' => 'css');
if (file_exists($path)) { // 判断文件存在的情况下在执行压缩工作
Header('Content-Type: text/' . $head[$info] . '; charset=utf-8'); // 必需定义相应的文件头
$script = file_get_contents($path); //读取文件
if ($info != 'css') { // 判断不同的文件类型做处理
require 'class.JavaScriptPacker.php'; // 引用 Packer 类
$packer = new JavaScriptPacker($script, 'Normal', true, false); // 设置压缩参数
$packed = $packer->pack(); // 压缩并写入变量
} else { // 处理 CSS 文件
$packer = preg_replace("!/\*[^*]*\*+([^/][^*]*\*+)*/!", "", $script); // 清除多余注释
$packed = str_replace(array("\r\n", "\r", "\n", "\t", " ", " ", " "), null, $packer); // 清除多余换行、空格、缩进符
}
echo $packed; // 输出所压缩的内容
}
;?>
然后在相同的位置创建一个 .htaccess 文件, 内容如下：
RewriteEngine On
RewriteRule (.*.(js|css))$ /compress.php?name=$1
后记
该方法在自己的vps+Apache 环境下通过, 直接访问相应文件的绝对路径就会自动压缩并输出, 但是如果你的主机不支持 Rewrite 功能的话, 可以跳过创建 .htaccess 然后通过 http://youdomain.com/content/templates/主题目录/compress.php?name=文件名称.css/js 来调用文件.
css自适应宽度滑动门菜单 PHP
html css width 自适应
什么是CSS自适应宽度滑动门菜单？
CSS自适应宽度菜单指菜单的宽度可以随着内容的增加而变宽，就拿下边的实例来说，是按4个字的宽度来设计的，如果其中一项为5个字或更多，就放不下了。那么我们就需要让它的宽度可以随着内容的增减而变化，这就是css自适应宽度菜单。
自适应宽度按钮的效果是怎样的呢？
那么，自适应宽度按钮，是怎么实现的呢？
要想实现自适应宽度，需要在文字上增加一个辅助标签，如span，分别在a上和span上设置背景，一个左侧对齐，一个右侧对齐
绿色部分为span，然后定义它的背景图片靠右侧对齐，而左侧的部分为a的背景图片，定义靠左侧对齐。当文字多时，会把span撑开，这实现了自适应宽度的按钮了。这里需要一张如下的图片，它的宽度要宽于你所应用的最宽宽度，这样才能显示正常，同时根据以前学习的css Sprites技术，把背景图片和鼠标经过图片放到一张图片上。
本博客开通显示IP签名的图片功能了 代码人生
对于经常逛论坛和在空间写日志的朋友来说，显示IP签名的图片应该并不陌生吧，博主我经过一段时间的折腾，成功了，嘿嘿，下面是效果：
大家也可以在论坛或者是空间调用我的这个签名图片了，地址是:https://mrxn.net/ip/ip.asp
例如在论坛签名里面：
[img]https://mrxn.net/ip/ip.asp[/img] 就能够直接显示在你的签名里面了。
这只是开始，后期会增加DIY功能：
1.自定义背景颜色或者是图片；
2.自定义头部和底部信息；
3.增加自动更换背景图片或颜色和底部信息。
更多功能，你也可以留言评论你想增加的功能！
注：本功能只是用于学习，不保证其时效性！
子元素浮动父容器高度不能自适应的CSS解决方法 代码人生
网页前端工作者经常会遇到子元素设置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语言解析
对于不熟悉洋文的人来说，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>
看看效果：
注意两点；一是这个移动代码<marquee>默认向左移动；二是要点右上角“预览”才能动起来。
移动 属性如下：
direction=移动方向 可选值为向上(up) 向下(down) 向左(left) 向右(right)
向右移动：<marquee direction= right> <FONT face=隶书 color=#ff0000 size=5> <B>欢迎您光临Mrxn的博客！！</B> </FONT > </marquee>
左右来回移动：<marquee behavior=alternate> <FONT face=隶书 color=#ff0000 size=5> <B>欢迎您光临Mrxn的博客！！</B> </FONT > </marquee>
向上移动：<marquee direction= up> <FONT face=隶书 color=#ff0000 size=5> <B>欢迎您光临Mrxn的博客！！</B> </FONT > </marquee>
向下移动：<marquee direction= down> <FONT face=隶书 color=#ff0000 size=5> <B>欢迎您光临Mrxn的博客！！</B> </FONT > </marquee>
上下来回移动：<marquee direction= down behavior=alternate > <FONT face=隶书 color=#ff0000 size=5> <B>欢迎您光临Mrxn的博客！！</B> </FONT > </marquee>
注意：使用“direction= up behavior=alternate”也可得此效果。
7、调整移动速度： 代码是:scrollamount=1 “1”是可变值，数值越大越快。
这个代码加在哪里？因为它是属于移动这一属性的，所以就要写在移动代码一起。即：<marquee direction= up scrollamount=1 > <FONT face=隶书 color=#ff0000 size=5> <B>欢迎您光临Mrxn的博客！！</B> </FONT > </marquee> 看看效果：
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>
效果：
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的取值。
效果如下：
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、文字、字体和颜色可以变动。
HTML语言学习教程——HTML语言剖析 技术文章
|
-
admin 约 22 小时前
@東咩：无
-
@rookie：没做
-
@无敌：无
-
www.rxka.com/ 请问又这个网站的密码吗
-
求教一下 118.195.198.108:20001/
-
哥，还能再分享不 百度账号：東咩
-
@人大代表：我不知道 也不评论
-
@admin：坦白从宽，你懂的。
-
admin 2024-03-28 22:38
@人大代表：卧槽 别搞我...
-
24年的新闻，你22年爆出来了。厉害了，大哥。
