在进行界面设计过程中,需要给超链接A添加按钮样式,原本以为是利用height和width分别控制高度和宽度,然后利用background来设置背景图片就可以了。没想到在实际测试过程中,根本不行。于是就只好利用padding方法进行微调,最终得到理想效果,css代码如下:
.Pager
{
margin : 10px ;
text-align : right ;
font-weight : bold ;
}
.Pager a
{
color : Red ;
padding-top : 5px ;
padding-bottom : 9px ;
padding-left : 20px ;
padding-right : 20px ;
background : url(images/loginButton.gif) no-repeat ;
}
.Pager a:hover
{
color : Blue ;
text-decoration : none ;
}
.Pager a:visited
{
text-decoration : none ;
font-size : 12px ;
color : Red ;
}
{
margin : 10px ;
text-align : right ;
font-weight : bold ;
}
.Pager a
{
color : Red ;
padding-top : 5px ;
padding-bottom : 9px ;
padding-left : 20px ;
padding-right : 20px ;
background : url(images/loginButton.gif) no-repeat ;
}
.Pager a:hover
{
color : Blue ;
text-decoration : none ;
}
.Pager a:visited
{
text-decoration : none ;
font-size : 12px ;
color : Red ;
}
最终得到的效果如下:
参照一楼给的建议,我修改代码如下:
.Pager a
{
color : Red ;
<%-- padding-top : 5px ;
padding-bottom : 9px ;
padding-left : 20px ;
padding-right : 20px ; --%>
width : 77px ;
height : 27px ;
display : block ;
text-align : center ;
line-height : 27px ;
float : left ;
background : url(images/loginButton.gif) no-repeat ;
}
{
color : Red ;
<%-- padding-top : 5px ;
padding-bottom : 9px ;
padding-left : 20px ;
padding-right : 20px ; --%>
width : 77px ;
height : 27px ;
display : block ;
text-align : center ;
line-height : 27px ;
float : left ;
background : url(images/loginButton.gif) no-repeat ;
}
谢谢@倾斜的水瓶座提醒。
pS:博客园编辑好垃圾,这篇文章编写过程中,浏览器死了两次,晕啊 。。。。。不是一般的不给力。