常见网页技巧
1.鼠标移动上去，图片变亮，移开又变成灰色。改变的是透明度。
<style>
.p1{filter:Alpha(Opacity=20)}
.p2{filter:Alpha(Opacity=100)}
</style>
<a href=http://www.pealand.com/ target=_blank><img src=images/game01.gif border=0 class=p1 onmouseover="this.className='p2'" onmouseout="this.className='p1'"></a>
<a href=http://www.pealand.com/sc target=_blank><img src=images/game04.gif border=0 class=p1 onmouseover="this.className='p2'" onmouseout="this.className='p1'"></a>
<a href=http://bzb.gbq.cn target=_blank><img src=images/game06.gif border=0 class=p1 onmouseover="this.className='p2'" onmouseout="this.className='p1'"></a>
<a href=http://www.pealand.com/myroom/edit.htm target=_blank><img src=images/game02.gif border=0 class=p1 onmouseover="this.className='p2'" onmouseout="this.className='p1'"></a>
2.怎样在网页中播放mp3格式音乐
<html>
<title></title>
<body>
<embed src="http://music.jztele.com/mp3/dianying/xyxy.mp3"; loop=false autostart=true name=bgss width="0" height=0>
</body>
</html>
详细说明：
<embed
src="xx.mp3" 音乐文件
loop=false 是否重复播放
autostart=true 是否自动开始
name=bgss 为了控制而设定的名字
width="0" height="0" 宽、高
>
3.滚动现实公告
<table width="800" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr style="text-align: center;">
<td height="0"> <hr noshade> <p>
<marquee>
<xmp> 事件文字滚动 ——公告</xmp>
</marquee>
</p>
<hr noshade></td>
</tr>
</tbody>
</table>
4.以图片作为按钮
<form method="post" action="test.html">
<input type="text" name="textfield">
<input type="text" name="textfield2">
<input type="image" border="0" name="imageField" src="../img/submit.jpg" width="71" height="32" onclick="submit()">
</form>
5.表格中单元格之间分隔线的隐藏方法
其实上面的三个表格都有三行三列，隐藏分隔线的诀窍在于rules，察看这三个表格的源代码，我们可以看到<TABLE>标签中都有rules。 它有三个参数(cols,rows,none)，当rules=cols时，表格会隐藏纵向的分隔线，这样我们就只能看到表格的行；当rules=rows时，则 隐藏了横向的分隔线，这样我们只能看到表格的列；而当rules=none时，纵向分隔线和横向分隔线将全部隐藏。
6.表格边框的隐藏
表格边框的显示与隐藏，是可以用frame参数来控制的。请注意它只控制表格的边框图，而不影晌单元格。
只显示上边框 <table frame=above>
只显示下边框 <table frame=below>
只显示左、右边框 <table frame=vsides>
只显示上、下边框 <table frame=hsides>
只显示左边框 <table frame=lhs>
只显示右边框 <table frame=rhs>
不显示任何边框 <table frame=void>
7.刷新的不同状态
非模态刷新父页面：window.opener.location.reload();
模态刷新父页面：window.dialogArguments.location.reload();
window.location.assign('chklogin.asp');
window.location.reload('chklogin.asp');
以后用前者进行刷新吧。后者似乎对FF 不怎么兼容。
8.文字过长，缩略显示为...
<DIV STYLE="width: 120px; border: 1px solid blue;
overflow: hidden; text-overflow:ellipsis">
<NOBR title="就是比如有一行文字，很长，表格内一行显示不下.">就是比如有一行文字，很长，表格内一行显示不下.</NOBR>
</DIV>
9.加入收藏夹通用代码
<script type="text/javascript">
function addBookmark(title,url)
{
if (window.sidebar)
{
window.sidebar.addPanel(title, url,"");
} else if( document.all )
{
window.external.AddFavorite( url, title);
} else if( window.opera && window.print )
{
return true;
}
}
</script>
页面使用：<a href=javascript:addBookmark('天极网网页陶吧','http://homepage.yesky.com/')> 添加到收藏</a>
10.几种弹出窗口
用户输入：var msg=prompt("请输入密码：");if(msg == "PKU") 弹出输入框。
用户确定：var IsOk = confirm('ok');
open为打开一个窗口。
11.动态改变 下拉列表的值。
document.formname.elements[第几个元素].text = "test";
eg:
document.test9_1.elements[0].options[0].text="昆明市";
当然也可以用，之所以写出来是因为很多时候，我总是习惯用value，而忽略了text属性：
document.getElementById('select').options[0].text="昆明市";
12.动态插入表格内容：
document.getElementById('saleAndLost').rows[1].cells
x[1].innerHTML="test";
13.播放器代码
(1)media player代码:
<DIV>
<OBJECT id=videowindow1 height=185 width=179 classid=CLSID:6BF52A52-394A-11D3-B153-00C04F79FAA6>
<PARAM NAME="URL" VALUE="http://tyrb.com/big5/site1/images/2006-02/17/020203170937500170795.mp3">
<PARAM NAME="playCount" VALUE="infinite">
<PARAM NAME="autoStart" VALUE="1">
<PARAM NAME="volume" VALUE="50">
<PARAM NAME="uiMode" VALUE="full">
<PARAM NAME="stretchToFit" VALUE="1">
</OBJECT>
</DIV>
其中http://tyrb.com/big5/site1/images/2006-02/17/020203170937500170795.mp3就是歌曲"幸福像花儿一样"的地址，
改变这个地址也就改变了你的歌曲
(2)WMP播放器
<embed src="影音文件地址" width="播放器宽" height="播放器高" autostart="true" loop="true" align="middle" volume="200" type="audio/x-pn-realaudio-plugin" exts="ra,ram" Init fn="load-types" mime-types="mime.types" ALT="(Random)"></embed>
(3)Flash播放器
<embed src="Flash地址" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="播放器宽" height="播放器高[" quality="High"></embed>
(4)RealPlayer播放器
<object classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width="480" height="360">
<param name="src" value="dfA.rmvb" />
<param name="controls" value="ImageWindow" />
<param name="console" value="_master" />
</object><br />
<object classid="CLSID:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA" width="480" height="32">
<param name="src" value="dfA.rmvb" />
<param name="controls" value="controlpanel" />
<param name="AUTOSTART" value="1">
<param name="console" value="_18c03c83e52df1f1285b0ac2d1ea7911" />
</object>
14.window.open参数详解
(1). 使用举例：
<SCRIPT LANGUAGE="javascript">
<!--
window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no,resizable=no,location=no, status=no')
//写成一行
-->
</SCRIPT>
(2). 参数详细描述
'page.html' 弹出窗口的文件名；
'newwindow' 弹出窗口的名字（不是文件名），非必须，可用空''代替；
height=100 窗口高度；
width=400 窗口宽度；
top=0 窗口距离屏幕上方的象素值；
left=0 窗口距离屏幕左侧的象素值；
toolbar=no 是否显示工具栏，yes为显示；
menubar，scrollbars 表示菜单栏和滚动栏。
resizable=no 是否允许改变窗口大小，yes为允许；
location=no 是否显示地址栏，yes为允许；
status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；
15.构造可编辑的select下拉框
<input type=text name=re_name style="width:80px;height:21px;font-size:10pt;"><span style="width:18px;border:0px solid red;">
<select name="r00" style="margin-left:-80px;width:98px;height:21px;background-color:#FFEEEE;" onChange="document.all.re_name.value=this.value;">
<option value="1024">1024</option>
<option value="10240">10240</option>
<option value="102400">102400</option>
</select>
</span>
16. js 动态改写iframe 内容
<iframe src="about:blank" width="200" height="200" id="view" name="view" onload="f(this);" onfocus="g(this);"></iframe>
<script>
function f(aa)
{
aa.contentWindow.document.body.innerHTML = 'fff';
}
function g(aa)
{
aa.contentWindow.document.body.innerHTML = 'ggg';
}
</script>
17.网页中所有链接去除下划线：
<style type="text/css">
<!--
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
-->
</style>
18.不希望网页提示脚本有错的处理方式：
<html>
<head>
<script type="text/javascript">
onerror = function(msg,url,l){ return true;}
function message()
{
adddlert("Welcome guest!");
}
</script>
</head>
<body>
<input type="button" value="View message" onclick="message()" />
</body>
</html>
19.在url地址前面加个图标
①制作或找一个16×16像素的图标（ico文件）
②保存文件名为 favicon.ico
③上传到你网站的根目录
那么有了Favicon.ico该怎么使用呢？很简单，你只需要把Favicon.ico上传到网站的根目录，这样整个站点的URL前面都会出现这个图标，是不是很简单？
如果您需要将Favicon.ico放到其他目录下，或者希望让不同的网页显示不同的Favicon，那就需要在网页Html文件中做设定了，具体设置也很简单，在Html源代码中的<head>部分加入如下的代码：
<link rel="icon" href="/slyar/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/slyar/favicon.ico" type="image/x-icon">
20.iframe 透明：
<iframe src="./ads_top_tian.html" allowtransparency="true" style="background-color=transparent" title="test" frameborder="0" width="470" height="308" scrolling="no"></iframe>
<style>
.p1{filter:Alpha(Opacity=20)}
.p2{filter:Alpha(Opacity=100)}
</style>
<a href=http://www.pealand.com/ target=_blank><img src=images/game01.gif border=0 class=p1 onmouseover="this.className='p2'" onmouseout="this.className='p1'"></a>
<a href=http://www.pealand.com/sc target=_blank><img src=images/game04.gif border=0 class=p1 onmouseover="this.className='p2'" onmouseout="this.className='p1'"></a>
<a href=http://bzb.gbq.cn target=_blank><img src=images/game06.gif border=0 class=p1 onmouseover="this.className='p2'" onmouseout="this.className='p1'"></a>
<a href=http://www.pealand.com/myroom/edit.htm target=_blank><img src=images/game02.gif border=0 class=p1 onmouseover="this.className='p2'" onmouseout="this.className='p1'"></a>
2.怎样在网页中播放mp3格式音乐
<html>
<title></title>
<body>
<embed src="http://music.jztele.com/mp3/dianying/xyxy.mp3"; loop=false autostart=true name=bgss width="0" height=0>
</body>
</html>
详细说明：
<embed
src="xx.mp3" 音乐文件
loop=false 是否重复播放
autostart=true 是否自动开始
name=bgss 为了控制而设定的名字
width="0" height="0" 宽、高
>
3.滚动现实公告
<table width="800" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr style="text-align: center;">
<td height="0"> <hr noshade> <p>
<marquee>
<xmp> 事件文字滚动 ——公告</xmp>
</marquee>
</p>
<hr noshade></td>
</tr>
</tbody>
</table>
4.以图片作为按钮
<form method="post" action="test.html">
<input type="text" name="textfield">
<input type="text" name="textfield2">
<input type="image" border="0" name="imageField" src="../img/submit.jpg" width="71" height="32" onclick="submit()">
</form>
5.表格中单元格之间分隔线的隐藏方法
其实上面的三个表格都有三行三列，隐藏分隔线的诀窍在于rules，察看这三个表格的源代码，我们可以看到<TABLE>标签中都有rules。 它有三个参数(cols,rows,none)，当rules=cols时，表格会隐藏纵向的分隔线，这样我们就只能看到表格的行；当rules=rows时，则 隐藏了横向的分隔线，这样我们只能看到表格的列；而当rules=none时，纵向分隔线和横向分隔线将全部隐藏。
6.表格边框的隐藏
表格边框的显示与隐藏，是可以用frame参数来控制的。请注意它只控制表格的边框图，而不影晌单元格。
只显示上边框 <table frame=above>
只显示下边框 <table frame=below>
只显示左、右边框 <table frame=vsides>
只显示上、下边框 <table frame=hsides>
只显示左边框 <table frame=lhs>
只显示右边框 <table frame=rhs>
不显示任何边框 <table frame=void>
7.刷新的不同状态
非模态刷新父页面：window.opener.location.reload();
模态刷新父页面：window.dialogArguments.location.reload();
window.location.assign('chklogin.asp');
window.location.reload('chklogin.asp');
以后用前者进行刷新吧。后者似乎对FF 不怎么兼容。
8.文字过长，缩略显示为...
<DIV STYLE="width: 120px; border: 1px solid blue;
overflow: hidden; text-overflow:ellipsis">
<NOBR title="就是比如有一行文字，很长，表格内一行显示不下.">就是比如有一行文字，很长，表格内一行显示不下.</NOBR>
</DIV>
9.加入收藏夹通用代码
<script type="text/javascript">
function addBookmark(title,url)
{
if (window.sidebar)
{
window.sidebar.addPanel(title, url,"");
} else if( document.all )
{
window.external.AddFavorite( url, title);
} else if( window.opera && window.print )
{
return true;
}
}
</script>
页面使用：<a href=javascript:addBookmark('天极网网页陶吧','http://homepage.yesky.com/')> 添加到收藏</a>
10.几种弹出窗口
用户输入：var msg=prompt("请输入密码：");if(msg == "PKU") 弹出输入框。
用户确定：var IsOk = confirm('ok');
open为打开一个窗口。
11.动态改变 下拉列表的值。
document.formname.elements[第几个元素].text = "test";
eg:
document.test9_1.elements[0].options[0].text="昆明市";
当然也可以用，之所以写出来是因为很多时候，我总是习惯用value，而忽略了text属性：
document.getElementById('select').options[0].text="昆明市";
12.动态插入表格内容：
document.getElementById('saleAndLost').rows[1].cells
x[1].innerHTML="test";
13.播放器代码
(1)media player代码:
<DIV>
<OBJECT id=videowindow1 height=185 width=179 classid=CLSID:6BF52A52-394A-11D3-B153-00C04F79FAA6>
<PARAM NAME="URL" VALUE="http://tyrb.com/big5/site1/images/2006-02/17/020203170937500170795.mp3">
<PARAM NAME="playCount" VALUE="infinite">
<PARAM NAME="autoStart" VALUE="1">
<PARAM NAME="volume" VALUE="50">
<PARAM NAME="uiMode" VALUE="full">
<PARAM NAME="stretchToFit" VALUE="1">
</OBJECT>
</DIV>
其中http://tyrb.com/big5/site1/images/2006-02/17/020203170937500170795.mp3就是歌曲"幸福像花儿一样"的地址，
改变这个地址也就改变了你的歌曲
(2)WMP播放器
<embed src="影音文件地址" width="播放器宽" height="播放器高" autostart="true" loop="true" align="middle" volume="200" type="audio/x-pn-realaudio-plugin" exts="ra,ram" Init fn="load-types" mime-types="mime.types" ALT="(Random)"></embed>
(3)Flash播放器
<embed src="Flash地址" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="播放器宽" height="播放器高[" quality="High"></embed>
(4)RealPlayer播放器
<object classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width="480" height="360">
<param name="src" value="dfA.rmvb" />
<param name="controls" value="ImageWindow" />
<param name="console" value="_master" />
</object><br />
<object classid="CLSID:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA" width="480" height="32">
<param name="src" value="dfA.rmvb" />
<param name="controls" value="controlpanel" />
<param name="AUTOSTART" value="1">
<param name="console" value="_18c03c83e52df1f1285b0ac2d1ea7911" />
</object>
14.window.open参数详解
(1). 使用举例：
<SCRIPT LANGUAGE="javascript">
<!--
window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no,resizable=no,location=no, status=no')
//写成一行
-->
</SCRIPT>
(2). 参数详细描述
'page.html' 弹出窗口的文件名；
'newwindow' 弹出窗口的名字（不是文件名），非必须，可用空''代替；
height=100 窗口高度；
width=400 窗口宽度；
top=0 窗口距离屏幕上方的象素值；
left=0 窗口距离屏幕左侧的象素值；
toolbar=no 是否显示工具栏，yes为显示；
menubar，scrollbars 表示菜单栏和滚动栏。
resizable=no 是否允许改变窗口大小，yes为允许；
location=no 是否显示地址栏，yes为允许；
status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；
15.构造可编辑的select下拉框
<input type=text name=re_name style="width:80px;height:21px;font-size:10pt;"><span style="width:18px;border:0px solid red;">
<select name="r00" style="margin-left:-80px;width:98px;height:21px;background-color:#FFEEEE;" onChange="document.all.re_name.value=this.value;">
<option value="1024">1024</option>
<option value="10240">10240</option>
<option value="102400">102400</option>
</select>
</span>
16. js 动态改写iframe 内容
<iframe src="about:blank" width="200" height="200" id="view" name="view" onload="f(this);" onfocus="g(this);"></iframe>
<script>
function f(aa)
{
aa.contentWindow.document.body.innerHTML = 'fff';
}
function g(aa)
{
aa.contentWindow.document.body.innerHTML = 'ggg';
}
</script>
17.网页中所有链接去除下划线：
<style type="text/css">
<!--
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
-->
</style>
18.不希望网页提示脚本有错的处理方式：
<html>
<head>
<script type="text/javascript">
onerror = function(msg,url,l){ return true;}
function message()
{
adddlert("Welcome guest!");
}
</script>
</head>
<body>
<input type="button" value="View message" onclick="message()" />
</body>
</html>
19.在url地址前面加个图标
①制作或找一个16×16像素的图标（ico文件）
②保存文件名为 favicon.ico
③上传到你网站的根目录
那么有了Favicon.ico该怎么使用呢？很简单，你只需要把Favicon.ico上传到网站的根目录，这样整个站点的URL前面都会出现这个图标，是不是很简单？
如果您需要将Favicon.ico放到其他目录下，或者希望让不同的网页显示不同的Favicon，那就需要在网页Html文件中做设定了，具体设置也很简单，在Html源代码中的<head>部分加入如下的代码：
<link rel="icon" href="/slyar/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/slyar/favicon.ico" type="image/x-icon">
20.iframe 透明：
<iframe src="./ads_top_tian.html" allowtransparency="true" style="background-color=transparent" title="test" frameborder="0" width="470" height="308" scrolling="no"></iframe>