HTML5之纯CSS3实现的tab标签切换

HTML5的运用之纯CSS3实现的tab标签切换

CSS3代码实现的tab标签切换

 *{
    padding:0px;
    margin:0px;
}
  #tab{
    margin:20px;
    20px;
    posITion:relative;
}
  ul{
    list-style:none;
}
  ul li{
    float:left;
}
  ul li a{
    background:#f90;
      color:#fff;
      font-weight:500;
      height:30px;
      line-height:30px;
      border-bottom:0px;
      display:block;
      text-decoration:none;
      padding:0px 10px;
      margin-right:1px;
  }
  ul li a:hover{
    background:blue;
}
  #p1{
    clear:left;
}
      #tab>
p{
      border:1px solid blue;
      width:170px;
      height:100px;
      text-indent:2em;
      padding:5px 5px;
      position:absolute;
      top:31px;
      background:#fff;
  }
  #p1:target,#p2:target,#P3:target{
    z-index:2;
}
     

 p id=tab>
         ul>
             li>
    a href="#p1">
    标签1/a>
    /li>
             li>
    a href="#p2">
    标签2/a>
    /li>
             li>
    a href="#p3">
    标签3/a>
    /li>
         /ul>
             p id=p1>
    欢迎来到北京，这是标签1的内容，这里是清华大学信息处理技术国家实验室（筹）/p>
             p id=p2>
    欢迎来到杭州，这是标签2的内容，这里是浙江大学计算机图形学国家重点实验室/p>
             p id=p3>
    欢迎来到武汉，这是标签3的内容，这里是华中科技大学脉冲强磁场国家重大科技基础设施/p>
     /p>

HTML5的运用之纯CSS3实现的tab标签切换

CSS3代码实现的tab标签切换

 *{
    padding:0px;
    margin:0px;
}
  #tab{
    margin:20px;
    20px;
    position:relative;
}
  ul{
    list-style:none;
}
  ul li{
    float:left;
}
  ul li a{
    background:#f90;
      color:#fff;
      font-weight:500;
      height:30px;
      line-height:30px;
      border-bottom:0px;
      display:block;
      text-decoration:none;
      padding:0px 10px;
      margin-right:1px;
  }
  ul li a:hover{
    background:blue;
}
  #p1{
    clear:left;
}
      #tab>
p{
      border:1px solid blue;
      width:170px;
      height:100px;
      text-indent:2em;
      padding:5px 5px;
      position:absolute;
      top:31px;
      background:#fff;
  }
  #p1:target,#p2:target,#p3:target{
    z-index:2;
}
     

 p id=tab>
         ul>
             li>
    a href="#p1">
    标签1/a>
    /li>
             li>
    a href="#p2">
    标签2/a>
    /li>
             li>
    a href="#p3">
    标签3/a>
    /li>
         /ul>
             p id=p1>
    欢迎来到北京，这是标签1的内容，这里是清华大学信息处理技术国家实验室（筹）/p>
             p id=p2>
    欢迎来到杭州，这是标签2的内容，这里是浙江大学计算机图形学国家重点实验室/p>
             p id=p3>
    欢迎来到武汉，这是标签3的内容，这里是华中科技大学脉冲强磁场国家重大科技基础设施/p>
     /p>
    

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！