网页开发必备技巧集合

转载 2007年09月21日 10:03:00

 

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为允许;  

前端跳槽面试必备技巧

第1章 课程介绍 很多同学对面试不够了解,不知道如何准备,对面试环节的设置以及目的不够了解,因此成功率不高。通常情况下校招生面试的          成功率低于1%,而社招的面试成功率也低于5%,所...
  • zhangye19920611
  • zhangye19920611
  • 2017年12月12日 10:20
  • 103

前端跳槽面试必备

面试模拟与技巧如何看待面试什么是面试?答:面试时测查和评价人员能力素质的一种考试活动。具体地说,面试时一种经过组织者精心设计,在特定场景下,以考官对考生的面对面交谈与观察为主要手段,又表及里测评考生的...
  • water_v
  • water_v
  • 2017年10月22日 13:12
  • 807

Golang 小技巧

1.前言Golang 开发过程中的一些小技巧在这里记录下。2.内容1)包的引用经常看到Golang代码中出现 _ "controller/home" 类似这种的引用,这里的下划线有什么作用呢? 其实默...
  • afandaafandaafanda
  • afandaafandaafanda
  • 2016年06月16日 22:17
  • 1538

Spring [boot] 使用技巧集合-不断积累

1、Spring  boot 如何允许跨域访问 测试中遇到的问题,需要前段跨域访问,使用过滤器设置 response.setHeader("Access-Control-Allow-Origin", ...
  • bestcxx
  • bestcxx
  • 2017年07月25日 17:25
  • 561

移动端web开发初探之Vuejs的简单实战

这段时间在做的东西,是北邮人论坛APP的注册页。这个注册页是内嵌的网页,因为打算安卓和IOS平台同时使用。因此实际上就是在做移动端的web开发了。 在这过程中遇到了不少有意思的东西。DEMO的git...
  • w178191520
  • w178191520
  • 2018年01月14日 17:34
  • 39

一些Golang小技巧

今天给大家介绍3个我觉得比较有启发的Golang小技巧,分别是以下几个代码片段 nsq里的select写文件和socketio模块里的sendfilefasthttp里对header的处理 n...
  • andylau00j
  • andylau00j
  • 2016年12月30日 00:55
  • 370

PHP常用的一些屌炸天的技巧(一)

大部分有两三年工作经验的PHPer,都必定积累了不少在日常开发中使用的小技巧。从前端,接口开发,团队编程规范,模块化和前辈们分享的个人经验中总结出一些小技巧。这些技能都能大大地提高我们日常开发的效率,...
  • github_36670459
  • github_36670459
  • 2016年11月18日 01:12
  • 668

Android产品研发(二十二)-->Android实用调试技巧

本文我们将讲解android中的调试技巧。程序调试,是将编制的程序投入实际运行前,用手工或编译程序等方法进行测试,修正语法错误和逻辑错误的过程。这是保证计算机信息系统正确性的必不可少的步骤。在andr...
  • qq_23547831
  • qq_23547831
  • 2016年07月18日 22:55
  • 5891

Java优化集合代码的一些方法

我们平常在开发中都会用到很多的集合类,但是在使用的时候会有很多自己都不怎么注意的小习惯会影响一些效率,这次就介绍一下优化集合代码的一些小方法;分离循环中被重复调用的代码假设我们要循环一个数组,最简单的...
  • liaodehong
  • liaodehong
  • 2016年08月16日 14:26
  • 651

慕课网:Web前端面试题目及答案汇总

HTML/CSS部分 1、什么是盒子模型? 在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框(border),元...
  • dongyang0311
  • dongyang0311
  • 2016年06月29日 14:44
  • 11535
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:网页开发必备技巧集合
举报原因:
原因补充:

(最多只允许输入30个字)