zoukankan      html  css  js  c++  java
  • 标签背景实现

    以前在做导航条时,<a>标签都采用相同的初始背景与鼠标滑过背景.所以可以在CSS中写入总的效果CSS代码即可.如

    a{

       background:url(bg1.jpg) no-repeat;

    }

    a:hover{

      background:url(bg11.jpg) no-repeat;

    }

    这样所有的<a>都采用了相同初始和鼠标滑过样式...

    但如果几个不同的<A>标签,要采用不同的背景,用以上的方法就不行了.如有四个<A>标签,每一个的初始背景与鼠标滑过背景都不一样.那么就不能用以上的统一设置方法了.必须对每个<A>采用单独的,不同的设置..

    我的实现方法为,把每个<A>标签,用<SPAN></SPAN>括起来,然后给<SPAN>设置class属性,如第一个<A>的设置为:

    <span class="first"><a href="1.htm">1111</a></span>

    然后对此写上CSS代码(可以是页内样式,也可以是外部文件样式)如下:

    .first{

       ......(省略的样式设计)

    }

    .first a{

       background:url(bg1.jpg) no-repeat;

    }

    .frist a:hover{

       background:url(bg11.jpg) no-repeat;

    }

    以上设置意思为:first样式中的<a>初始图片和鼠标滑过图片.

    同理对第二个,第三个,第四个这样处理.如:

    <span class="second"><a href="2.htm">2222</a></span>

    .second{

       ......(省略的样式设计)

    }

    .seconda{

       background:url(bg1.jpg) no-repeat;

    }

    .seconda:hover{

       background:url(bg11.jpg) no-repeat;

    }

    第三个......

    第四个......

    这样就很巧妙的解决了,不同<A>标签的不同图片样式..

    版权声明:本文为博主原创文章,未经博主允许不得转载。

  • 相关阅读:
    CentOS7- 配置阿里镜像源
    MySQL学习笔记
    OSI&TCP/IP模型
    加密算法学习
    golang学习笔记
    Redis学习总结整理
    TCP
    HTTP/HTTPS
    HTTP2
    MVCC
  • 原文地址:https://www.cnblogs.com/lucari/p/4608548.html
Copyright © 2011-2022 走看看