div+css处理链接的 link visited hover active四种状态

最新推荐文章于 2023-08-18 14:42:33 发布

原创最新推荐文章于 2023-08-18 14:42:33 发布 · 557 阅读

1 ·

CC 4.0 BY-SA版权

博客主要围绕div+css处理链接的:link、:visited、:hover、:active四种状态展开，包含示例代码、关键词、重要工具介绍，还提及常见问题及浏览器兼容问题，此外还分享了人工智能教程链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

分享一下我老师大神的人工智能教程。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.youkuaiyun.com/jiangjunshow

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.youkuaiyun.com/hu_zhenghui">
                   鼠标移动到链接上的效果是a:hover中的效果
               </a>
           </div>
           <div>
               <a href="http://blog.youkuaiyun.com/hu_zhenghui">
                   鼠标单击链接时的效果是a:active中的效果
               </a>
           </div>
       </body>
   </html>

[div+css关键词]

div css

[div+css重要工具]

Internet Explorer Developer Toolbar, http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en

[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;