chenli9689  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.tab_content{
width:500px;
height:200px;
border:1px solid #000;
position:absolute;
top:100px;
left:300px;
background:#fff;}
#tab1{
z-index:1;}
#tab1:target,#tab2:target,#tab3:target{
z-index:3}
</style>
</head>

<body>
<div class="tablist">
<ul class="tabmenu">
<li><a href="#tab1">标签一</a></li>
<li><a href="#tab2">标签二</a></li>
<li><a href="#tab3">标签三</a></li>
</ul>
<div id="tab1" class="tab_content">欢迎加设计达人Q群:50063010<br />设计达人以原创和分享一些高质量的设计文章为主,希望喜欢!
<!-- end tab1 content --></div>
<div id="tab2" class="tab_content"><p>本Tab切换效果纯CSS3制作,无任何JavaScript</p>最新Q群:50063010<br />爱设计,爱分享——设计达人(http://www.shejidaren.com)
<!-- end tab2 content--></div>
<div id="tab3" class="tab_content"><p style="font-size:24px;">高质量设计文章分享平台</p><p>欢迎加设计达人Q群:50063010<br />设计达人以原创和分享一些高质量的设计文章为主,希望喜欢</p>
<!-- end tab3 content--></div>
</div>
</body>
</html>

posted on 2015-07-21 11:37  chenli9689  阅读(88)  评论(0)    收藏  举报