网页设计中的模拟按钮样式

  • 2019-08-19 14:58:20
  • 阅读次数:
  • 作者:盈岚科技小编
  • 来源:http://www.lyjtt.cn

网页制作时,a是行内元素,只有在单击链接的内容时才会激活链接。但是,有时候希望它显示为按钮样式,因此可以将a的display属性设置为block,然后修改width、height和其他属性来创建需要的样式和单击区域。

【示例1】在页面中为所有链接定义按钮样式效果,由于链接现在显示为块级元素,单击块中的任何地方都会激活链接。

a{  display: block;   width: 6em;   padding:0.2em;   line-height: 1.4:   background-color: #g488E9;   border: lpx solid black;   color: #000;   text-decoration: none;   text-align: center;}

在上面代码中,宽度是以em为单位显式设置的。由于块级元素会扩展,填满可用的宽度,所以如果父元素的宽度大于链接所需的宽度,那么需要将希望的宽度应用于链接。如果希望在页面的主内容区域中使用这种样式的链接,就很可能出现这种情况。但是,如果这种样式的链接出现在宽度比较窄的地方(如边栏)中,那么可能只需设置父元素的宽度,而不需要为链接的宽度担心。为什么使用line-height属性定义按钮的高度,而不是使用height属性?这实际上是一个小技巧,能够使按钮中的文本垂直居中。如果设置height,就必须使用填充将文本压低,模拟出垂直居中的效果。但是,文本在行框中总是垂直居中的,所以如果使用line-height属性,文本就会出现在框的中间。

上述缺点:如果在网页设计中,按钮中的文本占据两行,按钮的高度就是需要的高度的两倍。避免这个问题的唯一方法是调整按钮和文本的尺寸,让文本不换行,至少在文本字号超过合理值之前不会换行。

使用:hover伪类就可以创建翻转效果,不需要JavaScript。如在鼠标停留时设置链接的背景和文本颜色,从而实现非常简单的动态效果。

a:hover {   background-color:#369;   color:#fff;}

【示例2】修改背景颜色对于简单的按钮很合适,但是对于比较复杂的按钮,最好使用背景图像。在下面示例中,创建了两个按钮图像,一个用于正常状态,一个用于鼠标停留状态,也可以添加激活状态,即使用:active动态伪类触发。

a:link, a:visited {    display:block;    

width:200px;    

height:40px;    

line-height:40px;    color:#000;    

text-decoration:none;    

background:#9488E9 url(images/button.gif) no-repeat left top;    

text-indent:50px;}a:hover{

background:#369 url(images/butten_over.gif) no-repeat left top;    color:#fff;}

设置按钮样式上面代码与前面示例相似。主要的差异是使用背景图像而不是背景颜色,同时使用固定宽度和高度的按钮,所以在CSS中设置显式的像素尺寸。但是,也可以创建特大的按钮图像,或者结合使用背景颜色和图像创建流体的或弹性的按钮。

【示例3】多图像方法的主要缺点是在浏览器第一次装载鼠标停留图像时有短暂的延迟。这会造成闪烁效果,让按钮感觉起来有点儿反应迟钝。可以将鼠标停留图像作为背景应用于父元素,从而预先装载它们。但是,有另一种方法。并不切换多个背景图像,而是使用一个图像并切换它的背景位置。使用单个图像的好处是减少了服务器请求的数量,而且可以将所有按钮状态放在一个地方。

首先,创建组合的按钮图像

网页设计背景图像在这个示例中,使用正常状态和鼠标停留状态,也可以使用激活状态和已访问状态。代码几乎与前面的示例相同。设计在正常状态下,将翻转图像对准左边,而在鼠标停留状态下对准右边。

a:link,a:visited{    display:block;    

width:200px;    

height:40px;    

line-height:40px;    

color:#000;    text-decoration:none;    

background:#9488E9 url(images/pixy-rollover.gif) no-repeat left top;    text-indent:50px;}a:hover{    background-color:#369;    background-position:right top;    color:#fff;}

由于IE仍然会向服务器请求新的图像,这会产生轻微的闪烁,为了避免闪烁,需要将翻转状态应用于链接的父元素,如包含它的段落。

p {    background:#g488Eg url(images/pixy-rollover.gif) ;    

no-repeat right top;}

在图像重新装载时,它仍然会消失一段时间。

但是,由于提前加载,现在会露出相同的图像,消除了闪烁。


当前文章标题:网页设计中的模拟按钮样式

当前URL:http://www.lyjtt.cn/news/wzzz/3077.html

上一篇:网页设计中如何定义下划线样式

下一篇:如何在网页设计时定义已访问样式

网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)