在进行界面设计过程中,需要给超链接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:博客园编辑好垃圾,这篇文章编写过程中,浏览器死了两次,晕啊 。。。。。不是一般的不给力。
分类:
Javascript 杂谈记录
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!