1. 程式人生 > >div+css處理連結的 link visited hover active四種狀態

div+css處理連結的 link visited hover active四種狀態

               

   div+css處理連結的:link,:visited,:hover,:active四種狀態

   [示例程式碼]

   <html>
       <head>
           <style>
               a:link {background-color: red; color: white;}
               a:visited {background-color: yellow; color: black;}
               a:hover  {background-color: green; color: white;}
               a:active {background-color: blue; color: white;}
           </style>
       </head>
       <body>
           <div>
               <a href="http://a.link/">
                   連結的預設效果是a:link中的效果
               </a>
           </div>
           <div>
               <a href="">
                   訪問過的連結的效果是a:visited中的效果
               </a>
           </div>
           <div>
               <a href="http://blog.csdn.net/hu_zhenghui">
                   滑鼠移動到連結上的效果是a:hover中的效果
               </a>
           </div>
           <div>
               <a href="http://blog.csdn.net/hu_zhenghui">
                   滑鼠單擊連結時的效果是a:active中的效果
               </a>
           </div>
       </body>
   </html>

   [div+css關鍵詞]

div css

   [div+css重要工具]

   [div+css的常見問題]

較驗div+css格式,http://validator.w3.org/
div+css的margin縮寫方式
div+css的padding縮寫方式
連結的:link,:visited,:hover,:active四種狀態

   [div+css的瀏覽器相容問題]

水平居中,Firefox使用margin-left: auto; margin-right: auto; IE6 使用text-align: center;
垂直居中,Firefox中使用display: table-cell; vertical-align: middle;可以實現div垂直居中,而IE6中則需要藉助IE6中css的特點實現垂直居中。
!important標記,Firefox支援!important標記,IE6忽略!important標記
手形滑鼠指標,使用cursor: pointer;