纯CSS相册2-控件新闻-慧都网

纯CSS相册2

原创|其它|编辑：郝浩|2009-09-21 10:02:53.000|阅读 630 次

概述：这部分的思路可以说全部秉承《a:hover应用精粹》一文，因为事实证明，锚点切换的效果不好（要劳驾用户的尊手多动一下啦，点之后页面会跳动啦，并且不兼容opera）。这部分的效果比较眩目，但难度绝对不会超过“推搡式放大效果”。

这部分的思路可以说全部秉承《a:hover应用精粹》一文，因为事实证明，锚点切换的效果不好（要劳驾用户的尊手多动一下啦，点之后页面会跳动啦，并且不兼容opera）。这部分的效果比较眩目，但难度绝对不会超过“推搡式放大效果”。

它的结构层与《a:hover应用精粹》的后三个示范出奇的相似。CSS也足够强大地表达出我们想要新效果。

   
<ul id="album"> 
  <li> 
    <a href="http://www.cnblogs.com/rubylouvre/"> 
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" alt="纯CSS相册 by 司徒正美"  /> 
      <span> 
        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" alt="纯CSS相册 by 司徒正美" /> 
      </span> 
    </a> 
  </li> 
  <li> 
    <a href="http://www.cnblogs.com/rubylouvre/"> 
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" alt="纯CSS相册 by 司徒正美"  /> 
      <span> 
        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" alt="纯CSS相册 by 司徒正美" /> 
      </span> 
    </a> 
  </li> 
  <li> 
    <a href="http://www.cnblogs.com/rubylouvre/"> 
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" alt="纯CSS相册 by 司徒正美"  /> 
      <span> 
        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" alt="纯CSS相册 by 司徒正美" /> 
      </span> 
    </a> 
  </li> 
//**************略********* 
    <a href="http://www.cnblogs.com/rubylouvre/"> 
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s016.jpg" alt="纯CSS相册 by 司徒正美"  /> 
      <span> 
        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s016.jpg" alt="纯CSS相册 by 司徒正美" /> 
      </span> 
    </a> 
  </li> 
</ul>

用到的图片比较多，但结构我们应该很熟悉。一共32张，其实只是16张，每张重复使用2次（大图与小图）。我们要做的出效果，图片分析4行排列，每行4张，鼠标移到小图上面，对应的大图会在小图左上方出现，并遮住小图。实现思路是，限制UL元素的大小，并且LI元素全部左浮动。大图我们一开始就隐藏起来，当移动到小图上时，我们显示大图，并用绝对定位设置大图的位置，包含块设在A元素上。

ul#album, #album li{ 
  margin:0; 
  padding:0; 
  list-style:none; 
} 
ul#album{/*第1层*/
  width:400px; 
  height:300px; 
} 
#album img { 
  border:none;/*默认存在边框，为了精确控制，我们清除它*/
  display:block;/*li img下方多出5px空白bug*/
  width:100px;/*默认平时都以小图形式显示*/
  height:75px; 
} 
#album li{/*第2层*/
  float:left;/*用于平行排列与换行*/
} 
#album span { 
  display:none;/*平时隐藏大图*/
} 
#album a:hover { 
  position:relative; 
} 
#album a:hover span{/*第3层*/
  display:block; 
  position:absolute; 
  left:-50px;/*左移距离为小图的宽的一半*/
  top:-37px;/*上移距离为小图的高的一半*/
} 
#album a:hover span img{ 
  width:200px;/*我们原图实现太大了，所以也要缩小一下*/
  height:150px; 
}

<!doctype html> <title>纯CSS相册 by 司徒正美</title> <meta charset="utf-8"/> <meta name="keywords" content="纯CSS相册 by 司徒正美" /> <meta name="description" content="纯CSS相册 by 司徒正美" /> <style type="text/css"> ul#album, #album li{ margin:0; padding:0; list-style:none; } ul#album{/*第1层*/ width:400px; height:300px; } #album img { border:none;/*默认存在边框，为了精确控制，我们清除它*/ display:block;/*li img下方多出5px空白bug*/ width:100px;/*默认平时都以小图形式显示*/ height:75px; } #album li{/*第2层*/ float:left;/*用于平行排列与换行*/ } #album span { display:none;/*平时隐藏大图*/ } #album a:hover { position:relative; } #album a:hover span{/*第2+999层*/ display:block; position:absolute; left:-50px;/*左移距离为小图的宽的一半*/ top:-37px;/*上移距离为小图的高的一半*/ } #album a:hover span img{ width:200px;/*我们原图实现太大了，所以也要缩小一下*/ height:150px; } </style> <h1>纯CSS相册 by 司徒正美</h1> <ul id="album"> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" alt="纯CSS相册 by 司徒正美" /> <span> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" alt="纯CSS相册 by 司徒正美" /> </span> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" alt="纯CSS相册 by 司徒正美" /> <span> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" alt="纯CSS相册 by 司徒正美" /> </span> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" alt="纯CSS相册 by 司徒正美" /> <span> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" alt="纯CSS相册 by 司徒正美" /> </span> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg" alt="纯CSS相册 by 司徒正美" /> <span> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg" alt="纯CSS相册 by 司徒正美" /> </span> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s005.jpg" alt="纯CSS相册 by 司徒正美" /> <span> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s005.jpg" alt="纯CSS相册 by 司徒正美" /> </span> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s006.jpg" alt="纯CSS相册 by 司徒正美" /> <span> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s006.jpg" alt="纯CSS相册 by 司徒正美" /> </span> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s007.jpg" alt="纯CSS相册 by 司徒正美" /> <span> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s007.jpg" alt="纯CSS相册 by 司徒正美" /> </span> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s008.jpg" alt="纯CSS相册 by 司徒正美" /> <span> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s008.jpg" alt="纯CSS相册 by 司徒正美" /> </span> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s009.jpg" alt="纯CSS相册 by 司徒正美" /> <span> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s009.jpg" alt="纯CSS相册 by 司徒正美" /> </span> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s010.jpg" alt="纯CSS相册 by 司徒正美" /> <span> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s010.jpg" alt="纯CSS相册 by 司徒正美" /> </span> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s011.jpg" alt="纯CSS相册 by 司徒正美" /> <span> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s011.jpg" alt="纯CSS相册 by 司徒正美" /> </span> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s012.jpg" alt="纯CSS相册 by 司徒正美" /> <span> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s012.jpg" alt="纯CSS相册 by 司徒正美" /> </span> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s013.jpg" alt="纯CSS相册 by 司徒正美" /> <span> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s013.jpg" alt="纯CSS相册 by 司徒正美" /> </span> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s014.jpg" alt="纯CSS相册 by 司徒正美" /> <span> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s014.jpg" alt="纯CSS相册 by 司徒正美" /> </span> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s015.jpg" alt="纯CSS相册 by 司徒正美" /> <span> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s015.jpg" alt="纯CSS相册 by 司徒正美" /> </span> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s016.jpg" alt="纯CSS相册 by 司徒正美" /> <span> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s016.jpg" alt="纯CSS相册 by 司徒正美" /> </span> </a> </li> </ul>

但需要的图片太多了，换言之，请求数也很多，这对服务器的压力很大，有没有办法砍掉一些呢？？能！因为我们可以通过hover切换相应图片的大小，就不需要span那一部分了。于是结构层更简单。

   
<ul id="album"> 
  <li> 
    <a href="http://www.cnblogs.com/rubylouvre/"> 
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> 
    </a> 
  </li> 
  <li> 
    <a href="http://www.cnblogs.com/rubylouvre/"> 
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> 
    </a> 
  </li> 
  <li> 
    <a href="http://www.cnblogs.com/rubylouvre/"> 
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> 
    </a> 
  </li> 
  <li> 
    <a href="http://www.cnblogs.com/rubylouvre/"> 
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> 
    </a> 
  </li> 
 //****************略************ 
  <li> 
    <a href="http://www.cnblogs.com/rubylouvre/"> 
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s016.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> 
    </a> 
  </li> 
</ul>

ul#album, #album li{ 
  margin:0; 
  padding:0; 
  list-style:none; 
} 
ul#album{/*第1层*/
  width:400px; 
  height:300px; 
} 
#album li{/*第2层*/
  float:left; 
  width:100px;/*一定要设置，要不当hover激活img成为大图时，img就上升到更上一层，↓*/
  height:75px;/*LI元素为空，就会被挤成一条线，后面的元素就会挤压过来填满此空间，出现最右下角少一块的现象*/
} 
#album img{ 
  border:none;/*默认存在边框，为了精确控制，我们清除它*/
  display:block;/*li img下方多出5px空白bug*/
  width:100px;/*默认平时都以小图形式显示*/
  height:75px; 
} 
#album a:hover { 
  position:relative;/*成为包含块*/
} 
#album a:hover img{/*只有由hover激活的img才位于第3层*/
  position:absolute; 
  left:-50px;/*上移小图的宽的一半*/
  top:-37px;/*上移小图的高的一半*/
  width:200px; 
  height:150px; 
}

<!doctype html> <title>纯CSS相册 by 司徒正美</title> <meta charset="utf-8"/> <meta name="keywords" content="纯CSS相册 by 司徒正美" /> <meta name="description" content="纯CSS相册 by 司徒正美" /> <style type="text/css"> ul#album, #album li{ margin:0; padding:0; list-style:none; } ul#album{/*第1层*/ width:400px; height:300px; } #album li{/*第2层*/ float:left; width:100px;/*一定要设置，要不当hover激活img成为大图时，img就上升到更上一层，↓*/ height:75px;/*LI元素为空，就会被挤成一条线，后面的元素就会挤压过来填满此空间，出现最右下角少一块的现象*/ } #album img{ border:none;/*默认存在边框，为了精确控制，我们清除它*/ display:block;/*li img下方多出5px空白bug*/ width:100px;/*默认平时都以小图形式显示*/ height:75px; } #album a:hover { position:relative;/*成为包含块*/ } #album a:hover img{/*只有由hover激活的img才位于第3层*/ position:absolute; left:-50px;/*上移小图的宽的一半*/ top:-37px;/*上移小图的高的一半*/ width:200px; height:150px; } </style> <h1>纯CSS相册 by 司徒正美</h1> <ul id="album"> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s005.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s006.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s007.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s008.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s009.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s010.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s011.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s012.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s013.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s014.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s015.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s016.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> </a> </li> </ul>

这次竟然发现在chrome出现问题，症状是大图总是出现第一幅小图之上，而不是我们鼠标指向那个小图上。留意我们的小图其实位于A元素上，而A元素为大图的包含块。不过A元素好像什么也没有设置，我们给点东西A做延缓A的渲染速度，可能chrome做了过多的内部优化……在样式中添加：

/*[修复chrome绝对定位错乱Bug*/
#album li a{ 
  display:block;/*让具有盒子模型*/
  width:100px; 
  height:75px; 
} 
/*******完*****]*/

<!doctype html> <title>纯CSS相册 by 司徒正美</title> <meta charset="utf-8"/> <meta name="keywords" content="纯CSS相册 by 司徒正美" /> <meta name="description" content="纯CSS相册 by 司徒正美" /> <style type="text/css"> ul#album, #album li{ margin:0; padding:0; list-style:none; } ul#album{/*第1层*/ width:400px; height:300px; } #album li{/*第2层*/ float:left; width:100px;/*一定要设置，要不当hover激活img成为大图时，img就上升到更上一层，↓*/ height:75px;/*LI元素为空，就会被挤成一条线，后面的元素就会挤压过来填满此空间，出现最右下角少一块的现象*/ } #album img{ border:none;/*默认存在边框，为了精确控制，我们清除它*/ display:block;/*li img下方多出5px空白bug*/ width:100px;/*默认平时都以小图形式显示*/ height:75px; } #album a:hover { position:relative;/*成为包含块*/ } /*[修复chrome绝对定位错乱Bug*/ #album li a{ display:block;/*让具有盒子模型*/ width:100px; height:75px; } /*******完*****]*/ #album a:hover img{/*只有由hover激活的img才位于第3层*/ position:absolute; left:-50px;/*上移小图的宽的一半*/ top:-37px;/*上移小图的高的一半*/ width:200px; height:150px; } </style> <h1>纯CSS相册 by 司徒正美</h1> <ul id="album"> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s005.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s006.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s007.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s008.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s009.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s010.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s011.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s012.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s013.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s014.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s015.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s016.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> </a> </li> </ul>

我们再加上边框等修饰了，一个艳丽抢眼的相册就又搞定了。

<!doctype html> <title>纯CSS相册 by 司徒正美</title> <meta charset="utf-8"/> <meta name="keywords" content="纯CSS相册 by 司徒正美" /> <meta name="description" content="纯CSS相册 by 司徒正美" /> <style type="text/css"> ul#album, #album li{ margin:0; padding:0; list-style:none; } ul#album{/*第1层*/ width:440px; height:340px; background:#FFFF00; padding:50px; border:10px solid #4ADCEF; } #album li{/*第2层*/ float:left; display:block; width:110px;/*一定要设置，要不当hover激活img成为大图时，img就上升到更上一层，↓*/ height:85px;/*LI元素为空，就会被挤成一条线，后面的元素就会挤压过来填满此空间，出现最右下角少一块的现象*/ } /*[修复chrome绝对定位错乱Bug*/ #album li a{ display:block;/*让具有盒子模型*/ width:108px; height:83px; border:1px solid #FFFF00; } /*******完*****]*/ #album img{ border:none;/*默认存在边框，为了精确控制，我们清除它*/ display:block;/*li img下方多出5px空白bug*/ width:100px;/*默认平时都以小图形式显示*/ height:75px; border:solid 4px #4ADCEF; } #album li a:hover { position:relative;/*成为包含块*/ } #album a:hover img{/*只有由hover激活的img才位于第3层*/ position:absolute; left:-50px;/*左移小图的宽的一半*/ top:-37px;/*上移小图的高的一半*/ width:200px; height:150px; } </style> <h1>纯CSS相册 by 司徒正美</h1> <ul id="album"> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s005.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s006.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s007.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s008.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s009.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s010.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s011.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s012.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s013.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s014.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s015.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s016.jpg" alt="纯CSS相册 by 司徒正美" class="small" /> </a> </li> </ul>

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@evget.com

文章转载自：博客园

上一篇：Web开发中的缓存下一篇：微软Windows 7大量授权开卖一周表现尚佳