纯css的image slide
用css到做出的类似于幻灯片的图片展示的东西，先看看是什么样子吧！
当鼠标悬停在‘图片集1’上时是下面这个样子
当鼠标悬停在'图片集2'上时是下面这个样子
就是一种图片集之间切换的效果。当点击某张图片时图片就会放大。
当要在自己网页上放置多张图片时，这倒是个不错的选择。
下面就讲讲用css是怎么做出来的。
其实要做出这么个东西，只需要理解两个css里的概念就ok了。第一个就是绝对定位的概念，第二个就是伪类的概念
让我们来仔细分析一下：因为页面会在不同的鼠标状态里显示呈现不同的样子，而且是与鼠标状态相关，在css里实现这个的就只有通过:hover :avtive :focus等伪类了；还有像这样的布局，最容易做到的就是用绝对定位；
下面就是html代码：
2 <p id="intro">
3 我的css图片集
4 </p>
5 <ul id="out">
6 <li class="cl">
7 <a class="title" href="#">图片集1</a>
8 <div>
9 <a><img src="img/pic1_s.jpg" class="small"/><img src="img/pic1.jpg" class="big"/></a>
10 <a><img src="img/pic2_s.jpg" class="small"/><img src="img/pic2.jpg" class="big"/></a>
11 <a><img src="img/pic3_s.jpg" class="small"/><img src="img/pic3.jpg" class="big"/></a>
12 </div>
14 </li>
16 <li class="cl">
17 <a class="title" href="#">图片集2</a>
18 <div>
19 <a><img src="img/pic4_s.jpg" class="small"/><img src="img/pic4.jpg" class="big"/></a>
20 <a><img src="img/pic5_s.jpg" class="small"/><img src="img/pic5.jpg" class="big"/></a>
21 <a><img src="img/pic6_s.jpg" class="small" /><img src="img/pic6.jpg" class="big"/></a>
22 </div>
23 </li>
25 </ul><!--out end--> 26 </body>
结构很简单的吧！如果你的图片很多，还可以照这个样子往上加。
在来看一看css
2 list-style:none;padding:0;margin:0;
3 }
5 li{
6 list-style:none;padding:0;margin:0;float:left;height:50px;
7 }
9 p#intro{
10 font-size:16px;color:#C09;position:absolute;top:50px;left:10px;
11 }
12
13 /*图片不显示*/
14 ul li.cl div{
15 display:none;
16 }
18 /*修饰标题*/
19 a.title{
20 display:block;float:left;width:60px;font-size:12px;color:#FF0;text-align:center;
21 background-color:#666;margin-right:5px;padding:5px 0;text-decoration:none;
22 }
24 /*鼠标悬停在标题上*/
25 ul li.cl:hover div{
26 display:block;position:absolute;top:50px;left:10px;
27 }
28
29 ul li.cl:hover div img.big{
30 display:none;
31 }
32
33 ul li.cl:hover div{
34 width:500px;
35 height:500px;
36 }
38 ul li.cl:hover div a:active img.big,ul li.cl:hover div a:focus img.big{
39 display:block;
40 position:absolute;
41 top:0;left:0;
42 width:400px;height:400px; }
有三个关键的地方
关键点1：ul li.cl div{display:none}
看，在正常情况下我把包含图片的div全隐藏了。
关键点2：
ul li.cl:hover div{
display:block;position:absolute;top:50px;left:10px;
}
当鼠标悬停在标题的li上时，包含图片的div就显示出来了。
关键点3：
ul li.cl:hover div a:active img.big,ul li.cl:hover div a:focus img.big{
display:block;position:absolute;top:0;left:0;width:400px;height:400px;
}
当点击下去时，大图片就显示出来了。仔细的你或许能够发现，其实大图片这是把小图片隐藏了而已，障眼法吧！如果你的小图片太大的话，可就盖不住了哦!
呵呵，就是这个样子啊，我的css image slide 就做成了。
还有一点哦，这个在ie8里显示不正常，在ie8里点击不能出现大图片，我还没找到原因呢！ie8以前，就更算了吧！它们应该还不支持除了a标签外的伪类，所以要想在ie8以前里的ie版本里显示出来，最好都包裹个a标签。
做这么个例子，其实是么有什么大的实际意义的，我想用javascrip做或许表现的更好一点。做它，只是能够让我们发现，原来css还可以这样用啊！对css的探索本来就是一件很好玩的事吧!
