当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > HTML网页实例代码:简洁漂亮的跳转等待页面

HTML/XHTML教程
CSS基础:设计网页常用规范详解
CSS教程:十步学会用css建站
CSS基础:24条网页布局开发小技巧
CSS教程:在网页布局中简单实现垂直居中的办法
css基础教程:颜色和文本属性的控制
专家总结:网页设计师必须遵守的十条守则
html技巧:超级链接a的提示和打开方式
css教程:学习背景图像属性background
例说网页Semantics:Html/Xhtml是否真正符合标准
IE7与web标准设计系列教程:前言
IE7与web标准设计系列教程:更丰富的CSS选择符
IE7与web标准设计系列教程:修正引起页面布局混乱的祸首
web标准教程:IE6和IE7的共存
web标准:IE多版本共存的解决方案:IETester
CSS基础教程:认识CSS选择符
web标准:比较IE6与IE7,放纵的孩子与严厉的父亲
学好标准CSS的模型是否必须放弃IE?
CSS教程:如何处理有冲突的CSS规则
教你用html和css写出漂亮正规的Blog
CSS基础:如何避免table强迫症

HTML/XHTML教程 中的 HTML网页实例代码:简洁漂亮的跳转等待页面


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-03-17   浏览: 277 ::
收藏到网摘: n/a

Web开发过程中由于种种原因可能经常会遇到需要跳转的页面,今天给大家推荐一个简洁漂亮的跳转等待页面,帮站长提高网站的用户体验。

只要将以下代码中红色部分修改为需要跳转的URL即可。

<HTML><HEAD><TITLE软晨学习网 www.ruanchen.com:</TITLE>
<link href="/favicon.ico" rel="shortcut icon">
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<META NAME="author" CONTENT="软晨学习网">
<META NAME="keywords" CONTENT="软晨学习网">
<STYLE type=text/css>TD {
FONT-FAMILY: 宋体; FONT-SIZE: 12px; LETTER-SPACING: 2px; LINE-HEIGHT: 150%; font-color: #000000
}
FORM {
FONT-FAMILY: 宋体; FONT-SIZE: 12px; LETTER-SPACING: 2px; LINE-HEIGHT: 150%; font-color: #000000
}
SELECT {
FONT-FAMILY: 宋体; FONT-SIZE: 12px; LETTER-SPACING: 2px; LINE-HEIGHT: 150%; font-color: #000000
}
INPUT {
FONT-FAMILY: 宋体; FONT-SIZE: 12px; LETTER-SPACING: 2px; LINE-HEIGHT: 150%; font-color: #000000
}
TEXTAREA {
FONT-FAMILY: 宋体; FONT-SIZE: 12px; LETTER-SPACING: 2px; LINE-HEIGHT: 150%; font-color: #000000
}
BODY {
FONT-FAMILY: 宋体; FONT-SIZE: 12px; LETTER-SPACING: 2px; LINE-HEIGHT: 150%; font-color: #000000
}
A:link {
COLOR: #666666; FONT-SIZE: 10.5pt; TEXT-DECORATION: none
}
A:visited {
COLOR: #666666; FONT-SIZE: 10.5pt; TEXT-DECORATION: none
}
A:hover {
COLOR: #666666; FONT-SIZE: 10.5pt; TEXT-DECORATION: none
}
A:active {
COLOR: #666666; FONT-SIZE: 10.5pt; TEXT-DECORATION: none
}
</STYLE>
<SCRIPT language=JavaScript>
var url = 'http://www.ruanchen.com/';
</SCRIPT>
<META content="Microsoft FrontPage 4.0" name=GENERATOR>
<STYLE>.proccess {
BACKGROUND: #ffffff; BORDER-BOTTOM: 1px solid; BORDER-LEFT: 1px solid; BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; HEIGHT: 8px; MARGIN: 3px; WIDTH: 8px
}
</STYLE>
</HEAD>
<BODY onload="location.href = url;"
style="OVERFLOW: hidden; OVERFLOW-Y: hidden">
<DIV align=center>
<TABLE align=center height="70%" valign="middle">
<TBODY>
<TR>
<TD align=middle><p></p>

<!-- Displaytext-->
:: www.chinaz.com :: is now loading...
<P></P>
<FONT class=fontbig> <img src="/upload/tech/20100317/20100317152814_5807a685d1a9ab3b599035bc566ce2b9.gif" />软晨学习网 www.ruanchen.com 载入ing.....
<!--End Displaytext-->
<P></P>
<P></P>
<P></P>
<P></P>
<DIV align=center>
<FORM method=post name=proccess>
<SCRIPT language=javascript>
for(i=0;i<30;i++)document.write("<input class=proccess>")
</SCRIPT>
</FORM>
</DIV>
</font></TD>
</TR></TBODY></TABLE>
<DIV align=center>
<SCRIPT language=JavaScript><!--
var p=0,j=0;
var c=new Array("lightskyblue","white")
setInterval('proccess();',100)
function proccess(){
document.forms.proccess.elements[p].style.background=c[j];
p+=1;
if(p==30){p=0;j=1-j;}}
--></SCRIPT>
</DIV></DIV>
<DIV align=center>
<SCRIPT>
<!--
if (document.layers)
document.write('<Layer src="' + url + ' " VISIBILITY="hide"> </Layer>');
else if (document.all || document.getElementById)
document.write('<iframe src="' + url + '" style="visibility: hidden;"></iframe>');
else location.href = url;
//-->
</SCRIPT>
</DIV>
</BODY>
</HTML>