html5教程-HTML5之纯CSS3实现的tab标签切换

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

HTML 5的运用之纯 CSS 3实现的tab标签切换

CSS3代码实现的tab标签切换

 *{padding:0px ;m  arg in:0px;}   # tab{mar gin :20px;20px;pos IT ion:relative;}  ul{list -s tyle:none;}  ul li{float:left;}  ul li a{background:#f90;  color:#fff;   font-weight :500;  h ei ght:30px;  line-height:30px;  border-bottom:0px;  dis play :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 -i ndent: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  hr ef="#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>

HT ML 5的运用之纯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>

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

总结

以上是 为你收集整理的 html5教程-HTML5之纯CSS3实现的tab标签切换 全部内容，希望文章能够帮你解决 html5教程-HTML5之纯CSS3实现的tab标签切换 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于html5教程-HTML5之纯CSS3实现的tab标签切换的详细内容...