五彩导航栏练习题

高显

已于 2024-03-22 18:02:01 修改

阅读量139

点赞数 1

文章标签：前端 javascript html

于 2024-03-22 17:57:56 首次发布

本文链接：https://blog.csdn.net/GaoXianGaoXian/article/details/136948417

版权

    <style>
      a {
            width: 400px;
            height: 120px;
      }

      .one:link{
            background-color: red;
      }
      .one:visited{
            background-color: aqua;
      }
      .one:hover {
            background-color: chartreuse;
      }

      .two:link{
            background-color: red;
      }
      .two:visited{
            background-color: rgb(255, 0, 0);
      }
      .two:hover {
            background-color: rgb(235, 223, 101);
      }

      .three:link{
            background-color: red;
      }
      .three:visited{
            background-color: rgb(0, 255, 0);
      }
      .three:hover {
            background-color: rgb(187, 0, 255);
      }

      .four:link{
            background-color: red;
      }
      .four:visited{
            background-color: rgb(0, 0, 255);
      }
      .four:hover {
            background-color: chartreuse;
      }

      .fire:link{
            background-color: red;
      }
      .fire:visited{
            background-color: rgb(255, 0, 255);
      }
      .fire:hover {
            background-color: rgb(25, 0, 255);
      }
      </style>
</head>

<body>
    <a href="#" class="one">五彩导航</a>
    <a href="#" class="two">五彩导航</a>
    <a href="#" class="three">五彩导航</a>
    <a href="#" class="four">五彩导航</a>
    <a href="#" class="fire">五彩导航</a>
</body>