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;

    }

     

  • 相关阅读:
    C# 实现list=list.OrderBy(q=>q.字段名).ToList(); 按多个字段排序
    c# dev gridcontrol 焦点行失去焦点有背景颜色
    c# dev gridcontrol format rule的使用
    鼠标模拟左键单击
    IDEA快捷键/本文仅供自己参考使用如有侵权立删
    Git学习笔记
    bootstrap帮助文档
    bootstrap笔记
    关于Action模型驱动无法获取属性的问题
    SSH整合hibernate无法正常自动生成表
  • 原文地址:https://www.cnblogs.com/quliang945/p/6442586.html
Copyright © 2011-2022 走看看