<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<meta content=”麦鸡(MacJi)的博客，关注Web内容、结构与表现。” name=”description” />
<meta content=”Copyright (c) 2008 MacJi” name=”copyright” />
<meta content=”麦鸡,MacJi” name=”author” />
<meta content=”web前端开发,麦鸡” name=”keywords” />
<title>纯css实现的Tab_软件开发网</title>
<style>
body{
font-size:85%;
}
ul{
margin:0;
padding:0;
list-style:none;
}
img{
border-width:0;
}
.macji{
position:relative;
}
.macji ul{
width:250px;
height:260px;
overflow:hidden;
}
ul li{
height:260px;
}
.macji a{
position:absolute;
left:0;
top:0;
z-index:2;
}
a.item{
z-index:10!important;
left:10px;
top:230px;
display:block;
width:20px;
height:20px;
border:solid 1px #777;
line-height:20px;
text-align:center;
color:#fff;
background:#aaa;
}
#b a.item{
left:31px;
}
#c a.item{
left:51px;
}
a.item:hover,:target a.item{
background:#f60;
}
#a:target a.pic,#b:target a.pic,#c:target a.pic{
z-index:3;
}
a.item:hover + a.pic{
z-index:9!important;
}
a.pic{
* position:static;
}
</style>
</head>
<body id=”macji-com”>
<h1>打造纯CSS的无侵入的卡盘（幻灯片），最终效果</h1>
<ol>
<li>无记录状态，无hover状态，所有浏览器支持</li>
<li>无hover状态，所有非IE浏览器支持</li>
<li>最终效果，Firefox、Opera支持</li>
</ol>
<hr />
<div class=”macji”>
<ul>
<li id=”a”>
<a href=”#a” class=”item”>1</a>
<a href=”https://www.jb51.net” class=”pic”><img
src=”http://huoche.7234.cn/images/jb51/3yv5woool2o.jpg” /></a>
</li>
<li id=”b”>
<a href=”#b” class=”item”>2</a>
<a href=”http://www.kanshule.com” class=”pic”><img
src=”http://huoche.7234.cn/images/jb51/cib24vkwpem.jpg” /></a>
</li>
<li id=”c”>
<a href=”#c” class=”item”>3</a>
<a href=”http://www.kanshule.com”class=”pic”><img
src=”http://huoche.7234.cn/images/jb51/v5wrj1m5v4x.jpg” /></a>
</li>
</ul>
</div>
<hr />
<p>author: <a href=”https://www.jb51.net”>软件开发网</a></p>
