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

HTML/XHTML教程
CSS 循序渐进(四)表里春秋
精通 CSS 滤镜(五)
让css使网页图片半透明
实现页面图片阴影特效
发现CSS控件的好处
用CSS缩写给你的网站加速
CSS在IE和Nascape的显示差别
利用CSS,不通过replace替换标引HTML标记
拒绝单调 让网页超链接拥有多姿多彩的下划线
对CSS类及id的规范化命名
利用css里expression来实现界面对象的批量控制
利用CSS控制打印
第一章 CSS的基本认识
第二章 CSS的应用方式
第三章 CSS的应用补充
第四章 颜色背景的CSS
第五章 文字性质的CSS
第六章 区块性质的CSS
HTML之其他标记
HTML之链接标记

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-03-17   浏览: 304 ::
收藏到网摘: 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>