How we can put press effect on anchor tag by use of css for ie 7_问答_开发者

How we can put press effect on anchor tag by use of css for ie 7

开发者 https://www.devze.com 2023-03-19 00:48 出处：网络

How I can put press effect on anchor tag. This is my css & html: <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"&g

相关专题：css

How I can put press effect on anchor tag.

This is my css & 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{
 开发者_如何学Go       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>

First of all, don't use images to get this effect since they add to the page weight, need time to be downloaded and in particular are very inflexible.

Use CSS3 techniques instead. For example, check the source at http://ubuwaits.github.com/css3-buttons/ or read the tutorial at http://www.uxrevisions.com/freebies/css3-buttons-examples-with-source-code/181/ or any other tutorial on the CSS3 buttons that are available elsewhere

Then grab CSS3 Pie and make it work in IE6 and up.

Maybe you could try using the a:active pseudo-class instead of a.activetab.