標題: [CSS] CSS文字連結 [打印本頁]

---

作者: kayin    時間: 2004-7-16 10:19 AM     標題: CSS文字連結

轉貼自網站建置百寶箱

1. <style type="text/css">TD {
   
2.         FONT-SIZE: 12px; FONT-FAMILY: 細明體
   
3. }
   
4. A {
   
5.         FONT-SIZE: 9pt; FONT-FAMILY: "細明體"; TEXT-DECORATION: none
   
6. }
   
7. .t1 {
   
8.         COLOR: #cc0000; TEXT-DECORATION: underline
   
9. }
   
10. .t2 {
    
11.         COLOR: #006699; TEXT-DECORATION: none
    
12. }
    
13. .t3 {
    
14.         COLOR: #006600; TEXT-DECORATION: underline overline
    
15. }
    
16. .t4 {
    
17.         COLOR: #0066ff; TEXT-DECORATION: line-through
    
18. }
    
19. .t5 {
    
20.         BORDER-RIGHT: #ff0000 1px solid; BORDER-TOP: #ff0000 1px solid; BORDER-LEFT: #ff0000 1px solid; COLOR: #000099; BORDER-BOTTOM: #ff0000 1px solid; HEIGHT: 20px
    
21. }
    
22. .t6 {
    
23.         BORDER-RIGHT: #ff0000 0px solid; BORDER-TOP: #ff0000 0px solid; BORDER-LEFT: #ff0000 0px solid; COLOR: #0066ff; BORDER-BOTTOM: #ff0000 1px solid; HEIGHT: 0px
    
24. }
    
25. .38js {
    
26.         FONT-SIZE: 9pt; FONT-FAMILY: "細明體"; TEXT-DECORATION: none
    
27. }
    
28. .t7 {
    
29.         BORDER-RIGHT: #ff0000 0px solid; BORDER-TOP: #ff0000 0px solid; PADDING-BOTTOM: 5px; BORDER-LEFT: #ff0000 0px solid; COLOR: #0066ff; BORDER-BOTTOM: #ff0000 1px solid; HEIGHT: 0px
    
30. }
    
31. .t8 {
    
32.         BORDER-RIGHT: #ff0000 0px solid; BORDER-TOP: #ff0000 0px solid; BORDER-LEFT: #ff0000 0px solid; WIDTH: 200px; COLOR: #0066ff; BORDER-BOTTOM: #ff0000 1px solid; HEIGHT: 0px; TEXT-ALIGN: center
    
33. }
    
34. .t9 {
    
35.         BORDER-RIGHT: #ff0000 0px double; BORDER-TOP: #ff0000 0px double; BORDER-LEFT: #ff0000 0px double; COLOR: #0066ff; BORDER-BOTTOM: #ff0000 3px double; HEIGHT: 0px
    
36. }
    
37. .t10 {
    
38.         BORDER-RIGHT: #ffff00 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #ffff00 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; BORDER-LEFT: #ffff00 1px solid; COLOR: #ffff00; PADDING-TOP: 5px; BORDER-BOTTOM: #ffff00 1px solid; HEIGHT: 20px; BACKGROUND-COLOR: #990000
    
39. }
    
40. .t11 {
    
41.         BORDER-RIGHT: #d9dee8 2px outset; PADDING-RIGHT: 2px; BORDER-TOP: #d9dee8 2px outset; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; BORDER-LEFT: #d9dee8 2px outset; WIDTH: 150px; PADDING-TOP: 2px; BORDER-BOTTOM: #d9dee8 2px outset; HEIGHT: 25px; BACKGROUND-COLOR: #d9dee8; TEXT-ALIGN: center
    
42. }
    
43. .t12 {
    
44.         BORDER-RIGHT: #0000cc 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #0000cc 1px solid; PADDING-LEFT: 4px; FILTER: Blur(Add=1, Direction=45, Strength=2); PADDING-BOTTOM: 4px; BORDER-LEFT: #0000cc 1px solid; WIDTH: 130px; COLOR: #006699; PADDING-TOP: 4px; BORDER-BOTTOM: #0000cc 1px solid; HEIGHT: 25px; TEXT-ALIGN: center; TEXT-DECORATION: none
    
45. }
    
46. .t13 {
    
47.         PADDING-LEFT: 5px; FONT-SIZE: 12px; BACKGROUND-IMAGE: url(bk3.gif); WIDTH: 120px; COLOR: #ffff00; PADDING-TOP: 6px; FONT-FAMILY: "細明體"; HEIGHT: 25px; TEXT-ALIGN: center; TEXT-DECORATION: none
    
48. }
    
49. .t13:hover {
    
50.         PADDING-LEFT: 5px; BACKGROUND-IMAGE: url(bk4.gif); WIDTH: 120px; COLOR: #ffffff; PADDING-TOP: 6px; HEIGHT: 25px; TEXT-ALIGN: center; TEXT-DECORATION: none
    
51. }
    
52. .t14 {
    
53.         PADDING-LEFT: 5px; FONT-SIZE: 12px; BACKGROUND-IMAGE: url(bk1.gif); WIDTH: 120px; COLOR: #ffff00; PADDING-TOP: 5px; FONT-FAMILY: "細明體"; HEIGHT: 25px; TEXT-DECORATION: none
    
54. }
    
55. .t14:hover {
    
56.         PADDING-LEFT: 5px; BACKGROUND-IMAGE: url(bk2.gif); WIDTH: 120px; COLOR: #000000; PADDING-TOP: 5px; HEIGHT: 25px; TEXT-DECORATION: none
    
57. }
    
58. .t1:hover {
    
59.         COLOR: #0000ff; TEXT-DECORATION: underline
    
60. }
    
61. .t2:hover {
    
62.         COLOR: #339900; TEXT-DECORATION: underline
    
63. }
    
64. .t3:hover {
    
65.         COLOR: #9900cc; TEXT-DECORATION: none
    
66. }
    
67. .t4:hover {
    
68.         COLOR: #ff0099; TEXT-DECORATION: none
    
69. }
    
70. .t5:hover {
    
71.         BORDER-RIGHT: #0000ff 1px solid; BORDER-TOP: #0000ff 1px solid; BORDER-LEFT: #0000ff 1px solid; COLOR: #cccc00; BORDER-BOTTOM: #0000ff 1px solid; HEIGHT: 20px
    
72. }
    
73. .t6:hover {
    
74.         BORDER-RIGHT: #00ff00 0px solid; BORDER-TOP: #00ff00 0px solid; BORDER-LEFT: #00ff33 0px solid; COLOR: #0066ff; BORDER-BOTTOM: #00ff33 1px solid; HEIGHT: 0px
    
75. }
    
76. .38js:hover {
    
77.         FONT-SIZE: 12px; LEFT: 1px; COLOR: #009900; FONT-FAMILY: "細明體"; POSITION: relative; TOP: 1px
    
78. }
    
79. .t7:hover {
    
80.         BORDER-RIGHT: #ff0000 0px solid; BORDER-TOP: #ff0000 0px solid; PADDING-BOTTOM: 2px; BORDER-LEFT: #ff0000 0px solid; COLOR: #990000; BORDER-BOTTOM: #ff0000 1px solid; HEIGHT: 0px
    
81. }
    
82. .t8:hover {
    
83.         BORDER-RIGHT: #ff0000 0px solid; BORDER-TOP: #ff0000 0px solid; BORDER-LEFT: #ff0000 0px solid; WIDTH: 170px; COLOR: #336600; BORDER-BOTTOM: #ff0000 1px solid; HEIGHT: 0px; TEXT-ALIGN: center
    
84. }
    
85. .t9:hover {
    
86.         BORDER-RIGHT: #ff0000 0px double; BORDER-TOP: #ff0000 0px double; BORDER-LEFT: #ff0000 0px double; COLOR: #0066ff; BORDER-BOTTOM: #ff0000 5px double; HEIGHT: 0px
    
87. }
    
88. .t10:hover {
    
89.         BORDER-RIGHT: #0000ff 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #0000ff 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; BORDER-LEFT: #0000ff 1px solid; COLOR: #333333; PADDING-TOP: 5px; BORDER-BOTTOM: #0000ff 1px solid; HEIGHT: 20px; BACKGROUND-COLOR: #c8d8f0
    
90. }
    
91. .t11:hover {
    
92.         BORDER-RIGHT: #99ccff 1px outset; PADDING-RIGHT: 2px; BORDER-TOP: #99ccff 1px outset; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; BORDER-LEFT: #99ccff 1px outset; WIDTH: 150px; PADDING-TOP: 2px; BORDER-BOTTOM: #99ccff 1px outset; HEIGHT: 25px; BACKGROUND-COLOR: #c8d8f0; TEXT-ALIGN: center
    
93. }
    
94. .t12:hover {
    
95.         BORDER-RIGHT: #0000cc 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #0000cc 1px solid; PADDING-LEFT: 4px; FILTER: Blur(Add=1, Direction=45, Strength=1); PADDING-BOTTOM: 4px; BORDER-LEFT: #0000cc 1px solid; WIDTH: 130px; COLOR: #006699; PADDING-TOP: 4px; BORDER-BOTTOM: #0000cc 1px solid; HEIGHT: 25px; TEXT-ALIGN: center; TEXT-DECORATION: none
    
96. }
    
97. .txt10 {
    
98.         LINE-HEIGHT: 15px
    
99. }
    
100. </style>

複製代碼

1. <b><font color="#0099cc" size="4">
   
2. <p align="center">腳本特效展示</font></b>
   
3. 
   
4. 
   
5. 
   
6. </p>
   
7. <div align="center"><center>
   
8. 
   
9. <table borderColor="#0099cc" cellSpacing="0" borderColorDark="#0099cc" cellPadding="15"
   
10. width="450" borderColorLight="#0099cc" border="1">
    
11. <TBODY>
    
12.   <tr>
    
13.     <td height="56"><div align="center"><center><table cellSpacing="1" cellPadding="5"
    
14.     width="300" align="center" bgColor="#cccccc" border="0">
    
15. <TBODY>
    
16.       <tr align="middle" bgColor="#ffffff">
    
17.         <td class="txt10" colSpan="2">CSS打造多彩文字鏈接</td>
    
18.       </tr>
    
19.       <tr bgColor="#cccccc">
    
20.         <td>一、</td>
    
21.         <td>初級鏈接樣式</td>
    
22.       </tr>
    
23.       <tr bgColor="#ffffff">
    
24.         <td>1、</td>
    
25.         <td><a class="t1" href="#">普通鏈接</a></td>
    
26.       </tr>
    
27.       <tr bgColor="#ffffff">
    
28.         <td>2、</td>
    
29.         <td><a class="t2" href="#">無下劃線鏈接</a></td>
    
30.       </tr>
    
31.       <tr bgColor="#ffffff">
    
32.         <td>3、</td>
    
33.         <td><a class="t3" href="#">雙劃線鏈接</a></td>
    
34.       </tr>
    
35.       <tr bgColor="#ffffff">
    
36.         <td>4、</td>
    
37.         <td><a class="t4" href="#">刪除線鏈接</a></td>
    
38.       </tr>
    
39.       <tr bgColor="#cccccc">
    
40.         <td>二、</td>
    
41.         <td>進階鏈接樣式風格</td>
    
42.       </tr>
    
43.       <tr bgColor="#ffffff">
    
44.         <td>1、</td>
    
45.         <td><a class="t5" href="#">另類下劃線的原理</a></td>
    
46.       </tr>
    
47.       <tr bgColor="#ffffff">
    
48.         <td>2、</td>
    
49.         <td><a class="t6" href="#">定制下劃線色彩</a></td>
    
50.       </tr>
    
51.       <tr bgColor="#ffffff">
    
52.         <td>3、 </td>
    
53.         <td><a class="t7" href="#">定制下劃線距離</a></td>
    
54.       </tr>
    
55.       <tr bgColor="#ffffff">
    
56.         <td>4、 </td>
    
57.         <td><a class="t8" href="#">定制下劃線長度和對齊方式</a></td>
    
58.       </tr>
    
59.       <tr bgColor="#ffffff">
    
60.         <td>5、 </td>
    
61.         <td><a class="t9" href="#">定制雙下劃線</a></td>
    
62.       </tr>
    
63.       <tr bgColor="#ffffff">
    
64.         <td>6、 </td>
    
65.         <td><a class="38js" href="#">按鈕式鏈接</a></td>
    
66.       </tr>
    
67.       <tr bgColor="#cccccc">
    
68.         <td>三、</td>
    
69.         <td>高級鏈接樣式風格</td>
    
70.       </tr>
    
71.       <tr bgColor="#ffffff">
    
72.         <td>1、</td>
    
73.         <td><a class="t10" href="#">定義塊狀鏈接</a></td>
    
74.       </tr>
    
75.       <tr bgColor="#ffffff">
    
76.         <td>2、</td>
    
77.         <td><a class="t11" href="#">定義按鈕風格的鏈接</a></td>
    
78.       </tr>
    
79.       <tr bgColor="#ffffff">
    
80.         <td>3、</td>
    
81.         <td><a class="t12" href="#">定義特效鏈接</a></td>
    
82.       </tr>
    
83.       <tr bgColor="#ffffff">
    
84.         <td>4、</td>
    
85.         <td><a class="t13" href="#">靜態背景切換鏈接</a></td>
    
86.       </tr>
    
87.       <tr bgColor="#ffffff">
    
88.         <td>5、</td>
    
89.         <td><a class="t14" href="#">動態背景切換鏈接</a></td>
    
90.       </tr>
    
91. </TBODY>
    
92.     </table>
    
93.     </center></div></td>
    
94.   </tr>
    
95. </TBODY>
    
96. </table>
    
97. </center></div>

複製代碼

---

歡迎光臨 Kuroshio Ocean Design - 黑潮設計 (http://forum.kod.tw/)

Powered by Discuz! 7.2