私たちはcssを使ってアンカータグにプレス効果をかけることができますか？

アンカータグにプレス効果をどのように置くことができますか？私たちはcssを使ってアンカータグにプレス効果をかけることができますか？

<!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>

出典

2011-07-08 sumit kumar ray

「プレス効果」とはどういう意味ですか？ iOS端末などのテキストエンボス？ – spliter

firefoxのこのページをご覧ください：http：//www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html –

まず、画像がページの重さを増やし、ダウンロードに時間がかかり、特に非常に柔軟性がないため、この効果を得るために画像を使用しないでください。

代わりにCSS3のテクニックを使用してください。例えば、http://ubuwaits.github.com/css3-buttons/でソースをチェックしたり、http://www.uxrevisions.com/freebies/css3-buttons-examples-with-source-code/181/でチュートリアルやCSS3 Pieをつかむと、それはIE6とアップで動作させるその後

elsewhere利用可能なCSS3ボタン上の他のチュートリアルをお読みください。

出典

2011-07-08 10:14:27 spliter

ヘイスプリッタ、次にCSS3を取得するPieは疑似クラスをサポートしていません。http：//css3pie.com/documentation/supported-css3-features/ –

たぶん、あなたはa:active擬似クラスの代わりa.activetabを使用して試みることができる：

これは私のcss & htmlです。

出典

2011-07-08 10:09:07 Luc125

a.activetabは有効なものとして正常に動作します。 a：IE7で動作していないアクティブな疑似クラス –

私たちはcssを使ってアンカータグにプレス効果をかけることができますか？

答えて

関連する問題