zoukankan      html  css  js  c++  java
  • 关于A标签的几种用法及属性

    一.a标签的四个状态:

    1.link'未访问状态

    例:

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

    a:link{color: blue;}

    </style>

    </head>

    <body>

    <a href="###">这是一个a标签</a>

    </body>

    </html>



    2.visited访问过状态:

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

    a:visited{color: black;}

    </style>

    </head>

    <body>

    <a href="###">这是一个a标签</a>

    </body>

    </html>

     

    变成黑色点击不变色

    3.hover鼠标经过状态:

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

    a:hover{color: orange;}

    </style>

    </head>

    <body>

    <a href="###">这是一个a标签</a>

    </body>

    </html>

    鼠标滑过变成橘黄色.

    4.active鼠标按住状态:

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

    a:active{color: green;}

    </style>

    </head>

    <body>

    <a href="###">这是一个a标签</a>

    </body>

    </html>

    鼠标长摁变成绿色.

    二.用a标签实现跳转:

     

    <!DOCTYPE html>

     

    <html>

     

    <head>

     

    <meta charset="UTF-8">

     

    <title></title>

     

    </head>

     

    <body>

     

    <a href="#1F">三国演义</a>

     

    <a href="#2F">水浒传</a>

     

    <a href="#3F">西游记</a>

     

    <a href="#4F">红楼梦</a>

     

    <a href="#5F">封神演义</a>

     

    <hr />

     

    <a name="1F"></a>

     

    掉蚕丝吕布

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <a name="2F"></a>

     

    阎婆惜

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <a name="3F"></a>

     

    唐僧

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <a name="4F"></a>

     

    林黛玉

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <a name="5F"></a>

     

    哪吒

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    <br />

     

    </body>

     

    </html>

    点击相应的a标签实现跳转.

    注:

    去a标签下划线

    a{

    /*去除a标签下划线*/

    text-decoration: none;

    }

     

  • 相关阅读:
    【小5聊】腾讯位置服务之小程序简单使用以及显示附近WC步行路线
    前端面试——JS进阶
    【小5聊】腾讯位置服务之小程序简单使用以及显示附近WC步行路线
    Node学习(三)
    HTML5 知识点总结(六)
    uniapp集成unipush监听推送,处理兼容ios在线无法收到推送通知问题以及安卓推送处理
    记一些CSS属性总结(二)
    Python getattr() 函数
    python中的__init__和__new__的区别
    干货报告:八大科技领域,280 页,InfoQ《2020 中国技术发展白皮书》开放下载...
  • 原文地址:https://www.cnblogs.com/quliang945/p/6442586.html
Copyright © 2011-2022 走看看