教研室首页  »  如何创建闪烁按钮

如何创建闪烁按钮

 

在这一课中我们将介绍如何创建一个闪烁的按钮，以及如何将它添加到你的英文SEO网站页面的步骤。
 
注意：这个课程需要有添加HTML代码的基本知识。
 
让我们开始吧！
 
闪烁按钮可以让你的网站生动起来，为超链接添加漂亮的按钮。当用户的鼠标在按钮上划过时，这些按钮会改变颜色 – 这会使浏览者对此更印象深刻！
 
有许多方法可以完成这个工作，但我们的方法避免使用Java script（因为有些朋友不会使用JS）。
 
整个过程分成三个部分：
 
创建图像
 
把HTML添加到页面
 
在CSS文件中添加新样式
 
第1步 – 创建图像：
 
需要做的是建立一些单一的图片，包括正常状态的按钮图片，以及过渡状态的按钮图片。
 
最终的图像将是按钮两倍大小的高度。
 
例如，如果按钮的大小是100像素宽和20像素高，那么图像将是100像素宽和40像素高。
 
步骤2 – 添加到网页：
 
在代码中插入一个要跳转的链接，如下所示。
 
<a id="clickMe1" href="somepage.htm"><span>Click Me</span></a>
 
注意给链接加一个唯一的ID，在这个例子中是clickMe1。如果要加入一个以上的闪烁按钮。第二个按钮的id将是clickMe2等等，程序自动执行下一步。
 
第3步 – 添加CSS代码：
 
CSS样式可以将看起来很普通的超链接转换成一个闪烁的按钮。
 
#clickMe1
{
 display: block;
 width: 100px;
 height: 20px;
 background: url("clickme.gif") no-repeat 0 0;
}
 
#clickMe1:hover
{
 background-position: 0 -20px;
}
 
#clickMe1 span
{
 display: none;
}
 
改变“宽度”和“高度”，让它们和按钮的宽度和高度相同。记住！所做的图像是实际的按钮的2倍高，所以“height”的数值应该是图像高度的一倍。
 
最后，看看引用的背景位置，如下所示。
 
background-position: 0 -20px;
 
使用刚才用的“height”的数值替换-20，在它前面添加负号。因此，如果按钮总高度为60像素，而不是我们在例子中使用的那样，就将其更改为如下所显示的。
 
background-position: 0 -30px;
 
保存到你的CSS文件中。这就是闪烁按钮 – 大功告成！

本文版权所有 互联网营销教研室 转载请注明英文SEO！


 内容创作课程

        


 

Comments are closed.