网站制作一 : 从简单做起,通过a属性实现导航图片切换

来源:互联网 发布:js最小公倍数 编辑:程序博客网 时间:2024/05/22 08:36

DIV+CSS:

前人之鉴戒:

 

CSS中的超链接a有四个伪属性,解释为:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态。

   a:link{color:#FF0000}     /* unvisited link */
a:visited{color:#00FF00} /* visited link */
a:hover{color:#FF00FF} /* mouse over link */
a:active{color:#0000FF} /* selected link */

    提示:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。

    提示:在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。

    提示:伪类名称对大小写不敏感。

这些在w3c上都有,简单的很,只有你反复的用过之后就会发现简单的很!

 

hover属性的利用:

css代码如下:

a{

   width:150px;
    height:30px;
    display:block;
    background:url(images/a.gif) no-repeat;

}

a:hover{

    background:url(images/a_hover.gif) no-repeat;

}

前台源码:

<a href="#">123</a>

这样就可以实现背景图片的切换,没有必要利用js来实现,今后对于复杂的类似js动态效果也完全可以利用css来实现,例如z-index,position的绝对定位等等都可以的,今后会继续更新博客的!