zoukankan      html  css  js  c++  java
  • css 导航效果

    a:link  超链接的普通样式,即正常浏览的样式。

    a:visited 被点击过的超链接样式

    a:hover  鼠标指针经过超链接时的样式

    a:active 在超链接上单击时,即“当前激活”时,超链接的样子

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>超链接效果</title>
    <style>
    a{
     font-family:Arial, Helvetica, sans-serif;
     font-size:0.8em;
     text-align:center;
     margin:5px; 
     line-height:30px;
    }//默认的
    a:link,a:visited{
     color:#a62020;
     padding:4px 10px 4px 10px;
     background-color:#ecd8db;
     text-decoration:none;
     border-top:1px solid #eee;
     border-left:1px solid #eee;
     border-bottom:1px solid #717171;
     border-right:1px solid #717171;
    }//没访问,和访问过的
    a:hover{
     color:#821818;
     padding:5px 8px 3px 12px;
     background-color:#e2c4c9;
     border-top:1px solid #717171;
     border-left:1px solid #717171;
     border-bottom:1px solid #eee;
     border-right:1px solid #eee;
     cursor:crosshair;
    }//鼠标经过
     </style>
    </head>

    <body>
    <a href="#">Home</a>
    <a href="#">Contact Us</a>
    <a href="#">Web Dev</a>
    <a href="#">Web Design</a>
    <a href="#">Map</a>
    </body>
    </html>

    最终效果:

    没访问

    访问过得

  • 相关阅读:
    负载均衡机制
    测试先行
    MVC模式在Java Web应用程序中的实例
    MVC模式学习
    Java反射机制
    软件开发火狐自动填写用户名和密码
    23种设计模式概述
    站立会议总结02
    站立会议总结01
    买书最低价问题
  • 原文地址:https://www.cnblogs.com/zfang/p/2191223.html
Copyright © 2011-2022 走看看