html5引导页

1、准备好引导页的图片

2、写好网页、用绝对定位写好放入图片

3、 写一个<div id="mask"></div>，背景颜色为黑色，半透明（蒙版）

    再写一个div，做引导区,在其中放入，引导页的div,如：

<div id="searchTip">

<div class="stepA"><a>下一步</a><span>关闭</sapn></div>

<div class="stepB"><a>下一步</a><span>关闭</sapn></div>

<div class="stepC"><a>下一步</a><span>关闭</sapn></div>

</div>

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写逻辑操作，点击下一步，关闭当前的div,打开下一个div

 

js：window:οnlοad=function(){

    var oMask=document.getElementsById('mask');

    var oSearch=document.getElementsById("searchTip");//抓取searchTip

   var oStep=oSearch.getElementsByTagName('div');

    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

 

}

 

第一次写博客，为了记录一下js的方法