日韩精品一区二区三区中文耥,欧美成人h在线观看完整版

　文字鏈接技術(shù)基礎(chǔ)

作者：marvellous　時(shí)間： 2006-06-17　文檔類型：原創(chuàng)　來自：藍(lán)色理想

第 1 頁文字鏈接技術(shù)基礎(chǔ) [1]
第 2 頁文字鏈接技術(shù)基礎(chǔ) [2]

給鏈接加上一個(gè)小小的晶格化濾鏡:

運(yùn)行代碼框
<style type="text/css">  </style> <center> <table width="380" height="100" border="0" cellpadding="0" cellspacing="0"> <tr> <td><a href="#">既不回頭，何必不忘；</a></td> <td><a href="#">既然無緣，何須誓言；</a></td> </tr> <tr> <td><a href="#">今日種種，似水無痕；</a></td> <td><a href="#">明夕何夕，君以陌路。</a></td> </tr> </table> <br><br><br> <Style> A { color: #0080E0; text-decoration: none; font-weight: bold; cursor: help; behavior:url(cold.htc); filter:progid:dximagetransform.microsoft.pixelate(duration=.7, maxSquare=22, enabled=false); height: 0px; clip: rect( ); } </style> <Script defer> var ar=document.getElementsByTagName('a') for (var i=0;i<ar.length;i++){ ar[i].onmouseover=function(){this.filters.item(0).apply();this.filters.item(0).play();} ar[i].onmouseout=function(){this.filters.item(0).apply();this.filters.item(0).play();} } </script> <font color=#0080e0> | <a href=#>蕭蕭小雨</a> | <a href=#>金翅擘海 </a> | <a href=#><B><font color="#22FF22">知</font><font color="#FF2222">往</font><font color="#001199">觀</font><font color="#00fffa">來</font></B></a> | <a href=#>藍(lán)色月光 </a> | <a href=#>西林生存 </a> | <a href=#>紅色黑客 |</a></font>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

用圖片修飾一下文字鏈接：

運(yùn)行代碼框
<style> a#example2b { text-decoration: none; white-space: nowrap; padding-bottom: 5px; } a#example2b:hover { background: url('http://tech.tom.com/images/computer/2004/02/04/animarrow.gif') repeat-x 100% 100%; } </style><center> <a href="#" id="example2b">人皆可以為堯舜,一切眾生皆可成佛! </a> </td></tr></table> <br><br><br><br> <style> .more:link,.more:visited{font-weight:bold;background:url(http://www.pjhome.net/images/weather/hn2_sunny.gif) no-repeat 0px -15px;}padding-left:18px;margin:5px;text-decoration:none;} .more:hover{background:url(http://www.pjhome.net/images/weather/hn2_sunny.gif) no-repeat 140px 0px;} </style> <center> <a href="#" class="more">鏈接后面的加個(gè)動(dòng)態(tài)圖標(biāo)....</a>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

運(yùn)行代碼框
<style> div { width: 100px; background: #CCC; } ul { margin: 0; padding: 0; list-style: none; } li a { display: block; width: 100px; height: 30px; margin: 0; text-align: center; border-top: 1px solid #FFF; border-bottom: 1px solid #333; text-decoration: none; } li a:hover { background: #DDD; } li a:active { height: 35px; color: #ED1C24; font-weight: bold; } </style> <center> <div> <ul> <li><a href="#">金翅擘海</a></li> <marquee behavior="alternate"><li><a href="#">我佛山人</a></li></marquee> <li><a href="#"><B><font color="#22FF22">知</font><font color="#FF2222">往</font><font color="#001199">觀</font><font color="#00fffa">來</font></B></a></li> </ul> </div>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

另外可參考css打造多彩文字鏈接:

運(yùn)行代碼框
<head> <style type="text/css">TD { FONT-SIZE: 12px; FONT-FAMILY: 細(xì)明體 } A { FONT-SIZE: 9pt; FONT-FAMILY: "細(xì)明體"; TEXT-DECORATION: none } .t1 { COLOR: #cc0000; TEXT-DECORATION: underline } .t2 { COLOR: #006699; TEXT-DECORATION: none } .t3 { COLOR: #006600; TEXT-DECORATION: underline overline } .t4 { COLOR: #0066ff; TEXT-DECORATION: line-through } .t5 { BORDER-RIGHT: #ff0000 1px solid; BORDER-TOP: #ff0000 1px solid; BORDER-LEFT: #ff0000 1px solid; COLOR: #000099; BORDER-BOTTOM: #ff0000 1px solid; HEIGHT: 20px } .t6 { BORDER-RIGHT: #ff0000 0px solid; BORDER-TOP: #ff0000 0px solid; BORDER-LEFT: #ff0000 0px solid; COLOR: #0066ff; BORDER-BOTTOM: #ff0000 1px solid; HEIGHT: 0px } .38js { FONT-SIZE: 9pt; FONT-FAMILY: "細(xì)明體"; TEXT-DECORATION: none } .t7 { 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 } .t8 { 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 } .t9 { BORDER-RIGHT: #ff0000 0px double; BORDER-TOP: #ff0000 0px double; BORDER-LEFT: #ff0000 0px double; COLOR: #0066ff; BORDER-BOTTOM: #ff0000 3px double; HEIGHT: 0px } .t10 { 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 } .t11 { 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 } .t12 { 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 } .t13 { PADDING-LEFT: 5px; FONT-SIZE: 12px; BACKGROUND-IMAGE: url(http://dob.tnc.edu.tw/themes/old/bk3.gif); WIDTH: 120px; COLOR: #ffff00; PADDING-TOP: 6px; FONT-FAMILY: "細(xì)明體"; HEIGHT: 25px; TEXT-ALIGN: center; TEXT-DECORATION: none } .t13:hover { PADDING-LEFT: 5px; BACKGROUND-IMAGE: url(http://dob.tnc.edu.tw/themes/old/bk4.gif); WIDTH: 120px; COLOR: #ffffff; PADDING-TOP: 6px; HEIGHT: 25px; TEXT-ALIGN: center; TEXT-DECORATION: none } .t14 { PADDING-LEFT: 5px; FONT-SIZE: 12px; BACKGROUND-IMAGE: url(http://dob.tnc.edu.tw/bk1.gif); WIDTH: 120px; COLOR: #ffff00; PADDING-TOP: 5px; FONT-FAMILY: "細(xì)明體"; HEIGHT: 25px; TEXT-DECORATION: none } .t14:hover { PADDING-LEFT: 5px; BACKGROUND-IMAGE: url(http://dob.tnc.edu.tw/themes/old/bk2.gif); WIDTH: 120px; COLOR: #000000; PADDING-TOP: 5px; HEIGHT: 25px; TEXT-DECORATION: none } .t1:hover { COLOR: #0000ff; TEXT-DECORATION: underline } .t2:hover { COLOR: #339900; TEXT-DECORATION: underline } .t3:hover { COLOR: #9900cc; TEXT-DECORATION: none } .t4:hover { COLOR: #ff0099; TEXT-DECORATION: none } .t5:hover { BORDER-RIGHT: #0000ff 1px solid; BORDER-TOP: #0000ff 1px solid; BORDER-LEFT: #0000ff 1px solid; COLOR: #cccc00; BORDER-BOTTOM: #0000ff 1px solid; HEIGHT: 20px } .t6:hover { BORDER-RIGHT: #00ff00 0px solid; BORDER-TOP: #00ff00 0px solid; BORDER-LEFT: #00ff33 0px solid; COLOR: #0066ff; BORDER-BOTTOM: #00ff33 1px solid; HEIGHT: 0px } .38js:hover { FONT-SIZE: 12px; LEFT: 1px; COLOR: #009900; FONT-FAMILY: "細(xì)明體"; POSITION: relative; TOP: 1px } .t7:hover { 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 } .t8:hover { 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 } .t9:hover { BORDER-RIGHT: #ff0000 0px double; BORDER-TOP: #ff0000 0px double; BORDER-LEFT: #ff0000 0px double; COLOR: #0066ff; BORDER-BOTTOM: #ff0000 5px double; HEIGHT: 0px } .t10:hover { 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 } .t11:hover { 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 } .t12:hover { 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 } .txt10 { LINE-HEIGHT: 15px } </style> <body> <b><font color="#0099cc" size="4"> <p align="center">腳本特效展示</font></b><br> <br> </p> <div align="center"><center> <table borderColor="#0099cc" cellSpacing="0" borderColorDark="#0099cc" cellPadding="15" width="450" borderColorLight="#0099cc" border="1"> <TBODY> <tr> <td height="56"><div align="center"><center><table cellSpacing="1" cellPadding="5" width="300" align="center" bgColor="#cccccc" border="0"> <TBODY> <tr align="middle" bgColor="#ffffff"> <td class="txt10" colSpan="2">CSS打造多彩文字鏈接</td> </tr> <tr bgColor="#cccccc"> <td>一、</td> <td>初級(jí)鏈接樣式</td> </tr> <tr bgColor="#ffffff"> <td>1、</td> <td><a class="t1" href="#">普通鏈接</a></td> </tr> <tr bgColor="#ffffff"> <td>2、</td> <td><a class="t2" href="#">無下劃線鏈接</a></td> </tr> <tr bgColor="#ffffff"> <td>3、</td> <td><a class="t3" href="#">雙劃線鏈接</a></td> </tr> <tr bgColor="#ffffff"> <td>4、</td> <td><a class="t4" href="#">刪除線鏈接</a></td> </tr> <tr bgColor="#cccccc"> <td>二、</td> <td>進(jìn)階鏈接樣式風(fēng)格</td> </tr> <tr bgColor="#ffffff"> <td>1、</td> <td><a class="t5" href="#">另類下劃線的原理</a></td> </tr> <tr bgColor="#ffffff"> <td>2、</td> <td><a class="t6" href="#">定制下劃線色彩</a></td> </tr> <tr bgColor="#ffffff"> <td>3、 </td> <td><a class="t7" href="#">定制下劃線距離</a></td> </tr> <tr bgColor="#ffffff"> <td>4、 </td> <td><a class="t8" href="#">定制下劃線長度和對(duì)齊方式</a></td> </tr> <tr bgColor="#ffffff"> <td>5、 </td> <td><a class="t9" href="#">定制雙下劃線</a></td> </tr> <tr bgColor="#ffffff"> <td>6、 </td> <td><a class="38js" href="#">按鈕式鏈接</a></td> </tr> <tr bgColor="#cccccc"> <td>三、</td> <td>高級(jí)鏈接樣式風(fēng)格</td> </tr> <tr bgColor="#ffffff"> <td>1、</td> <td><a class="t10" href="#">定義塊狀鏈接</a></td> </tr> <tr bgColor="#ffffff"> <td>2、</td> <td><a class="t11" href="#">定義按鈕風(fēng)格的鏈接</a></td> </tr> <tr bgColor="#ffffff"> <td>3、</td> <td><a class="t12" href="#">定義特效鏈接</a></td> </tr> <tr bgColor="#ffffff"> <td>4、</td> <td><a class="t13" href="#">靜態(tài)背景切換鏈接</a></td> </tr> <tr bgColor="#ffffff"> <td>5、</td> <td><a class="t14" href="#">動(dòng)態(tài)背景切換鏈接</a></td> </tr> </TBODY> </table> </center></div></td> </tr> </TBODY> </table> </center></div> </head>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

文字鏈接效果巧制作:

運(yùn)行代碼框
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>文字鏈接效果巧制作</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <STYLE>BODY { scrollbar-face-color: #0070CC; scrollbar-highlight-color: #70c0f8; scrollbar-shadow-color: #70c0f8; scrollbar-3dlight-color: #0070CC; scrollbar-arrow-color: #70c0f8; scrollbar-track-color: #0070CC; scrollbar-darkshadow-color: #0070CC; } </STYLE> <link rel="stylesheet" type="text/css"> <style type="text/css">  </style> <style type="text/css">  </style> <style type="text/css">  </style> <style type="text/css">  </style> <style type="text/css">  </style> <style type="text/css">  </style> <style type="text/css">  </style> <style type="text/css">  </style> <link rel="stylesheet" type="text/css"> <link rel="stylesheet" type="text/css"> <link rel="stylesheet" type="text/css"> <meta name="keywords" content="dreamweaver，網(wǎng)頁設(shè)計(jì)教程，文字鏈接效果制作，去掉鏈接下劃線，鏈接變色，鏈接加粗，中線鏈接，雙線鏈接，給鏈接加背景色，鏈接下方加虛線，會(huì)移動(dòng)的鏈接 "> <meta name="description" content="歡迎來到e點(diǎn)時(shí)間，這里是織網(wǎng)魔法——文字鏈接效果巧制作，我在這里列舉了八種常見的文字鏈接效果，都是在dreamweaver中做的，值得一看！"> </head> <body bgcolor="#0070cc" text="yellow"> <table width="700" border="0" align="center" cellpadding="0" cellspacing="0" class="border"> <tr> <td height="30" valign="middle" class="glow" ><div align="center" ><font color="#FFFFFF" size="3"><strong>文字鏈接效果巧制作</strong></font></div></td> </tr> <tr> <td height="25"><div align="center" class="9p"><font color="#FFFFFF">文/E點(diǎn)時(shí)間</font></div></td> </tr> <tr> <td valign="top" class="text"><table width="500" height="60" border="0" align="center" cellspacing="0" class="border2"> <tr> <td width="125"><DIV id=link1> <div align="center"><a href="#line">去下劃線</a></div> </DIV></td> <td width="125" height="30"><DIV id=link2> <div align="center"><a href="#hover">鏈接變色</a></div> </DIV></td> <td width="125"><DIV id=link5> <div align="center"><a href="#hover">鏈接加粗</a></div> </DIV></td> <td> <DIV id=link6> <div align="center"><a href="#hover">中線鏈接</a></div> </div></td> </tr> <tr> <td> <DIV id=link7> <div align="center"><a href="#hover">雙線鏈接</a></div> </div></td> <td height="30"><DIV id=link3> <div align="center"><a href="#bg">背景顏色</a></div> </DIV></td> <td><DIV id=link4> <div align="center"><a href="#dashed">虛線鏈接</a></div> </div></td> <td><DIV id=link8> <div align="center"><a href="#move">移動(dòng)鏈接</a></div> </DIV></td> </tr> </table></td> </tr> <tr> <td valign="top" class="text"><table width="650" border="0" align="center" cellspacing="0" class="9p"> <tr> <td> </td> </tr> <tr> <td>     把鼠標(biāo)依次放在上面的文字上，看到了嗎？這八種應(yīng)該差不多可以包括目前網(wǎng)頁上常見的超鏈接效果了，如果還有沒寫到的別忘了告訴我哦。這些效果都是通過Dreamweaver的CSS功能實(shí)現(xiàn)的，非常easy啦，讓我們來一個(gè)一個(gè)地解決它們！<br> <br> </td> </tr> <center> <TABLE id="Table1" border="1" style="WIDTH: 264px; HEIGHT: 77px" width="264" bordercolordark=#EFEFC7 bgcolor=#C6D39C bordercolorlight=#4B6928> <tr><td>我如清泉-----清澈見底一覽無余</td></tr><tr><td>吾乃大海-----洶涌澎湃狂熱不已</td></tr></table> </table></td> </tr> </table> </td> </tr> </table> <p> </p> <p>  </p>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

出處：藍(lán)色理想
責(zé)任編輯：moby

上一頁文字鏈接技術(shù)基礎(chǔ) [1] 下一頁

◎進(jìn)入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論

相關(guān)文章

更多相關(guān)鏈接

斜體樣式的導(dǎo)航條

css靜態(tài)濾鏡 + A:Hover

CSS超級(jí)技巧大放送合集

CSS 錦囊

仿windows選項(xiàng)卡效果拾零

作者文章

仿windows選項(xiàng)卡效果拾零

select發(fā)展史

表格藝術(shù)經(jīng)典回顧

網(wǎng)頁中如何讓整段文字左右對(duì)齊


關(guān)鍵字搜索	常規(guī)搜索	推薦文檔
熱門搜索：CSS Fireworks 設(shè)計(jì)比賽網(wǎng)頁制作 web標(biāo)準(zhǔn) 用戶體驗(yàn) UE photoshop Dreamweaver Studio8 Flash 手繪 CG

站點(diǎn)最新

站點(diǎn)最新列表

周大福“敬•自然”設(shè)計(jì)大賽開啟

國際體驗(yàn)設(shè)計(jì)大會(huì)7月將在京舉行

中國國防科技信息中心標(biāo)志征集

云計(jì)算如何讓安全問題可控

云計(jì)算是多數(shù)企業(yè)唯一擁抱互聯(lián)網(wǎng)的機(jī)會(huì)

阿里行云

云手機(jī)年終巨獻(xiàn)，送禮標(biāo)配299起

阿里巴巴CTO王堅(jiān)的"云和互聯(lián)網(wǎng)觀"

1499元買真八核云OS雙蛋大促

首屆COCO桌面手機(jī)主題設(shè)計(jì)大賽

欄目最新

欄目最新列表

淺談JavaScript編程語言的編碼規(guī)范

如何在illustrator中繪制臺(tái)歷

Ps簡單繪制一個(gè)可愛的鉛筆圖標(biāo)

數(shù)據(jù)同步算法研究

用ps作簡單的作品展示頁面

CSS定位機(jī)制之一:普通流

25個(gè)最佳最閃亮的Eclipse開發(fā)項(xiàng)目

Illustrator中制作針線縫制文字效果

Photoshop制作印刷凹凸字體

VS2010中創(chuàng)建自定義SQL Rule

中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx