网站制作一 : 从简单做起,通过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的绝对定位等等都可以的,今后会继续更新博客的!
- 网站制作一 : 从简单做起,通过a属性实现导航图片切换
- Spring MVC 入门 ,从简单登陆做起
- 编程学习从基础入手,从简单做起
- js通过图片切换实现开关按钮(一)
- 大型网站系统架构实践(一)从简单到复杂
- 根据鼠标放上切换内容制作的图片导航
- 中英文切换导航制作
- 抓取内核信息(一)-从简单入手
- 搭建VueJS2.9+ElementUI单页面网站,编写导航页,导航栏跳转、切换
- Axure:从简单搜索到联想搜索的部件制作
- tab切换导航内容制作
- Fragment生命周期及实现点击导航图片切换fragment,Demo
- 通过导航器切换界面
- javascript制作图片切换
- 一、从简单MXML组件中处理事件
- JMS入门(一)从简单示例开始
- 从简单实例开始,学会写Makefile(一)
- Unity3D 学习从简单开始-GUI探索(一)
- 寒假SAP ABAP 培训笔记 part 7{转载}
- 个人电脑组策略应用全攻略
- date 的基本使用 suse
- 执行SQL文,生成EXCEL
- 如何让一个IFRAME调用页面的背景为透明?
- 网站制作一 : 从简单做起,通过a属性实现导航图片切换
- 【转】Python实现的HMM类
- ASP.NET防止SQL注入函数
- 一个ActiveSync无法连接的解决方法
- 利用VisualSVN Server 搭建SVN服务器
- VB 利用DDE进程间通信,5行代码搞定
- 对CSDN一点牢骚建议
- URL编解码
- 学习ASP.NET网址