注册 登录
编程论坛 WEB前端(UI)

******网页设计常用的一些技巧******

zmjls 发布于 2005-11-05 09:23, 25302 次点击
1.加入收藏,设为首页:

<a href="javascript:window.external.AddFavorite('http://www.bydragon.com','百龙设计工作室')">加入收藏</a>

<a
href="#"
onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http:
//www.bydragon.com');">设为首页</a>

2.2秒后关闭当前页:
<script language="JavaScript">
<!--
  setTimeout('window.close();',2000);
-->
</script>

3.IE地址栏前换成自己的图标:
在首页<head></head>之间加上如下代码
<link rel="Shortcut Icon" href="favicon.ico">

4.在收藏夹中显示出你的图标:
在首页<head></head>之间加上如下代码
<link rel="Bookmark" href="favicon.ico">

5.改变滚动条颜色:
在首页<head></head>之间加上如下代码
<style>
body{
scrollbar-face-color:147faf; scrollbar-shadow-color:147faf;
scrollbar-highlight-color:147faf; scrollbar-3dlight-color:ffffff;
scrollbar-darkshadow-color:ffffff; scrollbar-track-color:ffffff;
scrollbar-arrow-color:ffffff;}
</style>

scrollbar-face-color表示滚动条面的颜色
scrollbar-shadow-color表示滚动条右斜面的颜色
scrollbar-highlight-color表示滚动条左斜面的颜色
scrollbar-3dlight-color表示滚动条上边和左边边沿的颜色
scrollbar-darkshadow-color表示滚动下边和右边边沿的颜色
scrollbar-track-color表示滚动条底板的颜色
scrollbar-arrow-color表示滚动条两端箭头的颜色

6.鼠标移到单元格颜色改变:
<table width=200><tr>
<td
bgcolor="#738278" style="cursor:hand"
onMouseOver="this.style.backgroundColor='red'"
onMouseOut="this.style.background='#738278'">移過來</td><
/tr></table>

7.申请按钮的等待:
把如下代码加入<body>区域中
<FORM action=register.cgi
method=post name=agree><CENTER><INPUT name=agreeb
type=submit value="请认真查看<服务条款和声明> (15秒后继续)"><INPUT
onclick=history.back(-1) type=reset value=" 我 不 同 意
"></CENTER></form>
<SCRIPT language=javascript>
<!--
var secs = 15;
document.agree.agreeb.disabled=true;
for(i=1;i<=secs;i++) {
window.setTimeout("update(" + i + ")", i * 1000);
}
function update(num) {
if(num == secs) {
document.agree.agreeb.value =" 我 同 意 ";
document.agree.agreeb.disabled=false;
}
else {
printnr = secs-num;
document.agree.agreeb.value = "请认真查看<服务条款和声明> (" + printnr +" 秒后继续)";
}
}
//-->
</SCRIPT>

8.实现连续滚动:
<body>
<div id=demo style=overflow:hidden;height:60px>
<div id=demo1>
111111111111111<br>
222222222222222<br>
333333333333333<br>
444444444444444<br>
555555555555555
</div>
<div id=demo2></div>
<script>
var t=demo.scrollTop
demo2.innerText=demo1.innerText
function qswhMarquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else
demo.scrollTop++
}
setInterval(qswhMarquee,30)
</script>
</body>

9.无提示自动关闭窗口:
脚本说明:
第一步:把如下代码加入<body>区域中
<OBJECT
id=closes type="application/x-oleobject"
classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"><param
name="Command" value="Close"></object>
第二步:把<body>中的内容改为:
<body onload="setTimeout('closes.Click()',20000)">

10.弹出确认删除:
<1>vbscript:
<script language="vbscript">
sub check()
dim a
a=MsgBox("确定要删除吗?",vbOKCancel)
if a=1 then
window.event.returnvalue=true
else
window.event.returnvalue=false
end if
end sub
</script>

<a href="http://www.blueidea.com/" onClick="check()">删除</a>

<2>JavaScript:
<script language="JavaScript1.2">
<!--
function confirmdel(id){
if (confirm("真的要删除吗?"))
window.location.href="/admin_deladmin.asp?id="+id
}
-->
</script>
<a href='javascript:confirmdel("<%=rs("id")%>")'>删除</a>

11.防止点击空链接回到页首端:
把代码“javascript:void(null)”代替原来的“#”标记.

12.window.open的使用语法:
window.open('URL','Name','Features')
name可为空
如:
<a href="javascript:window.open('http://www.bydragon.com','','width=400,height=400')">弹出窗口</a>

其中http://www.bydragon.com 是你要打开的网页地址。可以使用相对或者是绝对地址,而width=400,height=400 是定义弹出窗口的宽度和高度都是400,其他的几个参数:
toolbar(yes|no): 是否出现浏览器工具栏,在已经设置窗口大小的情况下,默认为no,即不出现!

下同:
location:地址栏
status:状态栏
menubar:菜单条
scrollbars:滚动条
resizable:表示是否出现窗口大小的调整手柄!

结合flash as里边的getURL就是
getURL("javascript:window.open('http://www.bydragon.com','','width=400,height=400')")

13.版权声明的写法正确的格式:
&copy;1995-2004 Macromedia, Inc. All rights reserved.
&copy;2004 Microsoft Corporation. All rights reserved.
Copyright &copy; 2004 Adobe Systems Incorporated. All rights reserved.
&copy;1995-2004 Eric A. and Kathryn S. Meyer. All Rights Reserved.

14.内容提交等待:
把如下代码加入<body>区域中
<script language=javascript>
<!--
function showSending() {
sending.style.visibility="visible";
}
-->
</script>

然后调整下面代码的参数使显示提示显示在你想要的位置:
<div id="sending" style="position:absolute; z-index:10; width: 400; visibility:hidden">
<table width=400 height=80 border=0 cellspacing=2 cellpadding=0 bgcolor="#8FA8E9">
<tr>
<td bgcolor=#eeeeee align=center>内容正在发送, 请稍候...</td>
</tr>
</table>
</div>

最后再提交按钮加入 onClick="showSending()">,如:
<input type='submit' name='ACTION' value='发送' onClick="showSending()">



15.实现 iframe 的自适应高度,参考如下代码:

<iframe id="newslist"
name="newslist" width="540" src="/iframenews.htm" marginwidth="1"
marginheight="1" border="0" frameborder="0" target="_self"
style="height:expression(eval(newslist.document.body.scrollHeight))"
>

浏览器不支持嵌入式框架,或被配置为不显示嵌入式框架。</iframe>

[此贴子已经被作者于2005-11-8 16:12:51编辑过]

121 回复
#52
mechanics2006-06-15 20:20
谢谢谢谢
#53
hss0857222006-06-17 00:57
好~!顶
#54
jones121212006-06-18 12:06
我支持
#55
wslzw2006-06-21 00:58
有用是有用可是俺不会用
#56
hongling2006-06-23 21:14
好东西!!哈哈
绝对支持!
#57
jay23242006-06-30 03:19

再顶

#58
zhoujianwei2006-07-12 13:23
我顶
#59
liziwin2006-07-16 10:58
总结的好东西为什么不收藏呢?谢谢!
#60
pzgjxy2006-07-19 17:46
#61
静夜思秋2006-07-31 10:26
好东西一定要顶
#62
helen20062006-08-03 15:08
谢谢,好东西,顶
#63
雷霆霹雳2006-08-13 15:02

真是好东西 先拿来用了
谢谢 啦

#64
sunangel2006-08-22 23:03
好好啊啊 .........
#65
qq449822102006-08-27 04:33
有值得学习~!
#66
文心边城2006-09-04 11:41

及时雨!!致谢!!!

#67
guixiaolan2006-09-04 15:42

都是一些小技巧,很好,顶了!

#68
相信2006-09-05 13:33
太有用了,解决了我好多问题
#69
孤漠沉风2006-09-13 14:54
呵呵
我最喜欢的是第15个
找了很长时间
谢谢拉
#70
冰山一角2006-09-15 10:19
不错。
#71
hsk882006-09-19 15:15
好东东
很有用!!
#72
yq19862006-09-21 10:12

真是好东西呀。支持支持~~~~

#73
wyhejp2006-09-23 17:44

本人虽不会用,但是感觉到很有用,呵呵!

#74
lexlin2006-09-25 16:09
不顶也谢

#75
ac19854822006-10-23 15:02

谢谢了 开始准备学下 就看到这样的好东西 LZ 谢谢了

#76
xlmm2006-10-24 17:04
我正在学制作网页,看到这样的好东西,很有用.
谢谢了
#77
上官觉仁2006-11-10 10:36
先记下来!!
#78
linhong002006-11-19 13:29
好东西!
用得到
谢了!!
#79
梦萦西域2006-11-21 09:35
都是比较实用的~!
谢楼主~
#80
lzf01122006-11-23 19:42

谢了。正需要啊。。。。

#81
qq3702780262006-11-27 01:17

不错支持谢谢楼主
辛苦了

#82
yujing2006-12-07 15:33

好东西
谢谢

#83
子瑜梦缘2007-01-01 14:46
好东西
拿了
#84
aluo94132007-01-20 09:28
好东西 /AddFavorite()
#85
Liming_6862007-01-27 14:37

哈哈,好东西就是要顶.

#86
喃瑟2007-02-07 11:30
顶一下
#87
qjq0012007-02-09 18:58
好,很实用!
#88
lovexp2007-02-27 10:16
very good ! thank you !
#89
清音2007-02-27 16:34
不是太懂
#90
mingzi62007-03-13 20:53
真的是很不错,学习了!
#91
星梦缘2007-03-15 23:33
谢谢拉   我拷了一 份
#92
oooaaa_m2007-03-16 13:43
收藏了 好东西谢谢了
#93
绿茵豪门2007-03-28 20:34
谢谢
#94
zhangp11032007-03-30 17:03
好东西,收藏起来
#95
gonganruyi2007-04-09 12:56
持支持支持支持支持支持支持支持支持支持支持支持█████████支持支持

支持支持支持支持支持支持支持支持支持███████████████支持支持

支持支持支持支持支持支持支持无██████████████████支持支持

支持支持支持支持支持无████████████████支持支持支持支持支持

支持支持支持支持███████无███支持█████支持支持支持支持支持无

支持无████████████支持支持支持████支持支持支持支持支持支持

无██████████████支持支持支持████支持支持支持支持支持支持

无████████████支持支持支持无███████████支持支持支持

无████████████支持支持支持██████████████支持支持

支持██████████支持支持无██████支持无███████支持支持

支持支持支持支持████支持支持无████支持支持支持█████支持支持无

支持支持支持支持████支持支持████支持██支持无█████支持支持无

支持支持支持支持████支持支持████支持████无█████支持支持无

支持支持支持支持████支持支持████支持████无█████支持支持无

支持支持支持支持████支持支持████支持███支持█████支持支持无

支持支持支持支持████支持支持████支持███支持█████支持支持无

支持支持支持支持████支持支持████无████支持█████支持支持无

支持支持支持支持████支持支持████无████支持█████支持支持无

支持支持支持支持████支持支持████无████支持█████支持支持无

支持支持支持支持████支持支持████无████支持█████支持支持无

支持支持支持支持████支持支持███支持████支持█████支持支持无

支持██支持无█████支持支持███支持███支持无█████支持支持无

支持██████████支持支持无██支持██支持支持█████支持支持无

支持无█████████支持支持支持支持███支持支持无████支持支持无

支持支持无███████支持支持支持支持███无████支持支持支持支持无

支持支持支持██████支持支持支持无████支持█████支持支持支持无

支持支持支持支持无███支持支持支持█████支持无███████支持支持

支持支持支持支持支持支持支持支持██████支持支持无██████支持支持

支持支持支持支持支持支持支持无██████支持支持支持███████支持无

支持支持支持支持支持支持支持█████支持支持支持支持无██████支持无

支持支持支持支持支持支持无█████支持支持支持支持支持支█████持支持

支持支持支持支持支持支持██████支持支持支持支持支持支█████持支持
#96
冰与火的抉择2007-04-23 09:49
好帖~~
#97
kidy20052007-04-23 14:10
确实有些还是满实用的
#98
jack1230002007-04-24 15:05
好东西,收藏了
#99
designlqx2007-04-29 15:21

支持一下

#100
d41612007-05-04 15:21

#101
songyuyu2007-05-16 15:03
收藏
123