网页技巧 - - 风言疯语

加入收藏夹代码

ie地址栏图标

把名为 favicon.ico 大小 16X16 的图标放到网页的根目录

长度自适应的div

嵌套DIV:父DIV的高度不能根据子DIV自动变化的解决方案
<div id="parent">
   <div id="content"> </div>
</div>
当Content内容多时，即使parent设置了高度100%或auto,在不同浏览器下还是不能完好的自动伸展。解决方案
<div id="parent">
  <div id="content"></div>
  <div style="font: 0px/0px sans-serif;clear: both;display: block"> </div><!–here–>
</div>
在层的最下方产生一个高度为1的空格，可解除这个问题

JAVA容错代码

一些网页用了JAVA程序时容易出现脚本错误，下面就是为解决次问题而从网上搜索而来的代码，希望对你有用！

<SCRIPT LANGUAGE="JavaScript">
<!– Hide

function killErrors() {
return true;
}

window.onerror = killErrors;

// –>
</SCRIPT>

Q: 实现双击自动滚屏.
A: 将以下代码添加到需要自动滚屏的页面上

<s cript Language="Javas cript">
var currentpos, timer;
function initialize(){
timer = setInterval("scrollwindow()", 1);
}
function sc(){
clearInterval(timer);
}
function scrollwindow(){
currentpos = document.body.scrollTop;
window.scroll(0, ++currentpos);
if(currentpos != document.body.scrollTop){
sc();
}
}
document.onmousedown = sc;
document.ondblclick = initialize;
</s cript>

Q: 鼠标特效。
A: 鼠标放到链接上就会出现一个说明框，里面有滚动的文字说明

<a href="http://xiaoguo001.nease.net" target="_blank" onMouseOver="helpor_net_show(this,event,’ 这里是小郭的个人主页 ‘)" onMouseOut="helpor_net_hide()"> 把鼠标放上来试试
<div id="tooltip2" style="position:absolute;visibility:hidden;clip:rect(0 150 50 0);width:150px;background-color:seashell">
<layer name="nstip" width="1000px" bgColor="seashell"></layer>
</div>
<SCRIPT language="JavaScript">
<!–
if (!document.layers&&!document.all)
event="test"
function helpor_net_show(current,e,text){

if (document.all&&document.readyState=="complete"){
document.all.tooltip2.innerHTML=’<marquee style="border:1px solid #3399ff">’+text+’</marquee>’
document.all.tooltip2.style.pixelLeft=event.clientX+document.body.scrollLeft+10
document.all.tooltip2.style.pixelTop=event.clientY+document.body.scrollTop+10
document.all.tooltip2.style.visibility="visible"
}

else if (document.layers){
document.tooltip2.document.nstip.document.write(‘ ‘+text+’ ‘)
document.tooltip2.document.nstip.document.close()
document.tooltip2.document.nstip.left=0
currentscroll=setInterval("scrolltip()",100)
document.tooltip2.left=e.pageX+10
document.tooltip2.top=e.pageY+10
document.tooltip2.visibility="show"
}
}
function helpor_net_hide(){
if (document.all)
document.all.tooltip2.style.visibility="hidden"
else if (document.layers){
clearInterval(currentscroll)
document.tooltip2.visibility="hidden"
}
}

function scrolltip(){
if (document.tooltip2.document.nstip.left>=-document.tooltip2.document.nstip.document.width)
document.tooltip2.document.nstip.left-=5
else
document.tooltip2.document.nstip.left=150
}
//–>
</SCRIPT>

Q: 文本随机输出，可以用来作公告栏。
A: 脚本说明 :
第一步 : 把如下代码加入 <head> 区域中
<SCRIPT LANGUAGE="JavaScript">
<!– Original: Tarjei Davidsen (the@rescueteam.com) –>

<!– This script and many more are available free online at –>
<!– The JavaScript Source!! http://javascript.internet.com –>

<!– Begin
var max=0;
function textlist() { i++:textlist.arguments[i]; max }
tl = new textlist(
" 随着 INTERNET 时代的逐步到来 , 人们对网络的认识与感知越来越深刻 ",
" 上网主要是进行 web 页面浏览，所以 web 页面的精彩程度对一个网站的生 ",
" 人通过制作个人主页展现自己的才华，而且，由于出现了多种制作网页的软件 ",
" 但是，光用软件就成制作出你想要的各种页面效果吗？答案肯定是否定的但是，光用软件就成制作出你想要的各种页面效果吗？答案肯定是否定的 ",
"JavaScript 是 Netscape( 网景 ) 公司首先推出的一种针对 WEB 页面的解释型语 "
);

var x = 0; pos = 0;
var l = tl[0].length;
function textticker() {
document.tickform.tickfield.value = tl[x].substring(0, pos) + "_";
if(pos++ == l) {
pos = 0;
setTimeout("textticker()", 2000);
if(++x == max) x = 0;
l = tl[x].length;
} else
setTimeout("textticker()", 50);
}
// End –>
</script>
</HEAD>

第二步 : 把如下代码加入 <body> 区域中
<form name=tickform>
<textarea name=tickfield rows=3 cols=38 style="background-color: rgb(0,0,0); color: rgb(255,255,255); cursor: default; font-family: Arial; font-size: 12px" wrap=virtual>The news will appear here when the page has finished loading.
</textarea>
</form>

第三步 : 把 <body> 改为
<body bgcolor="#fef4d9" OnLoad="textticker()">

Q: 进入页面自动弹出的欢迎致词，个人网站可加……
A: 今天在公司网站上抓的，进入页面自动弹出的欢迎致词，个人网站可加上不免没有加好呀。加的位置应该可以看懂吧。
<html>
<head>
</head>
<body>
</body>
<script language="vbscript">
<!–
MsgBox"欢迎光临我的网站！"
–>
</script>
</html>

Q: 页面自动刷新说明。
A: 当你做网页时，是不是有的时候想让你的网页自动不停刷新，或者过一段时间自动跳转到另外一个你自己设定的页面？其实实现这个效果非常地简单，而且这个效果甚至不能称之为特效。你只要把如下代码加入你的网页中就可以了。

1，页面自动刷新：把如下代码加入<head>区域中<meta http-equiv="refresh" content="20">,其中20指每隔20秒刷新一次页面.

2，页面自动跳转：把如下代码加入<head>区域中<meta http-equiv="refresh" content="20;url=http://www.163.com">,其中20指隔20秒后跳转到http://www.163.com页面。

Q: 鼠标箭头变十字架代码(对一些特殊的网页有用) .
A: 你们自己试试效果就知道了.

<script language="JavaScript1.2">
<!–
if (document.all&&!window.print){
leftright.style.width=document.body.clientWidth-2
topdown.style.height=document.body.clientHeight-2
}
else if (document.layers){
document.leftright.clip.width=window.innerWidth
document.leftright.clip.height=1
document.topdown.clip.width=1
document.topdown.clip.height=window.innerHeight
}
function followmouse1(){
//move cross engine for IE 4+
leftright.style.pixelTop=document.body.scrollTop+event.clientY+1
topdown.style.pixelTop=document.body.scrollTop
if (event.clientX<document.body.clientWidth-2)
topdown.style.pixelLeft=document.body.scrollLeft+event.clientX+1
else
topdown.style.pixelLeft=document.body.clientWidth-2
}
function followmouse2(e){
//move cross engine for NS 4+
document.leftright.top=e.y+1
document.topdown.top=pageYOffset
document.topdown.left=e.x+1
}
if (document.all)
document.onmousemove=followmouse1
else if (document.layers){
window.captureEvents(Event.MOUSEMOVE)
window.onmousemove=followmouse2
}
function regenerate(){
window.location.reload()
}
function regenerate2(){
setTimeout("window.onresize=regenerate",400)
}
if ((document.all&&!window.print)||document.layers)
//if the user is using IE 4 or NS 4, both NOT IE 5+
window.onload=regenerate2
//–>
</script>
<style>
<!–
#leftright, #topdown{
position:absolute;
left:0;
top:0;
width:1px;
height:1px;
layer-background-color:#B0D0F8;
background-color:#00eeff;
z-index:100;
font-size:1px;
}
–>
</style>

【貼上】然後切換到您的網頁，按『Ctrl+V』將剛剛複製的程式碼貼在</head>之前。

<div id="leftright" style="width:expression(document.body.clientWidth-2)">
</div>
<div id="topdown" style="height:expression(document.body.clientHeight-2)">
</div>

【貼上】然後切換到您的網頁，按『Ctrl+V』將剛剛複製的程式碼貼在<body>之後任何位置。

【修改程式碼】
若想改改線的顏色，那就改background-color:#00eeff;這部份，後面的顏色碼就行了。

Q: 网站鼠标点击有烟花效果的代码 .
A: <SCRIPT LANGUAGE="JavaScript1.2">
<!– Begin
var ver = navigator.appVersion;
var dom = document.getElementById ? 1 : 0;
var ie5 = (ver.indexOf("MSIE 5") > -1 && dom) ? 1 : 0;
var n = (document.layers);
var ie = (document.all);

var sparksAflyin = 0;
var totalSparks = 0;
var sparksOn = 1;
function initMouseEvents() {
if (n) document.captureevents(event.mousedown | event.mousemove) }
function mouseDown(e) { i++):eval(‘anim_’+i+’_x[j]+mousex’); document.body.offsetheight+document.body.scrolltop:document.body.offsetHeight
+document.body.scrollTop-30; document.body.offsetwidth+document.body.scrollleft:document.body.offsetWidth
+document.body.scrollLeft-30; document.all.sdiv’+i+’.style.top:tempy; document.layers.sdiv’+i+’.left:tempx; document.layers.sdiv’+i+’.top:tempy;
totalsparks++= = ( }
if (totalSparks == 10) {
sparksAflyin = 0;
totalSparks = 0;
}
}
function SHOW(divName){
if (document.all)
eval(‘document.all.’+divName+’.style.visibility = "visible";’);
else if (document.layers)
eval(‘document.layers["'+divName+'"].visibility = "visible";’);
}
function HIDE(divName){
if (document.all)
eval(‘document.all.’+divName+’.style.visibility = "hidden";’);
else if (document.layers)
eval(‘document.layers["'+divName+'"].visibility = "hide";’);
}
anim_0_x=new Array(20,20,10,0,0,0,0,0,0,0,0,0);
anim_0_y=new Array(-20,-40,-60,-80,-60,-40,-20,0,20,40,60,80);
anim_1_x=new Array(20,20,17,36,60,78,90,92,93,98,108,120,133,152,181);
anim_1_y=new Array(-20,-20,-33,-38,-38,-27,-2,25,51,84,113,141,162,212,253);
anim_2_x=new Array(20,20,2,3,4,5,6,7,8,9,10,12,13,15,18);
anim_2_y=new Array(-20,-20,-33,-38,-38,-27,-2,25,51,84,113,141,162,212,253);
anim_3_x=new Array(-20,-20,-2,-1,7,10,18,35,60,102,94,94,93,97,108,111,117,127);
anim_3_y=new Array(-20,-25,-64,-89,-104,-150,-173,-197,-213,-199,-151,-101,-66,-17,27,87,140,189);
anim_4_x=new Array(-20,-20,-10,-39,-30,-69,-64,-138,-154,-200,-181,-209,-191,-207,-203,-213,-202,-221,-211);
anim_4_y=new Array(-20,-20,-28,-51,-79,-100,-135,-154,-193,-183,-149,-134,-89,-60,8,51,107,157,201);
anim_5_x=new Array(-20,-29,-51,-72,-105,-133,-164,-189,-209,-229,-247,-270,-279,-282,-283,-283,-285,-286,-288);
anim_5_y=new Array(-20,-55,-86,-116,-154,-183,-205,-217,-217,-198,-169,-120,-44,-8,40,87,144,190,248);
anim_6_x=new Array(-20,-20,-7,14,44,79,143,186,217,226,234,244,250,259,265,274);
anim_6_y=new Array(-20,-21,-72,-113,-139,-166,-188,-181,-126,-68,-3,54,134,187,215,257);
anim_7_x=new Array(20,20,-3,-9,-13,-27,-33,-44,-54,-66,-77,-95,-107,-136,-150,-160,-164,-168,-171,-172,-172,-176,-175);
anim_7_y=new Array(-20,-26,-43,-63,-89,-116,-145,-169,-201,-222,-240,-253,-254,-245,-220,-195,-160,-124,-81,-53,-26,19,68);
anim_8_x=new Array(-20,20,-35,39,0,45,-1,24,-15,14,-20,35,-18,38,-11,16,49,64,81,93,100,103,109);
anim_8_y=new Array(-20,-20,-32,-42,-62,-76,-89,-107,-132,-147,-173,-180,-192,-209,-236,-193,-119,-73,-24,51,95,130,188);
anim_9_x=new Array(-20,-51,-89,-110,-165,-191,-228,-240,-259,-271,-277,-281,-287);
anim_9_y=new Array(-20,-20,-35,-37,-34,-16,10,47,105,150,189,227,273);
// End –>
</script>

<body bgcolor="#fef4d9" OnLoad="initMouseEvents()">

<div id="sparks">
<div id="sDiv0" style="position:absolute; visibility: hidden;"><font face="arial black" color="red">a </div>
<div id="sDiv1" style="position:absolute; visibility: hidden;"><font face="arial black" color="yellow">b </div>
<div id="sDiv2" style="position:absolute; visibility: hidden;"><font face="arial black" color="blue">c </div>
<div id="sDiv3" style="position:absolute; visibility: hidden;"><font face="arial black" color="red">d </div>
<div id="sDiv4" style="position:absolute; visibility: hidden;"><font face="arial black" color="orange">e </div>
<div id="sDiv5" style="position:absolute; visibility: hidden;"><font face="arial black" color="white">f </div>
<div id="sDiv6" style="position:absolute; visibility: hidden;"><font face="arial black" color="green">g </div>
<div id="sDiv7" style="position:absolute; visibility: hidden;"><font face="arial black" color="skyblue">h </div>
<div id="sDiv8" style="position:absolute; visibility: hidden;"><font face="arial black" color="yellow">i </div>
<div id="sDiv9" style="position:absolute; visibility: hidden;"><font face="arial black" color="white">j </div>
</div>

Q: 文本随机输出，可以用来作公告栏，一个字一个字的输出，不错。。。
A: 脚本说明:
第一步:把如下代码加入<head>区域中
<SCRIPT LANGUAGE="JavaScript">
<!– Original: Tarjei Davidsen (the@rescueteam.com) –>

<!– This script and many more are available free online at –>
<!– The JavaScript Source!! http://javascript.internet.com –>

<!– Begin
var max=0;
function textlist() {
max=textlist.arguments.length;
for (i=0; i<max; i++)
this[i]=textlist.arguments[i];
}
tl = new textlist(
" 随着INTERNET时代的逐步到来,人们对网络的认识与感知越来越深刻",
"上网主要是进行web页面浏览，所以web页面的精彩程度对一个网站的生",
"人通过制作个人主页展现自己的才华，而且，由于出现了多种制作网页的软件",
"但是，光用软件就成制作出你想要的各种页面效果吗？答案肯定是否定的但是，光用软件就成制作出你想要的各种页面效果吗？答案肯定是否定的",
"JavaScript是Netscape(网景)公司首先推出的一种针对WEB页面的解释型语"
);

var x = 0; pos = 0;
var l = tl[0].length;
function textticker() {
document.tickform.tickfield.value = tl[x].substring(0, pos) + "_";
if(pos++ == l) {
pos = 0;
setTimeout("textticker()", 2000);
if(++x == max) x = 0;
l = tl[x].length;
} else
setTimeout("textticker()", 50);
}
// End –>
</script>
</HEAD>

第二步:把如下代码加入<body>区域中
<form name=tickform>
<textarea name=tickfield rows=3 cols=38 style="background-color: rgb(0,0,0); color: rgb(255,255,255); cursor: default; font-family: Arial; font-size: 12px" wrap=virtual>The news will appear here when the page has finished loading.</textarea>
</form>

第三步:把<body>改为
<body bgcolor="#fef4d9" OnLoad="textticker()">

归类于：网页技巧 — 狂风 @ 1:56 pm 评论(0)

JavaScript收藏

集一些常用的JavaScript特效和函数

JavaScript中的URL编码解码方法

汉字转拼音(首字母)
页面输入判断是否为各种数字（如空、0～9数字、浮点数、电话手机号码、身份证、邮编等等）

多级关联菜单(四级连动下拉框,数据库)

全国省市县无刷新多级关联菜单

文本筐怎样让它只能输入数字（以及怎么只能输入一个小数点和数字）

正则表达式的应用

页面上的javascript判断

装载页面进度条

"打开,另存为,属性,打印"等14个JS代码

几种不刷新页面取数据的方法

关于字符串的几个有用函数

玩透弹出窗口

JavaScript中的正则表达式(2)

JavaScript中的正则表达式(1)

jscript错误代码及相应解释大全

Javascript事件集合及其调用形式

可输可选类型的使用

大灰狼的Javascript工具箱(三)——网上搜集到的2种24点算法选择自 mind_1220 的 Blog

大灰狼的Javascript工具箱(二)——ie按钮大集合，vbscript和javascript互相调用方法选择自 mind_1220 的 Blog

大灰狼的Javascript工具箱(一)——web页面部分技巧选择自 mind_1220 的 Blog

日历选择以及日期时间选择实例

JavaScript:设为首页-加入收藏-联系我们的代码

javascript：Location对象的使用简介

B/S开发常用JavaScript技术

在jsp中的checkbox问题

JavaScript实用的一些技巧

js 几种常用的表单输入判断

归类于：网页技巧 — 狂风 @ 11:31 am 评论(0)

CSS技巧收藏

CSS的十八般技巧

发布于 2005-08-25 17:36 yesjoy 阅读(1) | 评论 (0) 编辑

常用CSS缩写语法总结

发布于 2005-08-02 11:07 yesjoy 阅读(8) | 评论 (0) 编辑

巧用CSS制作树状目录

发布于 2005-06-28 11:55 yesjoy 阅读(11) | 评论 (0) 编辑

归类于：网页技巧 — 狂风 @ 11:26 am 评论(0)

CSS 实现表格的变化

『用CSS改变表格边框样式』

隐藏下边

隐藏上边框

隐藏左边框

隐藏右边框

css定义：

<td style="border-bottom-style: none; border-bottom-width: medium" height="25">隐藏下边</td>
<td height="25" style="border-top-style: none; border-top-width: medium">隐藏上边框</td>
<td style="border-left-style: none; border-left-width: medium" height="25">隐藏左边框</td>
<td style="border-right-style: none; border-right-width: medium" height="25">隐藏右边框</td>

CSS也能控制表格的交替颜色
<style type="text/css">
<!–
tr {background-color:expression((this.sectionRowIndex%2==0)?"red":"blue")}
–>
</style>
</HEAD>
<table>
<tr><td>第1行</td><td>第1行</td></tr>
<tr><td>第2行</td><td>第2行</td></tr>
<tr><td>第3行</td><td>第3行</td></tr>
<tr><td>第4行</td><td>第4行</td></tr>
<tr><td

手把手教你用css美化表格边框

CSS制作标签卡Tab效果
用CSS实现表格的伸缩
CSS中实现表格颜色渐变
.table1{
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#D2E9F4,endColorStr=#edf8fd)
background-color: #ffffff;
border-right: 3px solid #D9E4E4;
border-left: 3px solid #D9E4E4;
margin-left: 5;
margin-top: 5;
margin-bottom: 5;
}

gradientType=1就是左右渐变
鼠标指向单元格变色
onmouseout="this.style.backgroundcolor=”" 鼠标离开效果onmouseover="this.style.backgroundcolor=’#FFcccc’"鼠标放上去的效果，可以修改#FFcccc的值来改变颜色
<table width="200" border="1" cellspacing="0" cellpadding="0">
<tr>
<td onmouseout="this.style.backgroundcolor=”" onmouseover="this.style.backgroundcolor=’#FFcccc’"> </td>
</tr>
<tr>
<td onmouseout="this.style.backgroundcolor=”" onmouseover="this.style.backgroundcolor=’#FFccaa’"> </td>
</tr>
</table>
立体表格

<table border="1" bordercolorlight="#ffffff" bordercolordark="#ffffff" width="200" cellpadding="0" cellspacing="0">
<tr align="center">
<td width="86"
bordercolorlight="#000000" bordercolordark="#eeeeee" bgcolor="#B7B7B7" >立体</td>
<td width="108"
bordercolorlight="#000000" bordercolordark="#eeeeee" bgcolor="#B7B7B7" >表格</td>
</tr>
</table>
阴影表格

这里主要用到了cSS滤镜style="filter:shadow(color=#cccccc,direction=120);width:300;padding-right:10;padding-bottom:10"
<div style="filter:shadow(color=#cccccc,direction=120);width:300;padding-right:10;padding-bottom:10">
<table width=300 border=1 bgcolor=#EAEAEA>
<tr><td width="93">111</td><td width="91">222</td><td width="94">333</td></tr>
</table>
</div>

　　附：插入cSS样式的方法（我们这里用半透明表格来做说明)
　　第一种方法是定义一个cSS名称。
　　比如
<style type="text/css">
<!–
.bg {
background-color: #66ccFF;
filter: Alpha(Opacity=20);
}
–>
　　元素需要用到cSS的时候，比如表格，定义一个cLASS就可以了，如
<table width="200" border="0" cellpadding="0" cellspacing="0" class="bg">
　　第二种是直接在你需要用到cSS元素的地方插入相关代码，style=""如：
<table width="201" border="1" style="filter: Alpha(Opacity=20);background-color: #66ccFF;">