新手导航

今天学习了新手导航如何制作。

效果演示效果演示

源码源码

所谓的导航其实是在一个网页上，一张张通过定位的图片，每一张图片是一个步骤，点击下一步，从而完成导航功能。截图大致如下：

通过这个实例学到的有：

1.怎么隐藏a或者span中的字：text-indent: -999px;overflow: hidden; text-indent是文本缩进，将其缩进到一定程度，然后溢出隐藏即可。

2.关于一种调试方式：定位a标签与图片中的下一步对齐，从而能够触发a链接。可以直接在打开firebug，在firebug中直接调，最后对齐后，用其中的数字。

3.opacity: 0.5; filter:alpha(opacity:0.5);注意浏览器对opacity的兼容情况。

4.jquery比js原生方便的多。但是cookie的写入和写出都要用js原声，不能用jquery代替。

5.如何写入cookie.,此例中，当第一次进入导航区，会显示灰色的蒙版，而以后进入都不会有，这正是cookie的作用。

具体如下：

<span style="white-space:pre">	</span>var oDate = new Date();
	oDate.setDate(oDate.getDate()+30);
	document.cookie = "name=Christine;expires=" +oDate;

设置cookie时间为后30天，然后写入name值和expires时间值。

var res = document.cookie.substring(5);然后这里通过截取cookie中的值，从而获取name值。判断是否其值等于设定的值。

6.以后要更加熟悉background: url(../images/body.png) no-repeat center top;这种写法，方便简洁。