<!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">
<cabeça>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Palavras-chave" content="多彩文字,Texto multicolorido" />
<meta http-equiv="Descrição" content="利用CSS 的 Clip 属性来创造 多彩文字(Texto multicolorido)" />
<meta content="all" name="robôs" />
<meta http-equiv="pragma" content="no-cache" />
<meta name="autor" content="forestgan" />
<meta name="copyright" content="forestgan" />
<title>多彩文字(Texto multicolorido)</title>
<style type="text/css">
corpo{
fundo: #FFFFFF;
cor: #333333;
família de fontes: Arial, Helvetica, sans-serif;
tamanho da fonte: 100%;
altura da linha: 140%;
alinhamento de texto: centro;
preenchimento: 0;
margem: 0;
}
p{
margem: 0;
}
endereço{
tamanho da fonte: 75%;
}
corpo,html{
altura: 100%;
}
*html, *corpo html{
estouro: oculto;
}
#principal{
altura mínima: 90%;
estouro: automático;
}
* html #top{
altura: 90%;
}
#rodapé{
altura: 10%;
plano de fundo: #CC0000;
cor: #FFFFFF;
}
endereço{
preenchimento superior: 1em;
estilo de fonte: normal;
}
um{
decoração de texto: nenhuma;
}
.textBottom{
cor: #333333;
posição: absoluta;
esquerda: 3em;
superior: 1em;
fonte: 26px "Century Gothic",Arial, Helvetica, sans-serif;
clipe: rect (18px automático automático);
}
.textTop {
cor: #CC0000;
posição: absoluta;
esquerda: 3em;
superior: 1em;
fonte: 26px "Century Gothic",Arial, Helvetica, sans-serif;
clipe: rect(0 auto 18px 0);
}
.container {
largura: 28em;
altura: 5em;
margem: 1em automático;
posição: relativa;
plano de fundo: #F6F6F6;
}
.textTop:hover {
cor: #808080;
}
.textBottom:hover {
cor: #FF4646;
}
</estilo>
</head>
<body lang="pt">
<div id="topo">
<div class="container"> <a href="#" class="textTop">Folha de estilos em cascata </a> </div>
<p>文字的上半部分</p>
<div class="container"> <a href="#" class="textBottom">Folha de estilos em cascata </a> </div>
<p>文字的下半部分</p>
<div class="container"> <a href="#" class="textTop">Folha de estilo em cascata </a> <a href="#" class="textBottom">Folha de estilo em cascata </a> </ div>
<p>二组文字重合的效果</p>
</div>
<div id="rodapé">
<endereço>
Design de <a href=" http://www.forest53.com">forestgan</a > 本演示采用<a href=" http://www.creativecommons.cn/ ">创作共用授权</a> --署名和非商业用途。
</endereço>
</div>
</body>
</html>