zoukankan      html  css  js  c++  java
  • 给超链接A添加按钮样式

    在进行界面设计过程中,需要给超链接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;
        
    }

    最终得到的效果如下:

    参照一楼给的建议,我修改代码如下:

        .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;
            
        
    }

    谢谢@倾斜的水瓶座提醒。

    pS:博客园编辑好垃圾,这篇文章编写过程中,浏览器死了两次,晕啊 。。。。。不是一般的不给力。

  • 相关阅读:
    新的开始
    react的setState使用中遇到的问题
    h5的input的required使用中遇到的问题
    vue学习中v-if和v-show一起使用的问题
    异步 JavaScript 之 macrotask、microtask
    .eslintrc 文件
    Vue2学习结合bootstrapTable遇到的问题
    Vue2学习(3)
    ES6 箭头函数
    Vue2学习(2)
  • 原文地址:https://www.cnblogs.com/scy251147/p/2014443.html
Copyright © 2011-2022 走看看