网页中鲜为人知的小技巧
超级链接小技巧
在缺省的情况下，鼠标是一个向左上方翘起的箭头，下载页面时是一个沙漏的形状而当鼠标移动到超级链接上时则是一个手的形状，在许多Windows的应用程序中鼠标的样子可以说是千变万化，新鲜而有趣，我们的网页中一样也做到了这一点。先看一个例子：
现在许多网站上都有“帮助”这样一个链接，目的是让浏览者更好的浏览网站，当我们让浏览者把鼠标移动到帮助链接的时候，鼠标指针就会变成表示帮助的左上方箭头加上一个问号的形状，下面是代码：
＜a style=″cursor:help″ href=help.htm＞帮助＜/a＞
结构如下：＜target style= ″attribute1:value1;attribute2:value2;…″＞
在这里属性是cursor（光标），属性值是help。借助不同的属性值光标还会有很多的形状：当属性值为text的时候，鼠标会变成一个“I”形；当属性值为move的时候是一个带四方箭头的十字形；属性值为hand时是一个手形；属性值为crosshair表示十字形；属性值为e－resize表示向右箭头；属性值为ne－resize则表示向右上方箭头；属性值为nw－resize表示向左上方箭头；属性值为n－resize表示向上方箭头；属性值为se－resize表示向右下方箭头；属性值为Wait表示沙漏。
Web页默认的链接方式（未访问过的链接是蓝色文字带蓝色的下划线，访问过的超级链接变为深紫色的文字带深紫色的下划线）千篇一律，并且很有可能与你的背景色不搭配。下面介绍一下超级链接标签＜a＞在CSS方面的一些比较常见的应用，代码如下：
在HTML文件的＜head＞……＜/head＞之间加入
＜style type=“text/css”＞
＜!－－
A:link {text－decoration: none; color:blue}
A:visited { color:red; text－decoration:line－through }
A:active { color:white; text－decoration:underline }
A:hover {text－decoration:none;color:yellow;background－color:black}
－－＞
＜/style＞
这里 ＜STYLE type=“text/css”＞……＜/STYLE＞说明是内嵌式的网页样式表单，它一般在＜HEAD＞……＜ AD＞中申明，它只对本网页起作用，同时如果你已经使用了外部样式表单，那么它将被内嵌式的网页样式表单屏蔽。
A:link {text－decoration: none; color:blue}是说明了超级链接还没有被访问，它没有下划线，颜色为蓝色。
A:visited { color:red; text－decoration:line－through }说明了超级链接被访问后，它的颜色变成了红色，有了一根删除线。
A:active { color:white; text－decoration:underline }说明超级链接处于活动状态的时候，它的颜色变成了白色，有了下划线。
A:hover {text－decoration:none;color:＃FF0000;background－color:black}说明鼠标移动到超级链接后，它没有下划线，文字颜色变成了黄色，背景颜色是黑色。
采取以上的办法你就可以随心所欲控制你的链接了，而你的主页是不是也有了自己的风格呢？
--------------------------------------------------------------------------------
网页图片特效小技巧
这几个网页图片特效小技巧基本主要利用了一些鼠标控制语句、css滤镜代码，加上简单的javascript语句实现的，简单有趣，可以作为帮助一些朋友javascript入门的小例子。
图片循环渐显渐隐
效果描述：图片循环渐显渐隐……
实现方法：
1、把如下代码加入＜body＞区域中：
<img src="/c51blog/image1.gif" name="u" border=0
alt="Image" style="filter:alpha(opacity=0)">
<script language="javascript">
var b = 1;
var c = true;
function fade(){
if(document.all);
if(c == true) {
b++;
}
if(b==100) {
b--;
c = false
}
if(b==10) {
b++;
c = true;
}
if(c == false) {
b--;
}
u.filters.alpha.opacity=0 + b;
setTimeout("fade()",50);
}
</script>
2、把＜body＞改为：
<body bgcolor="#ffffff" onLoad="fade()">
注：图片的文件名及路径可以自行修改。
禁止图片下载
效果描述：设置某一图片禁止下载，鼠标移动到图片上面时将会给出提示，此方法治标不治本，只能骗骗菜鸟。
实现方法：
<A HREF="javascript:void(0)" onMouseover="alert('对不起,此图片不能下载!')">
<IMG src="/c51blog/2.gif" Align="center" Border="0" width="99" height="50"></A>
注：图片的文件名及路径可以自行修改。
鼠标控制图片隐现效果
效果显示：图片一开始是模糊显示，当鼠标移到图片上面时图片会清晰显示。
实现方法：
1、把如下代码加入＜body＞区域中：
<SCRIPT language="javascript">
<!--
function makevisible(cur,which){
if (which==0)
cur.filters.alpha.opacity=100
else
cur.filters.alpha.opacity=20
}
//-->
</SCRIPT>
2、把如下代码加入＜body＞区域中：
<img src="/c51blog/2.gif" style="filter:alpha(opacity=20)"
onMouseOver="makevisible(this,0)"
onMouseOut="makevisible(this,1)">
注：图片的文件名及路径可以自行修改。
鼠标控制的图片大小变换
效果描述：一开始图片按设置的比例缩小显示，鼠标移动到图片上面时，图片就会按预先设置的一个较大的比例显示。
实现方法：
把如下代码加入＜body＞区域中：
<span id="s1" style = "width : 100">
<a href="/c51blog/index.shtml"
onmouseover="img1.style.width='95';"
onmouseout="img1.style.width= '67';">
<Img src="/c51blog/link1.gif" id="img1">
</a>
</span>
--------------------------------------------------------------------------------
网页常用特效整理：高级篇
笔者日积月累了许多精彩、实用的Web特效的制作，这些特效几乎都是比较常用的网页特效。现在我就把这些经过整理和修改过的特效分三个级别分别介绍给大家。
高级篇
1．不同时间段显示不同问候语
＜Script Language="javascript"＞
＜!--
var text=""; day = new Date( ); time = day.getHours( );
if (( time＞=0) && (time ＜ 7 ))
text="夜猫子，要注意身体哦！ "
if (( time ＞= 7 ) && (time ＜ 12))
text="今天的阳光真灿烂啊，你那个朋友呢？"
if (( time ＞= 12) && (time ＜ 14))
text="午休时间。您要保持睡眠哦！"
if (( time ＞=14) && (time ＜ 18))
text="祝您下午工作愉快！ "
if ((time ＞= 18) && (time ＜= 22))
text="您又来了，可别和MM聊太久哦！"
if ((time ＞= 22) && (time ＜ 24))
text="您应该休息了！"
document.write(text)
//---＞
＜/Script＞
2．水中倒影效果
＜img id="reflect" src="你自己的图片文件名" width="175" height="59"＞
＜script language="javascript"＞
function f1()
{
setInterval("mdiv.filters.wave.phase+=10",100);
}
if (document.all)
{
document.write('＜img id=mdiv src="'+document.all.reflect.src+'"
style="filter:wave(strength=3,freq=3,phase=0,lightstrength=30) blur() flipv()"＞')
window.onload=f1
}
＜/script＞
3．慢慢变大的窗口
＜Script Language="javascript"＞
＜!--
var Windowsheight=100
var Windowswidth=100
var numx=5
function openwindow(thelocation){
temploc=thelocation
if
(!(window.resizeTo&&document.all)&&!(window.resizeTo&&document.getElementById))
{
window.open(thelocation)
return
}
windowsize=window.open("","","scrollbars")
windowsize.moveTo(0,0)
windowsize.resizeTo(100,100)
tenumxt()
}
function tenumxt(){
if (Windowsheight＞=screen.availHeight-3)
numx=0
windowsize.resizeBy(5,numx)
Windowsheight+=5
Windowswidth+=5
if (Windowswidth＞=screen.width-5)
{
windowsize.location=temploc
Windowsheight=100
Windowswidth=100
numx=5
return
}
setTimeout("tenumxt()",50)
}
//--＞
＜/script＞
＜p＞＜a href="javascript:openwindow('http://www.ccjol.com')"＞进入＜/a＞
4．改变IE地址栏的IE图标
我们要先做一个16*16的icon（图标文件），保存为index.ico。把这个图标文件上传到根目录下并在首页＜head＞＜/head＞之间加上如下代码：
＜link REL = "Shortcut Icon" href="/c51blog/index.ico"＞
5．让网页随意后退
＜a href="javascript:history.go(-X)"＞X＜/a＞ //把X换成你想要后退在页数
//把“-”变成“+”就为前进
6．鼠标指向时弹出信息框
在＜body＞＜/body＞之间加上如下代码：
＜a href onmouseover="alert('弹出信息！')"＞显示的链接文字＜/a＞
7．单击鼠标右键弹出添加收藏夹对话框
在＜body＞＜/body＞之间加上如下代码：
＜Script Language=javascript＞
if (document.all)
document.body.onmousedown=new Function("if (event.button==2||event.button==3)
window.external.addFavorite('您的网址','您的网站名称)")
＜/Script＞
8．随机变换背景图象（一个可以刷新心情的特效）
在＜head＞＜/head＞之间加上如下代码：
＜Script Language="javascript"＞
image = new Array(4); //定义image为图片数量的数组
image [0] = 'tu0.gif' //背景图象的路径
image [1] = 'tu1.gif'
image [2] = 'tu2.gif'
image [3] = 'tu3.gif'
image [4] = 'tu4.gif'
number = Math.floor(Math.random() * image.length);
document.write("＜BODY background="/c51blog/+image[number]+"＞");
＜/Script＞
9．鼠标一碰就给颜色看的链接
在＜body＞＜/body＞之间加上如下代码：
＜p onMouseMove="anniu()"＞你敢碰我，我就给点颜色你看！＜/p＞
＜Script Language = "VBScript"＞
sub anniu
document.fgColor=int(256*256*256*rnd)
end sub
＜/Script＞
10．从天而降并有幻影效果的窗口
＜head＞
＜Script language="javascript"＞
function move(x) {
if(self.moveBy){
self.moveBy (0,-800);
for(i = x; i ＞ 0; i--)
{
self.moveBy(0,3);
}
for(j = 200; j ＞ 0; j--){ //如果你认为窗口抖动厉害，就200换成个位数
self.moveBy(0,j);
self.moveBy(j,0);
self.moveBy(0,-j);
self.moveBy(-j,0);
}
}
}
＜/Scrip＞
＜body bgColor=#ffffff onload=move(280)＞
＜/body＞
＜/head＞
11．表格的半透明显示效果
在＜head＞＜/head＞之间加上如下代码：
＜style＞
.alpha{filter: Alpha(Opacity=50)} //50表示50%的透明度
＜/style＞
在＜body＞＜/body＞之间加上如下代码：
＜table border="1" width="100" height="62" class="alpha" bgcolor="#F2A664" ＞
＜tr＞
＜td width="100%" height="62"＞
＜div align="center"＞很酷吧!＜/div＞
＜/td＞
＜/tr＞
＜/table＞
--------------------------------------------------------------------------------
制作会移动的文字
基本语法：
＜marquee＞需要移动的文字＜/marquee＞
＜direction=＃＞
1.方向 ＃=left, right,up,down
例:＜marquee direction=left＞从右向左移动＜/marquee＞＞
＜marquee direction=right＞从左向右移动＜/marquee＞＞
2.次数 ＜bihavior=＃＞ ＃=scroll, slide, alternate
例:＜marquee behavior=scroll＞一圈一圈的绕着移动＜/marquee＞＞
＜marquee behavior=slide＞只移动一次就停＜/marquee＞＞
＜marquee behavior=alternate＞来回移动，不停＜/marquee＞＞
3.循环 ＜loop=＃＞ ＃ =次数，若未指定则循环不止(infinite)
例:＜marquee loop=3 width=50％ behavior=scroll＞只走 3 趟＜/marquee＞
4.速度加快 ＜scrollamount=＃＞
例:＜marquee scrollamount=20＞移动速度加快＜/marquee＞＞
5.速度减慢 ＜scrolldelay=＃＞
例:＜marquee scrolldelay=500 scrollamount=100＞移动速度减慢＜/marquee＞
6.底色 ＜bgcolor=＃＞
＃=rrggbb 16进制数码，或者是下列预定义色彩：
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua
例:＜marquee bgcolor=red＞是红色的＜/marquee＞
7.面积 ＜height=＃ width=＃＞
例:＜marquee height=80 bgcolor=red＞面积变大了＜/marquee＞
--------------------------------------------------------------------------------
让字体美起来
你可能正建立自己在网上的家-WEB页，又或者它已经被你安置在网络某一角里。无论出于什么目的,你都希望有更多的指导,告诉你该如何更好的布置家。
在目前许多的指导中，他们都在诉说，应该加一点声音或者一个说话的场地。的确我们都需要它，但我希望关心更多WEB家里底层的东西，比如如何把字体弄的漂亮些，或者让页面颜色变的活泼些，让访问者增加“看欲”，还有更多你曾经都没有关注的细微之处。今天，我们首先来探讨页面的字体。
一、html中定义字体
字体的确是很好打交道的，一开始制作页面，它就以默认的样式显示。随着逐步的深入，你会改变一下默认的设置，增大或者减小字体。
一般字体默认的标签格式：＜p＞田涛＜/p＞
接下来，我们把字体设置为黑体或者宋体字样式，它的标签如下：
＜p＞＜font face="黑体"＞田涛＜/font＞＜/p＞
在以上格式里，我们引出了字体的标签元素＜font＞＜/font＞.该标签具有下面三个属性值：
size="..." 设置字体的大小，一般从1到7，它的默认值是+3，每次改变字体都是+3或者-3。
color="..." 字体颜色的设置。定义颜色可以利用RGB的16进制值，比如： color=“#ffffff” 。也可以直接利用颜色英文来定义，比如： color=“white”
face="..." 字体样式的设置，比如：face=“黑体”。或者 face=“黑体，宋体”。后者的格式，每当浏览器访问第一种字体失败后，浏览器就会访问第二种字体，依此类推。
下面是一个完整的字体格式：
＜font face="黑体" size="2" color="#FFFFFF"＞田涛＜/font＞
HTML还提供了以下字体样式标签：
1.六个标题样式
从h1到h6，如：＜h1＞＜font face="黑体" size="2"＞田涛＜/font＞＜/h1＞
2.字体风格
斜体字：＜em＞田涛＜/em＞
粗体字：＜strong＞田涛＜/strong＞
斜体+粗体字：＜strong＞＜em＞田涛＜/em＞＜/strong＞
3.定义文本
定义大字体
＜big＞田涛＜/big＞
定义小字体
＜small＞田涛＜/small＞或者＜small＞＜small＞＜small＞田涛＜/small＞＜/small＞＜/small＞
如果你在字体标签中设置了size="...",那么＜big＞标签将不起作用。
除了以上常用字体标签元素外，HTML还包含很多其它标签，但不我们不多用。
二.CSS(层叠样式表)改变字体
在过去页面上的字体是一成不变的，静静的呆在那。当DHTML(动态网页)出现后，我们能有更多方式控制字体了。一般来说，动态字体的实现核心是CSS(层叠样式表)加javascript。使用了以上两项技术后，字体就能产生许多变化。
1.CSS定义字体的标签元素
font-family: 设置字体字族。
＜span style="font-family: 黑体, 宋体(GB)"＞田涛＜/span＞
font-sytle:设置字体类型。
＜span style="font-style: normal"＞田涛＜/span＞
font-weight:设置字体的字重。
＜span style="font-weight: bold"＞田涛＜/span＞
font-size:设置字体大小。
＜span style="font-size: 14pt"＞田涛＜/span＞
font-decoration:修饰文本字体，比如带下划线“underline”。
＜span style="text-decoration: underline"＞田涛＜/span＞
对于以上的字体设置，我们可以采用一个方便的方法：
＜span style="font:normal bold 14pt 黑体"＞田涛＜/span＞
在style定义的次序是：font-style,font-weight,font-size,font-family.
2.CSS定义字体和＜font＞定义字体的冲突
对于CSS定义字体和＜font＞定义字体，我们都要注意以下问题，比如有以下字体设置：
＜span style="font-family: 宋体(KSC); font-size: 200pt"＞＜font＞田涛＜/font＞＜/span＞
这时侯字体大小将以font-size: 200pt的定义来设置。但如果你在＜font＞中加入size属性，比如：
＜span style="font-family: 宋体(KSC); font-size: 200pt"＞＜font size="5"＞田涛＜/font＞＜/span＞
这时侯，字体的大小以size的设置为准，font-size: 200pt将不起作用。其它的属性也是一样。如果你无需动态字体，就利用HTML4.0的＜font＞来定义字体，需要动态字体时，就需要使用CSS和JavaScritp来定义字体及引发事件。
3.定义CSS字体属性类
一般我们在制作动态字体时，我们会首先利用CSS定义出页面字体的整个属性，然后在页面中引用，而不用对每段文本进行设置，这也是实现动态字体首先一步。
＜html＞
＜head＞
＜style type="text/css"＞
.tt2 { font-family:"黑体"; font-size: 16px; font-style: normal; line-height: 17px }
＜/style＞
＜/head＞
＜body＞
＜p class="tt2"＞田涛＜/p＞
＜/body＞
＜/html＞
在以上代码中，“田涛”两个字引用了.main_2类定义的字体样式。当然你可以在＜style＞＜/style＞中定义不同的字体样式，以便页面中根据不同字体加以引用。比如：
＜html＞
＜head＞
＜style type="text/css"＞
.tt1 { font-family:"宋体"; font-size: 15px; font-style: normal; }
.tt2 { font-family:"黑体"; font-size: 16px; font-style: normal; }
＜/style＞
＜/head＞
＜body＞
＜p class="tt1"＞田涛＜/p＞
＜p class="tt2"＞田涛＜/p＞
＜/body＞
＜/html＞
三.让字体动起来
要让字体动起来，我们可以利用本身CSS的事件或者让javascript引发事件。
1.CSS引发事件
例一
＜html＞
＜head＞
＜style type="text/css"＞
＜!--
a:link { color: black; text-decoration: none}
a:visited { color: white; text-decoration: none}
a:hover { color: blue; text-decoration: underline}
--＞
＜/style＞
＜/head＞
＜body＞
＜p＞＜a href="http://zgrtt.yeah.net/";;;＞田涛＜/a＞＜/p＞
＜/body＞
＜/html＞
link定义的是链接在页面显示的颜色(黑色)及链接没有下划线，visited定义的是单击链接后的颜色(白色)，hover定义的是指向链接时的动态颜色。以上实例表示，当指向链接“田涛”后字体颜色从黑色变成蓝色，并加下划线，单击链接后，链接颜色变成白色。
例二
＜html＞
＜head＞
＜title＞＜/title＞
＜/head＞
＜body＞
＜p onmouseover="this.style.fontSize=200" onmouseout="this.style.fontSize=100"＞田涛 ＜/p＞
＜/body＞
＜/html＞
以上实例是利用内联改变字体样式，当鼠标指向“田涛”时字体因为定义了this.style.fontSize=200，这两个字放大至200pt,当鼠标移开“田涛”时，因定义了this.style.fontSize=100，这两个字体缩小到100pt.
2.javascript引发事件
＜html＞
＜head＞
＜style＞
H1.italic {font-style:italic}
H1.bold {font-style:bold; }
＜/style＞
＜/head＞
＜body＞
＜script language="javascript"＞
function changeHead() {
if (H1_1.className=="bold") {
H1_1.className="italic" }
else {
H1_1.className="bold";}
}
＜/script＞
＜h1 id="H1_1" class="bold" onmouseover="changeHead()" onmouseout="changeHead()"＞田涛 ＜/h1＞
＜/body＞
＜/html＞
在上面的实例当中，我们首先定义了两个CSS类H1.italic和H1.bold，然后利用javascript脚本定义函数 changeHead(),最后在需要的地方引发事件执行定义好的函数。这里我们引发了两个单击事件onmouseover和onmouseout。在这里我还要说一点，因为你定义了H1两个类H1.italic 和H1.bold，所以当你在引用时，要首先设置class="bold"，表示字体以bold样式出现。然后，移动鼠标到“田涛”上，触发了事件一，移开“田涛”时，触发了事件二。
对于动态字体，我们还有很多方法来完善它。只是在考虑利用动态字体时，需要了解不同浏览器会产生不一样的结果。这时侯，就需要不停测试，来找到一个两全其美的方法。最后，希望你在看完这篇文章后，找一点CSS及javascript的资料来看，因为它们才是实现所有“梦想”的工具。
--------------------------------------------------------------------------------
用CSS 快速定制下拉菜单
访问过 Microsoft 中文主页的很多人都不会忘记它新奇的下拉式菜单吧. 它的确给我们带来一股清新的网风, 它不仅实现了网页下拉式菜单,省去了很多点击的麻烦,还由此展示了一种新颖的网页设计方法.那么我们是否也能在工作中或主页上实现这一美妙的效果呢？带着这一疑问，笔者在实践过程中逐渐掌握了这一方法。尽管没有Microsoft主页上的完美, 毕竟还是达到了异工同曲之妙.
要做一个下拉式菜单，首先要定义一个格式化的可定位的对象。这个对象不仅可以具有普通对象具备的任何特征，还必须可以重叠在该网页的任何其他对象之上。
我们知道, 如果要在网页之中的任何对象上再放置一个对象，除了使用Java小程序外，还可以使用CSS 技术。如果使用Java小程序，不外乎是建立在Panel对象和动态生成一幅Image基础之上来完成的 ，这样做不仅烦琐，增加了网页建设的难度，更重要的是延长了访问者等待的时间。我们希望网页精巧、内容丰富而又不希望它过于臃肿、加载速度快，那么CSS就是我们等待已久的利器。
有了CSS, 网页设计即可变得轻松起来。
我们利用 CSS 格式化模型定位一个具有填充属性的通用类：.菜单类名 {padding: 填充宽度} 然后对我们要使用的每一个菜单进行如下标记：
#名称 {
position: 可以是绝对定位 absolute, 相对定位 relative 和静
态定位 static
top: 距顶位置
left: 距左位置
菜单宽度
height: 菜单高度
color: 菜单颜色
border: 菜单体型：不画边框 none,实线 solid,双线 double,
3D外嵌 outset
vertical-align: 垂直调整
visibility: 可视性: 可见(IE 为 visible, Netscape 为show)
隐藏(IE 为 hidden, Netscape 为hide)
注意：这里的位置和高度单位有cm(绝对单位)、px(像素单位)、em(以M或H字母的高度为比例)、%(百分比单位),读者可根据自己的需要来决定。
有了这些“容器”，我们还得把所需的菜单项 MenuItem 填到里面去，在定义每一个菜单栏时，除了原料仅仅是 HTML 4.0 的内容外，还要把菜单栏的内容与鼠标的动作联系起来，一个是鼠标停留时onMouseover，另一个是鼠标离开时 onMouseOut。
通用定义如下：
＜a href="鼠标点击到那里去" onMouseOver="显示" onMouseOver="隐藏"＞
菜单栏内容＜/a＞＜br＞
在菜单栏都完成之后，用 SPAN 把这些元素编组起来? 为菜单对象这个容器也要感应鼠标的停留和离开时的事件，所以在编组时也要加以考虑：
＜span id=所属菜单 onMouseOver="显示" onMouseOut="隐藏"＞
＜div class=菜单类＞
＜font face="菜单字体" color="颜色" size=2＞
OK,一个层次分明的菜单就搞定了，我们可以用边框、字体和颜色把每个菜单都风格化，以边框为例。
如果要把菜单立体化，只须在菜单(border)属性里加上: ＜粗细＞ ＜长度＞ ＜颜色＞ ＜三维效果＞ 即可：
...{padding: 2pt} #TestMenu1{border:thin soild outset; position:
absolute;...
就成为一个立体的细边菜单。
最后，我们期望菜单是实时建立的，所以借助了 javascript 的 document.write 函数，在输出 HTML 代码时，别忘了通知浏览器你使用了CSS:
document.write (＜STYLE type="text/css"＞...
以上是简单的单层菜单，加以适当的扩充，就可以做成一个多层的，可以在菜单栏里显示图标、音乐、滤镜效果、透明和3D样式的色彩绚丽的折叠式菜单！