LinkButton控件最终解释为a标签。我们可以通过各种方法来对其添加样式,主要的方法是为LinkButton控件设置一个背景图片(background-image)。但这种方法有一个缺点,就是同样的样式,如果按钮的字数不同,就需要很多张背景图片。例如:
上述情况就需要四张不同的背景图片。但在实际的应用中, 会需要相当多的背景图片,特别是做OA,CRM等系统应用的时候,需要的背景图片就更多了!于是,为了减轻工作量,提高工作效率,我们可以采用这种方式来实现:在LinkButton控件外再套上一个span标签,并给这个span标签添加一个css类,用以绑定样式!
<span><asp:LinkButtonID="LnkBtnConfirm" runat="server"Text="确定"></asp:LinkButton></span>
在浏览器中得到的html就是:<span><a>确定</a></span>(已经去掉了与样式无关的代码)。然后在相应的css文件中写如一下代码:
.wrapBtn {
display: -moz-inline-box;
display: inline-block;
background: transparent url(1.gif) 0 0 no-repeat; //1.gif为背景图片的路径
height: 42px; //背景图片的高度
padding: 0 0 0 20px;
}
.wrapBtn a {
display: -moz-inline-box;
display: inline-block;
height: 42px;
background: transparent url(1.gif) right 0 no-repeat;
padding: 12px 20px 0 0;
text-decoration: none;
color: #FFFFFF;
font-weight: bolder;
}
.wrapBtn a:hover {
text-decoration: underline;
color: #FF9900;
}
其中,display: -moz-inline-box; 是兼容firefox的css hack,它的位置不能与display:inline-block;颠倒!你也可以采用ie条件注释(ConditionalComments)的方法,将这段代码分离开,以增强代码的可维护性和可读性。1.gif为背景图片,可以把它做得很宽,以适应以后的需求变化。这种方法只需要一张背景图片就可以满足同一样式所有按钮的要求!
这样做还有一个好处就是当你要对系统进行换肤的时候,可以极大的较少工作量
这种方法也有不足的地方:首先就是需要多添加一个span标签,对于程序员来说,是额外的负担,毕竟在VS2005里面,没有现成的span标签控件;虽然可以添加一个label控件,但还是需要切换到代码试图中进行调整,不太方便。本人建议直接在代码试图中添加span标签。其次就是按钮的左侧会有一些盲区(鼠标移动到这些部分,按钮没有被选中),这是因为span标签设置了padding:00 0 20px;的原因。
本文来自CSDN博客,出处:http://blog.csdn.net/moscodekidy/archive/2008/02/16/2099961.aspx