纯CSS相册
以前我见过一种相册，大图是出现在小图中间。如果单是这样好办，但它要求小图与环绕方式包围大图。这就有点难度，以前摸不到门道，现在的我基本可以秒杀之了。我们可以用《纯CSS相册2》的最后一个运行框改一下就行。思路，我们把中间4个LI元素的图片挖去，并把包含块设到UL元素上，hover时就让图片放大并绝对定位到中间。结构层很简单，就不贴出来了，直接看表现层：
01.ul#album, #album li{
02. margin:0;
03. padding:0;
04. list-style:none;
05.}
06.ul#album{/*第1层*/
07. width:400px;
08. height:300px;
09. position:relative;/*成为包含块*/
10.}
11.#album li{/*第2层*/
12. float:left;
13. width:100px;/*一定要设置，要不当hover激活img成为大图时，img就上升到更上一层，↓*/
14. height:75px;/*LI元素为空，就会被挤成一条线，后面的元素就会挤压过来填满此空间，出现最右下角少一块的现象*/
15.}
16.#album img{
17. border:none;/*默认存在边框，为了精确控制，我们清除它*/
18. display:block;/*li img下方多出5px空白bug*/
19. width:100px;/*默认平时都以小图形式显示*/
20. height:75px;
21.}
22./*[修复chrome绝对定位错乱Bug*/
23.#album li a{
24. display:block;/*让具有盒子模型*/
25. width:100px;
26. height:75px;
27.}
28./*******完*****]*/
29.#album a:hover{
30. margin:0;/*修正IE6 不渲染bug，随便为其设置一种背景颜色，border,font-size，margin，让它有东西做就是*/
31.}
32.#album a:hover img{/*第2层*/
33. position:absolute;
34. left:100px;/*上移小图的宽的一半*/
35. top:75px;/*上移小图的高的一半*/
36. width:200px;
37. height:150px;
38.}
运行代码
发现问题没有？因为我们一张图片既当大图用又当小图用，于是一触发hover效果，就露馅了。没办法，还是走我们的老路吧——span隐藏大图法。为了不让正中间空白一大块，我用了CSS Sprites 技术分别在那4个LI元素里拼凑出第一张图片。
01.ul#album, #album li{
02. margin:0;
03. padding:0;
04. list-style:none;
05.}
06.ul#album{/*第1层*/
07. width:400px;
08. height:300px;
09. position:relative;/*成为包含块*/
10.}
11.#album li{/*第2层*/
12. float:left;
13. width:100px;/*一定要设置，要不当hover激活img成为大图时，img就上升到更上一层，↓*/
14. height:75px;/*LI元素为空，就会被挤成一条线，后面的元素就会挤压过来填满此空间，出现最右下角少一块的现象*/
15. overflow:hidden;
16.}
17.#album img{
18. border:none;/*默认存在边框，为了精确控制，我们清除它*/
19. display:block;/*li img下方多出5px空白bug*/
20. width:100px;/*默认平时都以小图形式显示*/
21. height:75px;
22.}
23.#ablum span {
24. display:none;
25.}
26./*[修复chrome绝对定位错乱Bug*/
27.#album li a{
28. display:block;/*让具有盒子模型*/
29. width:100px;
30. height:75px;
31.}
32./*******完*****]*/
33.#album a:hover{
34. margin:0;/*修正IE6 不渲染bug，随便为其设置一种背景颜色，border,font-size，margin，让它有东西做就是*/
35.}
36.#album a:hover span{/*第2层*/
37. display:block;
38. position:absolute;
39. left:100px;/*上移小图的宽的一半*/
40. top:75px;/*上移小图的高的一半*/
41.}
42.#album a:hover span img{/*第2层*/
43. width:200px;
44. height:150px;
45.}
CSS Sprites 可查看结构层的内联样式部分。
运行代码
但是用4个LI元素做占位符很不爽，有没有办法不要这几个LI元素也能实现围绕效果呢？！能。至今没有露面的clear属性是时候出场了。我们可以利用它做两个类，把它们附加在LI元素上，实现相同的效果。
1.#album li.left {
2. float:left;
3. clear:left;
4.}
5.#album li.right {
6. float:right;
7. clear:right;
8.}
left类能让页面元素位于行的最左端，如果此行已有一个拥有这类的元素，它就会跳到下一行，成为下一行的最左端的元素。right类的功能也相仿。我们在第五个LI元素应用left类，它会成为当前行（即第二行）的最左端的元素，由于它本来就是这个位置，于是保持不变。我们在第六个LI元素应用right，除IE6外，它都跳到这一行的最右端。但IE6就碰鬼了，竟然跳到第一行去，成为第一行的第五个元素。没办法，只好在第一行的第4个LI元素应用right类。接着流程基本一致，第七个LI元素应用left类，第八个LI元素应用right类，交错进行，直到我们在火狐下看到中间被挖空为止。这时，IE6又出问题，最后两个元素赖在内部不走，但我们又不能给它应用left类或right类，这样会出现不合要求的第五行。怎么办，我们在这两个元素上添加一个LI元素，大小设置为中间的那块空白那么大，目的是把它们挤压下去。对于标准浏览器，它们都支持属性选择符，我们可以借此重写此LI元素的display，让它鬼隐掉。这样一来，我们就少写3个LI元素了。
1.#album li.fixbug {
2. width:200px;
3. height:150px;
4. background:transparent url(199042/o_s001.jpg) no-repeat -100px -75px;
5.}
6.#album li[class="fixbug"]{
7. display:none;
8.}
运行代码