<html>
<頭>
<title>CSS打造多彩な文字链接</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
td{
フォントサイズ: 12px;
font-family : 宋体;
}
a { font-family: "宋体";
フォントサイズ: 9pt;テキスト装飾: なし}
.t1{
色: #CC0000;テキスト装飾: 下線
}
.t2{
テキスト装飾: なし;
色:#006699;
.t3
{ 色: #006600;テキスト装飾: 下線上線}
.t4 { カラー: #0066FF;テキスト装飾: ラインスルー}
.t5 { ボーダー: 1px #FF0000 ソリッド;高さ: 20ピクセル;色: #000099}
.t6 { 境界線: #FF0000 実線;高さ: 0px;色: #0066FF;境界線の幅: 0px 0px 1px}
.t7 { 境界線: #FF0000 実線;高さ: 0px;色: #0066FF;境界線の幅: 0px 0px 1px;パディングボトム: 5px}
.t8 { ボーダー: #FF0000 ソリッド;高さ: 0px;色: #0066FF;境界線の幅: 0px 0px 1px; 幅: 200ピクセル;テキスト整列: 中央}
.t9 { ボーダー: #FF0000 double;高さ: 0px;色: #0066FF;境界線の幅: 0px 0px 3px}
.t10 { ボーダー: 1px #FFFF00 ソリッド;色: #FFFF00;クリップ: 高さ;背景色: #990000;高さ: 20ピクセル;パディングトップ: 5px;パディング右: 5px;パディングボトム: 5px;パディング左: 5px;幅: 130ピクセル: 0ピクセル}
.t11 { PADDING-RIGHT: 2px;パディング左: 2px;パディングボトム: 2px;パディングトップ: 2px;背景色:#D9DEE8;高さ: 25px;幅: 150ピクセル;テキスト整列: 中央; ;境界線: #D9DEE8;ボーダースタイル: 開始;ボーダー上部の幅: 2px;ボーダー右幅: 2px;ボーダーの下の幅: 2px;ボーダー左の幅: 2px}
.t12{
テキスト装飾: なし;
色:#006699;
;高さ: 25px;幅: 130ピクセル;パディングトップ: 4px;パディング右: 4px;パディングボトム: 4px;パディング左: 4px
;ボーダー: 1px #0000CC ソリッド
;フィルター：ぼかし(加算=1、方向=45、強さ=2)
;テキスト配置: 中央
}
.t13 { カラー: #FFFF00;テキスト装飾: なし。高さ: 25px;幅: 120ピクセル;フォントファミリー: "宋体";フォントサイズ: 12px;背景画像: URL(bk3.gif);パディングトップ: 6px;パディング左: 5px;テキスト整列: 中央}
.t13:hover { カラー: #FFFFFF;テキスト装飾: なし。背景画像: URL(bk4.gif);高さ: 25px;幅: 120ピクセル;パディングトップ: 6px;パディング左: 5px;テキスト整列: 中央}
.t14 { カラー: #FFFF00;テキスト装飾: なし。高さ: 25px;幅: 120ピクセル;フォントファミリー: "宋体";フォントサイズ: 12px;背景画像: URL(bk1.gif);パディングトップ: 5px;パディング左: 5px}
.t14:hover { color: #000000;テキスト装飾: なし。背景画像: URL(bk2.gif);高さ: 25px;幅: 120ピクセル;パディングトップ: 5px;パディング左: 5px}
.t1:ホバー{
色: #0000FF;テキスト装飾: 下線
}
.t2:ホバー{
テキスト装飾: 下線;
色:#339900;
.t3
:hover {色: #9900CC;テキスト装飾: なし}
.t4:hover { カラー: #FF0099;テキスト装飾: なし}
.t5:hover { ボーダー: 1px #0000FF ソリッド;高さ: 20ピクセル;色: #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; 幅: 170ピクセル;テキスト整列: 中央}
.t9:hover { border: #FF0000 double;高さ: 0px;色: #0066FF;境界線の幅: 0px 0px 5px}
.t10:hover { ボーダー: 1px #0000FF ソリッド;色: #333333;クリップ: 高さ;背景色: #C8D8F0;高さ: 20ピクセル;パディングトップ: 5px;パディング右: 5px;パディングボトム: 5px;パディング左: 5px;幅: 130ピクセル: 0ピクセル}
.t11:hover { BORDER-RIGHT: #99CCFF 1px アウトセット;パディング右: 2px;ボーダートップ: #99CCFF 1px アウトセット;パディング左: 2px;パディングボトム: 2px;ボーダー左: #99CCFF 1px アウトセット;パディングトップ: 2px; BORDER-BOTTOM: #99CCFF 1px アウトセット;背景色:#C8D8F0;高さ: 25px;幅: 150ピクセル;テキスト整列: 中央; }
.t12:ホバー{
テキスト装飾: なし;
色:#006699;
;高さ: 25px;幅: 130ピクセル;パディングトップ: 4px;パディング右: 4px;パディングボトム: 4px;パディング左: 4px
;ボーダー: 1px #0000CC ソリッド
;フィルター：ぼかし(加算=1、方向=45、強さ=1)
;テキスト配置: 中央
}
.txt10 {行の高さ: 15px}
</style>
<スクリプト言語="JavaScript">
<!--
関数 MM_preloadImages() { //v3.0
var d=ドキュメント; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=新しい画像; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
</head>
<body bgcolor="#EBEAF4" text="#000000" onLoad="MM_preloadImages('bk4.gif','bk3.gif','bk2.gif','bk1.gif')">
<table width="300" border="0" cellpacing="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>
</body>
</html>