html5 css3 卡片切换,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;}

• 标签1
• 标签2
• 标签3

欢迎来到北京，这是标签1的内容，这里是清华大学信息处理技术国家实验室(筹)

欢迎来到杭州，这是标签2的内容，这里是浙江大学计算机图形学国家重点实验室

欢迎来到武汉，这是标签3的内容，这里是华中科技大学脉冲强磁场国家重大科技基础设施