<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml " xml:lang="en" lang="en">
<头>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="多彩文字,多色文本" />
<meta http-equiv="Description" content="利用CSS的Clip属性来创建多彩文字(Multi Colored Text)" />
<meta content="all" name="机器人" />
<meta http-equiv="pragma" content="no-cache" />
<meta name="author" content="forestgan" />
<meta name="copyright" content="forestgan" />
<title>多彩文字(Multi Colored Text)</title>
<style type="text/css">
正文{
背景：#FFFFFF；
颜色：#333333；
字体系列：Arial、Helvetica、sans-serif；
字体大小：100%；
行高：140%；
文本对齐：居中；
填充：0；
保证金：0；
}
p{
保证金：0；
}
地址{
字体大小：75%；
}
正文，html{
高度：100%；
}
* html, * html 正文{
溢出：隐藏；
}
＃顶部{
最小高度：90%；
溢出：自动；
}
* html #顶部{
身高：90%；
}
＃页脚{
高度：10%；
背景：#CC0000；
颜色：#FFFFFF；
}
地址{
顶部填充：1em；
字体样式：正常；
}
一个{
文本装饰：无；
}
.textBottom {
颜色：#333333；
位置：绝对；
左：3em；
顶部：1em；
字体：26px“世纪哥特式”、Arial、Helvetica、无衬线字体；
剪辑：矩形（18px 自动自动）；
}
.textTop {
颜色：#CC0000；
位置：绝对；
左：3em；
顶部：1em；
字体：26px“世纪哥特式”、Arial、Helvetica、无衬线字体；
剪辑：矩形（0 自动 18px 0）；
}
。容器 {
宽度：28em；
高度：5em；
保证金：1em 自动；
位置：相对；
背景：#F6F6F6；
}
.textTop：悬停{
颜色：#808080；
}
.textBottom:悬停{
颜色：#FF4646；
}
</风格>
</头>
<body lang="zh">
<div id="顶部">
<div class="container"> <a href="#" class="textTop">层叠样式表 </a> </div>
<p>文字的上半部分</p>
<div class="container"> <a href="#" class="textBottom">层叠样式表 </a> </div>
<p>文字的下半部分</p>
<div class="container"> <a href="#" class="textTop">层叠样式表 </a> <a href="#" class="textBottom">层叠样式表 </a> </分区>
<p>二组文字重合的效果</p>
</div>
<div id="页脚">
<地址>
设计者<a href="http://www.forest53.com">forestgan</a>本示范运用<a href="http://www.creativecommons.cn/">创作消耗授权</a> --署名和非商业用途。
</地址>
</div>
</正文>
</html>