<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Ketat//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml " xml:lang="en" lang="en">
<kepala>
<meta http-equiv="Jenis Konten" content="teks/html; charset=utf-8" />
<meta name="Kata Kunci" content="多彩文字,Teks Multi Warna" />
<meta http-equiv="Description" content="利用CSS 的 Klip 属性来创造 多彩文字(Teks Multi Warna)" />
<meta content="all" name="robot" />
<meta http-equiv="pragma" content="tanpa-cache" />
<meta name="penulis" content="forestgan" />
<meta name="hak cipta" content="forestgan" />
<title>多彩文字(Teks Beraneka Warna)</title>
<style type="text/css">
isi{
latar belakang: #FFFFFF;
warna: #333333;
keluarga font: Arial, Helvetica, sans-serif;
ukuran font: 100%;
tinggi garis: 140%;
perataan teks: tengah;
bantalan: 0;
margin: 0;
}
P{
margin: 0;
}
alamat{
ukuran font: 75%;
}
badan,html{
tinggi: 100%;
}
*html, *badan html{
meluap: tersembunyi;
}
#atas{
tinggi minimum: 90%;
meluap: otomatis;
}
* html #atas{
tinggi: 90%;
}
#footer{
tinggi: 10%;
latar belakang: #CC0000;
warna: #FFFFFF;
}
alamat{
bantalan atas: 1em;
gaya font: normal;
}
A{
dekorasi teks: tidak ada;
}
.teksBawah {
warna: #333333;
posisi: mutlak;
kiri: 3em;
atas: 1em;
font: 26px "Abad Gotik",Arial, Helvetica, sans-serif;
klip: rect(18px otomatis otomatis otomatis);
}
.textTop {
warna: #CC0000;
posisi: mutlak;
kiri: 3em;
atas: 1em;
font: 26px "Abad Gotik",Arial, Helvetica, sans-serif;
klip: persegi(0 otomatis 18px 0);
}
.wadah {
lebar: 28em;
tinggi: 5em;
margin: 1em otomatis;
posisi: relatif;
latar belakang: #F6F6F6;
}
.textTop: arahkan kursor {
warna: #808080;
}
.textBottom: arahkan kursor {
warna: #FF4646;
}
</gaya>
</kepala>
<tubuh lang="en">
<div id="atas">
<div class="container"> <a href="#" class="textTop">Lembar Gaya Bertingkat </a> </div>
<p>文字的上半部分</p>
<div class="container"> <a href="#" class="textBottom">Lembar Gaya Bertingkat </a> </div>
<p>文字的下半部分</p>
<div class="container"> <a href="#" class="textTop">Lembar Gaya Bertingkat </a> <a href="#" class="textBottom">Lembar Gaya Bertingkat </a> </ div>
<p>二组文字重合的效果</p>
</div>
<div id="footer">
<alamat>
Desain oleh <a href=" http://www.forest53.com">forestgan</a > 本演示采用<a href=" http://www.creativecommons.cn/ ">创作共用授权</a> --署名和非商业用途。
</alamat>
</div>
</tubuh>
</html>