Beranda>Tutorial Desain Web>Efek khusus web

Buat tautan teks berwarna dengan CSS

Penulis：Eve Cole Waktu Pembaruan：2009-06-12 19:28:05

<html>
<kepala>
<title>CSS打造多彩文字链接</title>
<meta http-equiv="Jenis Konten" content="teks/html; charset=gb2312">
<gaya tipe="teks/css">
td {
ukuran font : 12px;
font-family : 宋体;
}
a { font-family: "宋体";
ukuran font: 9pt; dekorasi teks: tidak ada}
.t1{
warna: #CC0000;dekorasi teks: garis bawah
}
.t2{
dekorasi teks : tidak ada;
warna:#006699;
}

.t3 { warna: #006600; dekorasi teks: garis bawahi garis bawah}
.t4 { warna: #0066FF; dekorasi teks: garis-melalui}
.t5 { batas: 1px #FF0000 padat; tinggi: 20 piksel; warna: #000099}
.t6 { batas: #FF0000 padat; tinggi: 0 piksel; warna: #0066FF; lebar batas: 0px 0px 1px}
.t7 { batas: #FF0000 padat; tinggi: 0 piksel; warna: #0066FF; lebar batas: 0px 0px 1px; bantalan-bawah: 5px}
.t8 { batas: #FF0000 padat; tinggi: 0 piksel; warna: #0066FF; lebar batas: 0px 0px 1px; lebar: 200 piksel; perataan teks: tengah}
.t9 { batas: #FF0000 ganda; tinggi: 0 piksel; warna: #0066FF; lebar batas: 0px 0px 3px}
.t10 { batas: 1 piksel #FFFF00 padat; warna: #FFFF00; klip: tinggi; warna latar belakang: #990000; tinggi: 20 piksel; padding-atas: 5px; padding-kanan: 5px; bantalan-bawah: 5px; padding-kiri: 5px; lebar: 130 piksel: 0 piksel}
.t11 { PADDING-KANAN: 2px; PADDING-KIRI: 2px; PADDING-BAWAH: 2px; PADDING-ATAS: 2px; warna latar belakang:#D9DEE8; tinggi: 25 piksel; lebar: 150 piksel; perataan teks: tengah; ; perbatasan: #D9DEE8; gaya perbatasan: awal; lebar batas atas: 2 piksel; lebar batas kanan: 2px; lebar batas bawah: 2px; batas-kiri-lebar: 2px}
.t12{
dekorasi teks : tidak ada;
warna:#006699;
; tinggi: 25 piksel; lebar: 130 piksel; padding-atas: 4px; padding-kanan: 4px; bantalan-bawah: 4px; padding-kiri: 4px
; batas: 1 piksel #0000CC padat
; filter: Blur(Tambah=1, Arah=45, Kekuatan=2)
; perataan teks: tengah
}
.t13 { warna: #FFFF00; dekorasi teks: tidak ada; tinggi: 25 piksel; lebar: 120 piksel; font-family: "宋体"; ukuran font: 12px; gambar latar belakang: url(bk3.gif); padding-atas: 6 piksel; padding-kiri: 5px; perataan teks: tengah}
.t13:hover { warna: #FFFFFF; dekorasi teks: tidak ada; gambar latar belakang: url(bk4.gif); tinggi: 25 piksel; lebar: 120 piksel; padding-atas: 6px; padding-kiri: 5px; perataan teks: tengah}
.t14 { warna: #FFFF00; dekorasi teks: tidak ada; tinggi: 25 piksel; lebar: 120 piksel; font-family: "宋体"; ukuran font: 12px; gambar latar belakang: url(bk1.gif); padding-atas: 5px; padding-kiri: 5px}
.t14:hover { warna: #000000; dekorasi teks: tidak ada; gambar latar belakang: url(bk2.gif); tinggi: 25 piksel; lebar: 120 piksel; padding-atas: 5px; padding-kiri: 5px}


.t1: arahkan kursor{
warna: #0000FF;dekorasi teks: garis bawah
}
.t2: arahkan kursor{
dekorasi teks : garis bawah;
warna:#339900;
}

.t3:hover { warna: #9900CC; dekorasi teks: tidak ada}
.t4:hover { warna: #FF0099; dekorasi teks: tidak ada}
.t5:hover { perbatasan: 1px #0000FF padat; tinggi: 20 piksel; warna: #CCCC00}
.t6:hover { perbatasan: padat; tinggi: 0 piksel; warna: #0066FF; lebar batas: 0px 0px 1px; warna tepian: #00FF00 #00FF00 #00FF33 #00FF33}
.t7:hover { perbatasan: #FF0000 padat; tinggi: 0 piksel; warna: #990000; lebar batas: 0px 0px 1px; bantalan-bawah: 2px}
.t8:hover { perbatasan: #FF0000 padat; tinggi: 0 piksel; warna: #336600; lebar batas: 0px 0px 1px; lebar: 170 piksel; perataan teks: tengah}
.t9:hover { perbatasan: #FF0000 ganda; tinggi: 0 piksel; warna: #0066FF; lebar batas: 0px 0px 5px}
.t10:hover { perbatasan: 1px #0000FF padat; warna: #333333; klip: tinggi; warna latar belakang: #C8D8F0; tinggi: 20 piksel; padding-atas: 5px; padding-kanan: 5px; bantalan-bawah: 5px; padding-kiri: 5px; lebar: 130 piksel: 0 piksel}
.t11:hover { BORDER-RIGHT: #99CCFF 1px awal; PADDING-KANAN: 2px; BORDER-TOP: #99CCFF 1px awal; PADDING-KIRI: 2px; PADDING-BAWAH: 2px; BORDER-LEFT: #99CCFF 1px awal; PADDING-ATAS: 2 piksel; BORDER-BOTTOM: #99CCFF 1px awal;warna latar:#C8D8F0; tinggi: 25 piksel; lebar: 150 piksel; perataan teks: tengah; }
.t12: arahkan kursor{
dekorasi teks : tidak ada;
warna:#006699;
; tinggi: 25 piksel; lebar: 130 piksel; padding-atas: 4px; padding-kanan: 4px; bantalan-bawah: 4px; padding-kiri: 4px
; batas: 1 piksel #0000CC padat
; filter: Blur(Tambah=1, Arah=45, Kekuatan=1)
; perataan teks: tengah
}
.txt10 { tinggi baris: 15px}

</style>
<bahasa skrip="JavaScript">
<!--
fungsi MM_preloadImages() { //v3.0
var d=dokumen; if(d.gambar){ if(!d.MM_p) d.MM_p=Array baru();
var i,j=d.MM_p.length,a=MM_preloadImages.argumen; untuk(i=0; i<a.panjang; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=Gambar baru; d.MM_p[j++].src=a[i];}}
}
//-->
</skrip>
</head>

<tubuh bgcolor="#EBEAF4" text="#000000" onLoad="MM_preloadImages('bk4.gif','bk3.gif','bk2.gif','bk1.gif')">
<tabel lebar = "300" border = "0" Cellspacing = "1" cellpadding = "5" align = "center" bgcolor = "#CCCCCC">
<tr bgcolor="#FFFFFF" align="tengah">
<td colspan="2" class="txt10">Fitur 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="kanan">
<td colspan="2"> <a href=" http://www.downcodes.com ">建站学院</a>改编</td>
</tr>
</tabel>
<p kelas="t2">&nbsp;</p>
</tubuh>
</html>
Artikel Terkait