a和span组合定义按钮样式

[html]  view plain copy print ?

1. <style type="text/css">  
2. a:link {  
3.     color: #3B5998;  
4.     text-decoration: none;  
5. }  
6.   
7. .ui-base-button {  
8.     background-image: url("a-bg.png");  
9.     background-position: right top;  
10.     background-repeat: no-repeat;  
11.     font-size: 12px;  
12.     color: #414241;  
13.     font-family: "宋体","Arial","Helvetica","Verdana","sans-serif";  
14.     padding-right:9px;  
15.     padding-top:5px;  
16.     padding-bottom:6px;  
17. }  
18. .ui-base-button span {  
19.     background-image: url("a.png");  
20.     background-position: left top;  
21.     background-repeat: no-repeat;  
22.     padding-left:9px;  
23.     padding-top:5px;  
24.     padding-bottom:6px;  
25. }  
26. </style>  
27.   
28. <a class="ui-base-button" href="#">  
29. <span>搜索</span>  
30. </a>  

其中a.png是按钮的背景图片，是一张带边框的长矩形

这样显示出来的按钮为

其中a标签中嵌套span标签

<a><span>**</span></a>为主要形式，通过padding来控制文字的位置并且使得背景图片衔接的合理。