论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css布局教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

{WEB标准}CSS标准系列用CSS制作“鼠标经过图像”

文章类别:div+css布局 | 发表日期:2008-9-26 11:52:57

  
  以前我们用表格来布局网页时,我们都很喜欢用DW(Dreamweav)中的“鼠标经过图像”,因为那的确吸引人!但是我们也同样发现这样的一个问题:当网速不太快的时候,鼠标经过后的图片还没有下载下来,看上去很不美观。并且还需要一大堆的JS代码,还需要预载经过图片。相对来说比较麻烦!非凡是对那些现在记事本来手工编写网页的朋友更是烦得很。

  事实上用CSS就可以解决这个问题,并且非常的简单,下载快,不会出现鼠标经过后的图片还没有下载下来这种情况。这个做法的原理很简单:就是用<a>标签的a:hover来触发鼠标事件,然后通过CSS来变化其背景的上下左右的位置。下面就主要分析一下用CSS来制作“鼠标经过图像”。

XHTML代码:
div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
<ul id=\"nav\">
<li id=\"nav1\"><a href=\"/\">nav1</a></li>
<li id=\"nav2\"><a href=\"/\">nav2</a></li>
<li id=\"nav3\"><a href=\"/\">nav3</a></li>
<li id=\"nav4\"><a href=\"/\">nav4</a></li>
<li id=\"nav5\"><a href=\"/\">nav5</a></li>
</ul>

  这里用一个菜单来讲解,在实际运用中我们可能会有其它方面的运用。这里我们看到并没有图片,那是因为我们的图片都是用CSS调用的背景,而每个LI都有一个ID,那是因为这里的菜单图片是不同的!每个LI都有自己的菜单内容。
  好了,现在需要把这个列表处理一下横向排放:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
#nav li {margin: 0; padding: 0; list-style: none; display: inline;}

  我们都知道<a>标签不是默认的块级元素,假如不是块级元素鼠标所感应的热区就不是我们所设定的长宽,而是其元素本身的大小。但CSS可以把其声明为块级元素。

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
#nav a { float:left; padding: 34px 0 0 0; overflow: hidden; height: 50px;}

  这里有一个很有意思的事!那就是,在这一句中有没有“display:block;”都是一样的。这里的“padding:34px 0 0 0;”是我们背景图的一半高度(注:背景图是把两张图片上下合在一起的图片)但是并不是用来控制背景图的,而是把<a>标签中的文字隐藏。由于触发动作并且移动位置是一样的,所以可以集中描述移动背影的位置。

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
#nav a:hover { background-position: 0 -34px;}

  这句的意思是:在#nav下的所有链接在鼠标经过时其背景向上移动34个像素。最后就是给菜单中的每一个链接加上背景图片。

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
#nav1 a {width:59px;background:url(btn_nav1.jpg) top left no-repeat;}
#nav2 a {width:69px;background:url(btn_nav2.jpg) top left no-repeat;}
……

  好了,完成,其中要注重的是“#nav a:hover { background-position: 0 -34px;}” 需要根据自己的实际情况来设定值。
  
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058