html5 手机 tab标签,H5新增标签 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;}#div1{clear:left;}

#tab>div{border:1px solid blue;width:170px;height:100px;text-indent:2em;

padding:5px 5px;position:absolute;top:31px;background:#fff;}

#div1:target,#div2:target,#div3:target{z-index:2;}

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

欢迎来到郑州，这是标签1的内容，这里是商朝古都

欢迎来到濮阳，这是标签2的内容，这里是颛顼遗都

  欢迎来到洛阳，这是标签3的内容，这里是九朝古都