网站下载的软件dw怎么加鼠标移动效果
dw怎么制作网页DW是第一套针对专业网页设计师特别发展的视觉化网页开发工具,利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。下面是店铺带来的关于dw怎么加鼠标移动效果的内容,欢迎阅读!
translate3d mdndw怎么加鼠标移动效果?
看了dw
用CSS制作鼠标经过图像
XHTML代码:
nav1
nav2
对函数的初始化是什么意思nav3
nav4
nav5
这里用一个菜单来讲解,在实际运用中可能会有其它方面的运用。这里看到并没有图片,那是因为图片都是用CSS调用的背景,而每个LI都有一个ID,那是因为这里的菜单图片是不同的!每个LI都有自己的菜单内容。
好了,现在需要把这个列表处理一下横向排放:
#nav li {margin: 0; padding: 0; list-style: none; display: inline;}
标签不是默认的块级元素,如果不是块级元素鼠标所感应的热区就不是我们所设定的长宽,而是其元素本身的大小。但CSS可以把其声明为块级元素。
#nav a { float:left; padding: 34px 0 0 0; overflow: hidden; height: 50px;}
这里有一个很有意思的事!那就是,在这一句中有没有“display:block;”都是一样的。这里的“padding:34px 0 0 0;”是背景图的一半高度(注:背景图是把两张图片上下合在一起的图
malloc函数的用法举例说明片)但是并不是用来控制背景图的,而是把标签中的文字隐藏。由于触发动作并且移动位置是一样的,所以可以集中描述移动背影的位置。
#nav a:hover { background-position: 0 -34px;}
java语言程序设计郎波这句的意思是:在#nav下的所有链接在鼠标经过时其背景向上移动34个像素。最后就是给菜单中的每一个链接加上背景图片。
#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;}
……
好了,完成,其中要注意的是:“padding:34px 0 0 0;”“#nav a:hover { background-position: 0 -34px;}” 需要根据自己的实际情况来设定值。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论