<!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 属性来创造 多彩文字(ข้อความหลายสี)" />
<meta content="all" name="robots" />
<meta http-equiv="pragma" content="no-cache" />
<meta name="author" content="forestgan" />
<meta name="copyright" content="forestgan" />
<title>多彩文字(ข้อความหลากสี)</title>
<style type="text/css">
เนื้อความ{
พื้นหลัง: #FFFFFF;
สี: #333333;
ตระกูลฟอนต์: Arial, Helvetica, sans-serif;
ขนาดตัวอักษร: 100%;
ความสูงของเส้น: 140%;
การจัดแนวข้อความ: กึ่งกลาง;
ช่องว่างภายใน: 0;
ระยะขอบ: 0;
}
พี{
ระยะขอบ: 0;
-
ที่อยู่{
ขนาดตัวอักษร: 75%;
}
เนื้อความ,html{
ความสูง: 100%;
-
* html, * เนื้อหา html{
ล้น: ซ่อนเร้น;
}
#สูงสุด{
ความสูงขั้นต่ำ: 90%;
ล้น: อัตโนมัติ;
}
* html #top{
ความสูง: 90%;
-
#ส่วนท้าย{
ความสูง: 10%;
พื้นหลัง: #CC0000;
สี: #FFFFFF;
}
ที่อยู่{
ช่องว่างด้านบน: 1em;
รูปแบบตัวอักษร: ปกติ;
-
{
การตกแต่งข้อความ: ไม่มี;
}
.textBottom {
สี: #333333;
ตำแหน่ง: แน่นอน;
ซ้าย: 3em;
ด้านบน: 1em;
ตัวอักษร: 26px "Century Gothic",Arial, Helvetica, sans-serif;
คลิป: ตรง (18px อัตโนมัติ อัตโนมัติ อัตโนมัติ);
}
.textTop {
สี: #CC0000;
ตำแหน่ง: แน่นอน;
ซ้าย: 3em;
ด้านบน: 1em;
ตัวอักษร: 26px "Century Gothic",Arial, Helvetica, sans-serif;
คลิป: ตรง (0 อัตโนมัติ 18px 0);
}
.คอนเทนเนอร์ {
ความกว้าง: 28em;
ความสูง: 5em;
ระยะขอบ: 1em อัตโนมัติ;
ตำแหน่ง: ญาติ;
พื้นหลัง: #F6F6F6;
}
.textTop:โฮเวอร์ {
สี: #808080;
}
.textBottom:โฮเวอร์ {
สี: #FF4646;
-
</สไตล์>
</หัว>
<body lang="en">
<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>