网站引导页HTML源码 绿色免费版
唯美倒计时网页模板倒计时html引导页是一个超唯美的倒计时HTML源码,喜欢的去自行修改丢到空间即可,网页中会出现一个动态的计时图案,同时也会有各种自定义界面让你选择和设计。
【框架优点】
用户体验提升。
页面跳转的时候人眼需要对整个页面作重新识别, 刷新部分页面的时候, 只需要重新识别其中一块区域。自从我在自己的网站 GuruDigger 上面采用了pjax技术后, 不由觉得访问其他只有页面跳转的网站难受了许多。 同时, 由于刷新部分页面的时候提供了一个loading的提示, 以及在刷新的时候旧页面还是显示在浏览器中, 用户能够容忍更长的页面加载时间。
极大地减少带宽消耗和服务器消耗。
由于只是刷新部分页面, 大部分的请求(css/js)都不会重新获取, 网站带有用户登录信息的外框部分都不需要重新生成了。 虽然我没有具体统计这部分的消耗, 我估计至少有40%以上的请求, 30%以上的服务器消耗被节省了。
【使用介绍】
1、准备好引导页的图片
2、写好网页、用绝对定位写好放入图片
3、 写一个<p id="mask"></p>,背景颜色为黑色,半透明(蒙版)
再写一个p,做引导区,在其中放入,引导页的p,如:
<p id="searchTip">
<p class="stepA"><a>下一步</a><span>关闭</sapn></p>
<p class="stepB"><a>下一步</a><span>关闭</sapn></p>
<p class="stepC"><a>下一步</a><span>关闭</sapn></p>
</p>
4、 用html:{height:100%},body:{height:100%};.stepA:{height:100%},撑开网页
用#mask{position:absolu;,left:50%;margin-left:-searchTip宽度的一半},可以使其mask居中
用text-indent:-999px;over:hidden;可以让文字消失
·用cursor:pointer;可以让鼠标的指针变为手型
5、用js或者jquery写逻辑操作,点击下一步,关闭当前的p,打开下一个p
js:window:onload=function(){
var oMask=document.getElementsById('mask');
var oSearch=document.getElementsById("searchTip");//抓取searchTip
var oStep=oSearch.getElementsByTagName('p');
var oA=oSearch.getElementsByTagName('a');//获取<a>标签
var oS=oSearch.getElementsByTagName('span');//获取span标签
oMask.style.display=oSearch.style.display=osSep[0].style.display='block';//显示
//a[i].parentNode.style.display ?的意思为获取a[i]的父类标签的样式,改变display
}