Question

如何将按键效果放在锚标签上。

这是我的css＆amp; HTML：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>Untitled Page</title>
        <style>    .navigation{
       height:28px;
    line-height:28px;
    font-size:11px;
    font-weight:bold;
    text-transform:uppercase;
    float:left;
    padding-top:20px;
    }
    .navigation ul li{
    margin:0px;
    list-style-type:none;
    float:left;
    padding-right:5px;
    }
    .navigation ul li a{
    list-style-type:none;
    display:block;
    float:left;
    text-decoration:none;
    padding-left:12px;
    background:url("../images/nav-bg.png") 0 -56px no-repeat;
    color:#999;
    }
    .navigation ul li a span{
        list-style-type:none;
        display:block;
        float:left;
        text-decoration:none;
        cursor:pointer;
        padding-right:12px;
        background:url("../images/nav-bg.png") right -84px no-repeat;
        }
    .navigation a:hover{
        background:url("../images/nav-bg.png") 0 0  no-repeat;
    }
    .navigation a:hover span{
        background:url("../images/nav-bg.png") right -28px no-repeat;
    }


    .navigation a.activetab{
        background:url("../images/nav-bg.png") left -112px no-repeat !important;
    }
    .navigation a.activetab span{
        background:url("../images/nav-bg.png") right -140px no-repeat !important;
        color:#fff;
    }</style>
    </head>
    <body>
    <div class="navigation">
                    <ul>
                        <li><a href="javascript:void(0):" class="activetab"><span>Dashboard</span></a></li>
                        <li><a href="javascript:void(0):"><span>Courses</span></a></li>
                        <li><a href="javascript:void(0):"><span>Reports</span></a></li>
                        <li><a href="javascript:void(0):"><span>Message Board</span></a></li>
                    </ul>
                </div>
    </body>
    </html>

Answer 1

首先，不要使用图像来获得此效果，因为它们会增加页面权重，需要时间下载，特别是非常不灵活。

使用CSS3技术。例如，请查看http://ubuwaits.github.com/css3-buttons/上的来源或阅读http://www.uxrevisions.com/freebies/css3-buttons-examples-with-source-code/181/上的教程或可用的CSS3按钮上的任何其他教程elsewhere

然后抓住CSS3 Pie并使其在IE6及更高版本中运行。

Answer 2

也许您可以尝试使用a:active伪类而不是a.activetab。

我们如何通过使用css为7来实现对锚标签的按压效果

2 个答案: