快速了解我们

    关怀客户——我们争做南京让客户放心的网站服务商。

    成就客户——我们致力于客户的满意和成功。

    创业创新——我们追求对客户和公司都重要的创新,同时快速而高效地推动其实现。

  • 营业时间及快速联系
  • 工作时间:8:30-17:00
  • 电话:025-85289060-816
  • 传真:025-85289060-815
  • 邮箱:service#003000.com

CSS代码反转的方法
发布人:webmaster | 来自:本站 | 发布时间:2012-04-17 19:47:38 | 点击次数:4306

网站的话这个效果实现其实非常简单,第一步:准备两个图片,大小完全相同即可,这里是128X34像素。

 

 

左边这个是通常状态时的图片,叫background.gif,右边这个市鼠标经过时的图片,叫background-hover.gif。

第二步,写HTML部分的代码:

1
<a href="#">Button Text</a>

就是一个非常普通的超链接文本,如果希望完全使用图片而不是用任何文字,也可以。

第三步:CSS部分的代码是这样的:

12345678910111213141516171819
a:link, a:visited{	display:block;	width:128px;	height:34px;	font-size:14px; 	font-family:Arial;	line-height:34px;	text-align:center;	color:black;	text-decoration:none; 	background:url('background.gif') no-repeat;        } a:hover, a:active{	background:url('background-hover.gif') no-repeat;	color:white;        }

好了,这个效果就完成了,是不是非常简单。下面简单解释一下CSS代码的含义。

第1~14行代码是定义鼠标没有经过超链接时的CSS样式:

首先要把a元素变为块级元素,然后设定它的高度和宽度与图片相同。

然后是文字放到图片的中心位置。

最后设定背景图像的地址。

接下来的第16~19行代码定义鼠标经过时所需要变化的CSS样式。

把文字的颜色由黑色变为白色,并把图片换成另一个图片即可了。

说明与讨论:

1:如果对上面的解释还不清楚,比如什么是“块级元素”?如何设置背景图像?这些基本CSS设置方法还不清楚,这些内容很难用一两句话说清楚,请南京网站制作公司初级制作者仔细看本站的视频教程或《精通CSS+DIV网页样式与布局》这本书,真正把基础掌握扎实永远比模仿着做出几个效果更重要。

2:网站制作者在实验这个效果的时候,可能会发现这个效果目前有一个缺陷,鼠标移到图片上以后,很可能紫色的图片不会立即出现,而是几秒钟以后才出现,这是因为这个图片当时还没有下载到本地计算机上,因此这样对于访问者的感受就不太好了,解决方法是把上面两个图像和在一个图片中,通过使用背景图像的定位属性,来实现普通状态和hover状态显示图片上的不同区域,这样就不会有这样的停顿了。

3:这个例子还可以进一步改进,目前的做法中,按钮的宽度是固定的,如果希望按钮的宽度能够随着按钮上的文字的长度自动是适应,就要使“滑动门”技术了,可以参考《CSS滑动门技术的简单应用》这篇文章,先搞懂“滑动门”的原理,就可以应用到本例中了。