『电脑网络』-超链接变色专题详解[肿瘤咨询在线论坛]

以文本方式查看主题

-  肿瘤咨询在线论坛  (http://www.chinaonco.net/dvbbs/index.asp)
--  『电脑网络』  (http://www.chinaonco.net/dvbbs/list.asp?boardid=55)
----  超链接变色专题详解  (http://www.chinaonco.net/dvbbs/dispbbs.asp?boardid=55&id=5113)

--  作者：管理员
--  发布时间：2005-7-30 17:54:24
--  超链接变色专题详解

以下内容含错误标记
<P>超链接变色，需要用样式表CSS来控制。关于CSS的概念，请看《<a href="http://www.webshu.com/tutorial/act/7,id=0322.htm" target="_blank" ><FONT color=#00006a>样式表简明教程</FONT></A>》，详细而且精炼、通俗，我想，很有必要阅读一下。 前面已经讲过如何控制超链接下划线了，详见<a href="http://www.webshu.com/tutorial/act/7,id=0201.htm" target="_blank" ><FONT color=#00006a>去超链接下划线专题详解</FONT></A>。下面将举三个实例来说明如何控制超链接变色。用记事本打开网页源代码(也可以先用IE打开网页，然后点击IE菜单栏的“查看→源文件”)，然后弹出如下记事本窗口：[code]<SCRIPT src="../../js/t1.js"></Script> <p><STYLE>#o{margin-top:0}</STYLE></p><p></p><p><TABLE></p><p></p><p><TR><TD><TABLE></p><p></p><p><TR><TD><TABLE cellSpacing=0 cellPadding=0 bgColor=#d4d0c8></p><p></p><p><TR><TD><P><TABLE height=18 cellSpacing=0 cellPadding=0 bgColor=#0a246a></p><p></p><p><TR><TD><TABLE height=18 cellSpacing=0 cellPadding=0 width=531 bgColor=#a6caf0></p><p></p><p><TR><TD></TD></TR></TABLE></TD></TR></TABLE><P><TABLE cellSpacing=0 cellPadding=0></p><p></p><p><TR><TD width=2><TD vAlign=top width=18 height=19><IMG src="http://www.webshu.com/t/n4.gif"> </p><p><TD vAlign=top width=461><P><B>webshu.htm - 记事本</B></P><TD vAlign=top width=34><P><IMG src="http://www.webshu.com/t/n1.gif"><IMG src="http://www.webshu.com/t/n2.gif"></P><TD vAlign=top><P><IMG src="http://www.webshu.com/t/n3.gif"></P></TD></TR></TABLE><Q>文件(<U>F</U>)编辑(<U>E</U>)搜索(<U>S</U>)帮助(<U>H</U>)</Q> <TEXTAREA><html><head><title>超链接变色专题 - 网页树树</title></head><body>……</body></html></TEXTAREA><Script src="../../js/t2.js"></script>[/code] 找到<head>和</head>这两句，样式表语句就加在它们中间。如下： <html><head><style>a{color:000000}a:hover{color:8F601F}</style></head><body> 上述代码效果如下，请把鼠标停留在下面的超链接上： </p><p><TABLE></p><p></p><p><TR><TD><STYLE>a.xh{color:000000}a:hover.xh{color:8F601F}</STYLE><a href="http://www.webshu.com/" target="_blank" >网页树树</A><a href="http://www.cctv.com/" target="_blank" >中央电视台</A></TD></TR></TABLE>说明：Color后面的值，是HTML的颜色代码，由六个字符组成：RRGGBB，每一位都是十六进制，从0～9～A～F，所以可以产生16<SUP>6</SUP>种颜色，也就是1677万多种颜色。(16<SUP>6</SUP>=16777216)。使用什么颜色，要看网站的主体颜色，下面举几种颜色的例子： </p><p><TABLE></p><p></p><p><TR><TD><A>网页树树</A>颜色代码：3160C1 <A>网页树树</A>颜色代码：999900 <A>网页树树</A>颜色代码：FF0000 <A>网页树树</A>颜色代码：004000</TD></TR></TABLE>上面的例子说明如何一次性定义网页所有的超链接颜色，平时只要<style>a{color:000000}a:hover{color:8F601F}</style>这句就足够了。a{color}表示超链接的颜色，a:hover{color}表示鼠标悬停在超链接上面时的颜色。 如果想让网页中有多种变幻的颜色，我认为大可不必，反而会让网页变得杂乱。除非你要做游戏类网站，或者其它很酷的效果，但是切记颜色不要太多种，要在同一个色系内，才会让它达到统一。具体方法与超链接去下划线的方法一样，<a href="http://www.webshu.com/tutorial/act/7,id=0201.htm" target="_blank" >详见这里</A>，请看例二和例三。 二、如何让超链接去下划线、超链接变色？ 如果你明白了a{ }和a:hover{ }它们的意义，就很容易控制了，在这里再举两个实例： <style>a{TEXT-DECORATION:none;color:000000}a:hover{color:FF0000}</style> 请把鼠标停留在超链接上面，效果如下： </p><p><TABLE></p><p></p><p><TR><TD><STYLE>a.dh{TEXT-DECORATION:none;color:000000}a:hover.dh{color:FF0000}</STYLE><a href="http://www.webshu.com/" target="_blank" >网页树树</A><a href="http://www.cctv.com/" target="_blank" >中央电视台</A></TD></TR></TABLE><style>a{TEXT-DECORATION:none;color:000000}a:hover{TEXT-DECORATION:underline;color:FF0000}</style> 请把鼠标停留在超链接上面，效果如下： </p><p><TABLE></p><p></p><p><TR><TD><STYLE>a.gh{TEXT-DECORATION:none;color:000000}a:hover.gh{TEXT-DECORATION:underline;color:FF0000}</STYLE><a href="http://www.webshu.com/" target="_blank" >网页树树</A><a href="http://www.cctv.com/" target="_blank" >中央电视台</A></TD></TR></TABLE></P></TD></TR></TABLE></TD></TR></TABLE></TD></TR></TABLE></P></p><p></p>