<html>
<หัว>
<title>CSS 打造多彩文字链接</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
ทีดี {
ขนาดตัวอักษร : 12px;
ตระกูลฟอนต์ : 宋体;
-
a { ตระกูลแบบอักษร: "宋体";
ขนาดตัวอักษร: 9pt; การตกแต่งข้อความ: none}
.t1{
สี: #CC0000; ตกแต่งข้อความ: ขีดเส้นใต้
-
.t2{
การตกแต่งข้อความ : ไม่มี;
สี:#006699;
}
.t3 { สี: #006600; การตกแต่งข้อความ: ขีดเส้นใต้ overline}
.t4 { สี: #0066FF; การตกแต่งข้อความ: เส้นผ่าน}
.t5 { เส้นขอบ: 1px #FF0000 ทึบ; ความสูง: 20px; สี: #000099}
.t6 { เส้นขอบ: #FF0000 ทึบ; ความสูง: 0px; สี: #0066FF; ความกว้างของเส้นขอบ: 0px 0px 1px}
.t7 { เส้นขอบ: #FF0000 ทึบ; ความสูง: 0px; สี: #0066FF; ความกว้างของเส้นขอบ: 0px 0px 1px; ช่องว่างด้านล่าง: 5px}
.t8 { เส้นขอบ: #FF0000 ทึบ; ความสูง: 0px; สี: #0066FF; ความกว้างของเส้นขอบ: 0px 0px 1px; ความกว้าง: 200px; การจัดแนวข้อความ: กึ่งกลาง}
.t9 { เส้นขอบ: #FF0000 สองเท่า; ความสูง: 0px; สี: #0066FF; ความกว้างของเส้นขอบ: 0px 0px 3px}
.t10 { เส้นขอบ: 1px #FFFF00 ทึบ; สี: #FFFF00; คลิป: ความสูง; สีพื้นหลัง: #990000; ความสูง: 20px; ช่องว่างด้านบน: 5px; ช่องว่างภายในขวา: 5px; ช่องว่างภายใน: 5px; ช่องว่างภายในซ้าย: 5px; ความกว้าง: 130px: 0px}
.t11 { ช่องว่างด้านขวา: 2px; PADDING-ซ้าย: 2px; ช่องว่างด้านล่าง: 2px; ช่องว่างด้านบน: 2px; สีพื้นหลัง:#D9DEE8; ความสูง: 25px; ความกว้าง: 150px; การจัดแนวข้อความ: กึ่งกลาง; - เส้นขอบ: #D9DEE8; สไตล์เส้นขอบ：เริ่มต้น; เส้นขอบด้านบนกว้าง: 2px; เส้นขอบขวาความกว้าง: 2px; เส้นขอบด้านล่างกว้าง: 2px; เส้นขอบซ้ายกว้าง: 2px}
.t12{
การตกแต่งข้อความ : ไม่มี;
สี:#006699;
- ความสูง: 25px; ความกว้าง: 130px; ช่องว่างด้านบน: 4px; ช่องว่างภายในขวา: 4px; ช่องว่างภายในด้านล่าง: 4px; ช่องว่างภายในด้านซ้าย: 4px
- ขอบ: 1px #0000CC ทึบ
- ตัวกรอง: เบลอ (เพิ่ม=1, ทิศทาง=45, ความแรง=2)
- การจัดแนวข้อความ: กึ่งกลาง
-
.t13 { สี: #FFFF00; การตกแต่งข้อความ: ไม่มี; ความสูง: 25px; ความกว้าง: 120px; ตระกูลฟอนต์: "宋体"; ขนาดตัวอักษร: 12px; ภาพพื้นหลัง: url(bk3.gif); ช่องว่างด้านบน: 6px; ช่องว่างภายในซ้าย: 5px; การจัดแนวข้อความ: กึ่งกลาง}
.t13:โฮเวอร์ { สี: #FFFFFF; การตกแต่งข้อความ: ไม่มี; ภาพพื้นหลัง: url(bk4.gif); ความสูง: 25px; ความกว้าง: 120px; ช่องว่างด้านบน: 6px; ช่องว่างภายในซ้าย: 5px; การจัดแนวข้อความ: กึ่งกลาง}
.t14 { สี: #FFFF00; การตกแต่งข้อความ: ไม่มี; ความสูง: 25px; ความกว้าง: 120px; ตระกูลฟอนต์: "宋体"; ขนาดตัวอักษร: 12px; ภาพพื้นหลัง: url(bk1.gif); ช่องว่างด้านบน: 5px; ช่องว่างภายใน: 5px}
.t14:โฮเวอร์ { สี: #000000; การตกแต่งข้อความ: ไม่มี; ภาพพื้นหลัง: url(bk2.gif); ความสูง: 25px; ความกว้าง: 120px; ช่องว่างด้านบน: 5px; ช่องว่างภายใน: 5px}
.t1:โฮเวอร์{
สี: #0000FF;การตกแต่งข้อความ: ขีดเส้นใต้
-
.t2:โฮเวอร์{
ตกแต่งข้อความ : ขีดเส้นใต้;
สี:#339900;
}
.t3:โฮเวอร์ { สี: #9900CC; การตกแต่งข้อความ: none}
.t4:โฮเวอร์ { สี: #FF0099; การตกแต่งข้อความ: none}
.t5: โฮเวอร์ { เส้นขอบ: 1px #0000FF ทึบ; ความสูง: 20px; สี: #CCCC00}
.t6:hover { เส้นขอบ: ทึบ; ความสูง: 0px; สี: #0066FF; ความกว้างของเส้นขอบ: 0px 0px 1px; เส้นขอบสี: #00FF00 #00FF00 #00FF33 #00FF33}
.t7:hover { เส้นขอบ: #FF0000 ทึบ; ความสูง: 0px; สี: #990000; ความกว้างของเส้นขอบ: 0px 0px 1px; ช่องว่างด้านล่าง: 2px}
.t8:hover { เส้นขอบ: #FF0000 ทึบ; ความสูง: 0px; สี: #336600; ความกว้างของเส้นขอบ: 0px 0px 1px; ความกว้าง: 170px; การจัดแนวข้อความ: กึ่งกลาง}
.t9:hover { เส้นขอบ: #FF0000 double; ความสูง: 0px; สี: #0066FF; ความกว้างของเส้นขอบ: 0px 0px 5px}
.t10: โฮเวอร์ { เส้นขอบ: 1px #0000FF ทึบ; สี: #333333; คลิป: ความสูง; สีพื้นหลัง: #C8D8F0; ความสูง: 20px; ช่องว่างด้านบน: 5px; ช่องว่างภายในขวา: 5px; ช่องว่างภายใน: 5px; ช่องว่างภายในซ้าย: 5px; ความกว้าง: 130px: 0px}
.t11:hover { เส้นขอบขวา: #99CCFF 1px เริ่มต้น; PADDING-ขวา: 2px; ขอบด้านบน: #99CCFF 1px เริ่มต้น; PADDING-ซ้าย: 2px; ช่องว่างด้านล่าง: 2px; ขอบซ้าย: #99CCFF 1px เริ่มต้น; ช่องว่างด้านบน: 2px; ขอบล่าง: #99CCFF 1px เริ่มต้น;สีพื้นหลัง:#C8D8F0; ความสูง: 25px; ความกว้าง: 150px; การจัดแนวข้อความ: กึ่งกลาง; -
.t12:โฮเวอร์{
การตกแต่งข้อความ : ไม่มี;
สี:#006699;
- ความสูง: 25px; ความกว้าง: 130px; ช่องว่างด้านบน: 4px; ช่องว่างภายในขวา: 4px; ช่องว่างภายในด้านล่าง: 4px; ช่องว่างภายในด้านซ้าย: 4px
- ขอบ: 1px #0000CC ทึบ
- ตัวกรอง: เบลอ (เพิ่ม=1, ทิศทาง=45, ความแรง=1)
- การจัดแนวข้อความ: กึ่งกลาง
-
.txt10 { ความสูงบรรทัด: 15px}
</style>
<ภาษาสคริปต์ = "จาวาสคริปต์">
-
ฟังก์ชัน MM_preloadImages() { //v3.0
var d=เอกสาร; if(d.images){ if(!d.MM_p) d.MM_p=อาร์เรย์ใหม่();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; สำหรับ(i=0; i<a.length; i++)
if (a[i].indexOf("#"!=0){ d.MM_p[j]=รูปภาพใหม่; d.MM_p[เจ++].src=a[i];}}
-
-
</สคริปต์>
</head>
<body bgcolor="#EBEAF4" text="#000000" onLoad="MM_preloadImages('bk4.gif','bk3.gif','bk2.gif','bk1.gif')">
<table width="300" border="0" cellspacing="1" cellpadding="5" align="center" bgcolor="#CCCCCC">
<tr bgcolor="#FFFFFF" align="center">
<td colspan="2" class="txt10">CSS 打造多彩文字链接</td>
</tr>
<tr bgcolor="#CCCCCC">
<td>หนึ่ง</td>
<td>初级链接样式</td>
</tr>
<tr bgcolor="#FFFFFF">
<td>1、</td>
<td><a href="#" class="t1">普通链接</a></td>
</tr>
<tr bgcolor="#FFFFFF">
<td>2、</td>
<td><a href="#" class="t2">无下划线链接</a></td>
</tr>
<tr bgcolor="#FFFFFF">
<td>3、</td>
<td><a href="#" class="t3">双划线链接</a></td>
</tr>
<tr bgcolor="#FFFFFF">
<td>4、</td>
<td><a href="#" class="t4">删除线链接</a></td>
</tr>
<tr bgcolor="#CCCCCC">
<td>二、</td>
<td>进阶链接样式风格</td>
</tr>
<tr bgcolor="#FFFFFF">
<td>1、</td>
<td><a href="#" class="t5">另类下划线的原理</a></td>
</tr>
<tr bgcolor="#FFFFFF">
<td>2、</td>
<td><a href="#" class="t6">定制下划线色彩</a></td>
</tr>
<tr bgcolor="#FFFFFF">
<td>3、 </td>
<td><a href="#" class="t7">定制下划线距离</a></td>
</tr>
<tr bgcolor="#FFFFFF">
<td>4、 </td>
<td><a href="#" class="t8">定制下划线长度和对齐方式</a></td>
</tr>
<tr bgcolor="#FFFFFF">
<td>5、 </td>
<td><a href="#" class="t9">定制双下划线</a></td>
</tr>
<tr bgcolor="#CCCCCC">
<td>三、</td>
<td>高级链接样式风格</td>
</tr>
<tr bgcolor="#FFFFFF">
<td>1、</td>
<td><a href="#" class="t10">定义块状链接</a></td>
</tr>
<tr bgcolor="#FFFFFF">
<td>2、</td>
<td><a href="#" class="t11">定义按钮风格的链接</a></td>
</tr>
<tr bgcolor="#FFFFFF">
<td>3、</td>
<td><a href="#" class="t12">定义特效链接</a></td>
</tr>
<tr bgcolor="#FFFFFF">
<td>4、</td>
<td><a href="#" class="t13">静态背景切换链接</a></td>
</tr>
<tr bgcolor="#FFFFFF">
<td>5、</td>
<td><a href="#" class="t14">动态背景切换链接</a></td>
</tr>
<tr bgcolor="#FFFFFF" align="right">
<td colspan="2"> <a href=" http://www.downcodes.com ">建站学院</a>改编</td>
</tr>
</ตาราง>
<p class="t2"> </p>
</ร่างกาย>
</html>