zoukankan      html  css  js  c++  java
  • <a>按钮样式

    网页上有很多功能是通过链接方式传递参数,这种功能链接普通样式就是一个超链接 退出,如果将超链接的样式变成按钮样式,给用户的感觉会更好。

    一种方法是给a标签添加display:block的样式,并添加hover样式。

     

    <style type="text/css">
    div.container
    {
    width: 600px;
    /*height: 200px;*/
    border-bottom: 2px solid green;
    padding: 10px;
    }
    .container a,.container a:link,.container a:visited
    {
    display: block;
    float: left;
    margin-right: 5px;
    background: #ED2B34;
    padding: 5px;
    text-decoration: none;
    font-size: 12px;
    font-family: '宋体';
    color:#fff;
    }
    .container a:hover
    {
    display: block;
    float: left;
    margin-right: 5px;
    background: #C30A13;
    padding: 5px;
    text-decoration: none;
    font-size: 12px;
    font-family: '宋体';
    color:#ccc;
    }
    .clear
    {
    clear: both
    }
    </style>
    <div class='container'>
    <p>微信公众平台开发(2)扫描二维码添加公众账号</p>
    <a href="http://www.cnblogs.com/birdskyws/p/3912719.html">跳转链接1</a><a href="http://www.cnblogs.com/birdskyws/p/3910493.html">跳转链接2</a>
    <div class="clear"></div>
    </div>

    普通样式:

    hover样式:

  • 相关阅读:
    转:深入 AngularUI Router
    angularJS $scope的$apply方法实现model刷新
    CSS 如何让 height:100%; 起作用
    【AngularJs】---$sce 输出Html
    angular 组件之间传值
    kendo Grid 列添加自定义模板
    关于“内控点”
    关于总结
    咏春
    一只老鼠夹
  • 原文地址:https://www.cnblogs.com/birdskyws/p/3914472.html
Copyright © 2011-2022 走看看