"以前我见过一种相册，大图是出现在小图中间。如果单是这样好办，但它要求小图与环绕方式包围大图。这就有点难度，以前摸不到门道，现在的我基本可以秒杀之了。我们可以用《纯 CSS 相册 2》的最后一个运行框改一下就行。思路，我们把中间 4 个 LI 元素的图片挖去，并把包含块设到 UL 元素上，hover ...."

someone1
AI专业者开发社区 1 号成员
AI开发者社区 • 0 回帖 • 10 浏览 • 4 个月前

纯CSS相册3

以前我见过一种相册，大图是出现在小图中间。如果单是这样好办，但它要求小图与环绕方式包围大图。这就有点难度，以前摸不到门道，现在的我基本可以秒杀之了。我们可以用《纯 CSS 相册 2》的最后一个运行框改一下就行。思路，我们把中间 4 个 LI 元素的图片挖去，并把包含块设到 UL 元素上，hover 时就让图片放大并绝对定位到中间。结构层很简单，就不贴出来了，直接看表现层：

ul#album, #album li{
  margin:0;
  padding:0;
  list-style:none;
}
ul#album{/*第1层*/
  width:400px;
  height:300px;
  position:relative;/*成为包含块*/
}
#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;
}
/*[修复chrome绝对定位错乱Bug*/
#album li a{
  display:block;/*让具有盒子模型*/
  width:100px;
  height:75px;
}
/*******完*****]*/
#album a:hover{
  margin:0;/*修正IE6 不渲染bug，随便为其设置一种背景颜色，border,font-size，margin，让它有东西做就是*/
}
#album a:hover img{/*第2层*/
  position:absolute;
  left:100px;/*上移小图的宽的一半*/
  top:75px;/*上移小图的高的一半*/
  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; position:relative;/* 成为包含块 */ } #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; } /*[ 修复 chrome 绝对定位错乱 Bug*/ #album li a{ display:block;/* 让具有盒子模型 */ width:100px; height:75px; } /******* 完 *****]*/ #album a:hover{margin:0;/* 修正 IE6 不渲染 bug，随便为其设置一种背景颜色，border,font-size，margin，让它有东西做就是 */} #album a:hover img{/* 第 2 层 */ position:absolute; left:100px;/* 上移小图的宽的一半 */ top:75px;/* 上移小图的高的一半 */ 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 司徒正美" /> </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 司徒正美" /> </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 司徒正美" /> </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 司徒正美" /> </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 司徒正美" /> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/"> <pre><code></a> </code></pre> </li> <li> <a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> <pre><code></a> </code></pre> </li> <li> <a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> <img src="<a href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s008.jpg">http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s008.jpg</a>" alt="纯 CSS 相册 by 司徒正美" /> </a> </li> <li> <a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> <img src="<a href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s009.jpg">http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s009.jpg</a>" alt="纯 CSS 相册 by 司徒正美" /> </a> </li> <li> <a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> <pre><code></a> </code></pre> </li> <li> <a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> <pre><code></a> </code></pre> </li> <li> <a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> <img src="<a href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s012.jpg">http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s012.jpg</a>" alt="纯 CSS 相册 by 司徒正美" /> </a> </li> <li> <a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> <img src="<a href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s013.jpg">http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s013.jpg</a>" alt="纯 CSS 相册 by 司徒正美" /> </a> </li> <li> <a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> <img src="<a href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s014.jpg">http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s014.jpg</a>" alt="纯 CSS 相册 by 司徒正美" /> </a> </li> <li> <a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> <img src="<a href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s015.jpg">http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s015.jpg</a>" alt="纯 CSS 相册 by 司徒正美" /> </a> </li> <li> <a href="<a href="http://www.cnblogs.com/rubylouvre/">http://www.cnblogs.com/rubylouvre/</a>"> <img src="<a href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s016.jpg">http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s016.jpg</a>" alt="纯 CSS 相册 by 司徒正美" /> </a> </li> </ul>

运行代码

发现问题没有？因为我们一张图片既当大图用又当小图用，于是一触发 hover 效果，就露馅了。没办法，还是走我们的老路吧——span 隐藏大图法。为了不让正中间空白一大块，我用了 CSS Sprites 技术分别在那 4 个 LI 元素里拼凑出第一张图片。

ul#album, #album li{
  margin:0;
  padding:0;
  list-style:none;
}
ul#album{/*第1层*/
  width:400px;
  height:300px;
  position:relative;/*成为包含块*/
}
#album li{/*第2层*/
  float:left;
  width:100px;/*一定要设置，要不当hover激活img成为大图时，img就上升到更上一层，↓*/
  height:75px;/*LI元素为空，就会被挤成一条线，后面的元素就会挤压过来填满此空间，出现最右下角少一块的现象*/
  overflow:hidden;
}
#album img{
  border:none;/*默认存在边框，为了精确控制，我们清除它*/
  display:block;/*li img下方多出5px空白bug*/
  width:100px;/*默认平时都以小图形式显示*/
  height:75px;
}
#ablum span {
  display:none;
}
/*[修复chrome绝对定位错乱Bug*/
#album li a{
  display:block;/*让具有盒子模型*/
  width:100px;
  height:75px;
}
/*******完*****]*/
#album a:hover{
  margin:0;/*修正IE6 不渲染bug，随便为其设置一种背景颜色，border,font-size，margin，让它有东西做就是*/
}
#album a:hover span{/*第2层*/
  display:block;
  position:absolute;
  left:100px;/*上移小图的宽的一半*/
  top:75px;/*上移小图的高的一半*/
}
#album a:hover span img{/*第2层*/
  width:200px;
  height:150px;
}

CSS Sprites 可查看结构层的内联样式部分。

<!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; position:relative;/* 成为包含块 */ } #album li{/* 第 2 层 */ float:left; width:100px;/* 一定要设置，要不当 hover 激活 img 成为大图时，img 就上升到更上一层，↓*/ height:75px;/*LI 元素为空，就会被挤成一条线，后面的元素就会挤压过来填满此空间，出现最右下角少一块的现象 */ overflow:hidden; } #album img{ border:none;/* 默认存在边框，为了精确控制，我们清除它 */ display:block;/*li img 下方多出 5px 空白 bug*/ width:100px;/* 默认平时都以小图形式显示 */ height:75px; } #ablum span {display:none;} /*[ 修复 chrome 绝对定位错乱 Bug*/ #album li a{ display:block;/* 让具有盒子模型 */ width:100px; height:75px; } /******* 完 *****]*/ #album a:hover{margin:0;/* 修正 IE6 不渲染 bug，随便为其设置一种背景颜色，border,font-size，margin，让它有东西做就是 */} #album a:hover span{/* 第 2 层 */ display:block; position:absolute; left:100px;/* 上移小图的宽的一半 */ top:75px;/* 上移小图的高的一半 */ } #album a:hover span img{/* 第 2 层 */ 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 司徒正美" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" alt="纯 CSS 相册 by 司徒正美" /> </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 司徒正美" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" alt="纯 CSS 相册 by 司徒正美" /> </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 司徒正美" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" alt="纯 CSS 相册 by 司徒正美" /> </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 司徒正美" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg" alt="纯 CSS 相册 by 司徒正美" /> </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 司徒正美" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s005.jpg" alt="纯 CSS 相册 by 司徒正美" /> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/" style="background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg) no-repeat 0 0"> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/" style="background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg) no-repeat -100px 0"> </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 司徒正美" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s008.jpg" alt="纯 CSS 相册 by 司徒正美" /> </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 司徒正美" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s009.jpg" alt="纯 CSS 相册 by 司徒正美" /> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/" style="background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg) no-repeat 0 -75px"> </a> </li> <li> <a href="http://www.cnblogs.com/rubylouvre/" style="background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg) no-repeat -100px -75px"> </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 司徒正美" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s012.jpg" alt="纯 CSS 相册 by 司徒正美" /> </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 司徒正美" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s013.jpg" alt="纯 CSS 相册 by 司徒正美" /> </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 司徒正美" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s014.jpg" alt="纯 CSS 相册 by 司徒正美" /> </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 司徒正美" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s015.jpg" alt="纯 CSS 相册 by 司徒正美" /> </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 司徒正美" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s016.jpg" alt="纯 CSS 相册 by 司徒正美" /> </a> </li> </ul>

运行代码

但是用 4 个 LI 元素做占位符很不爽，有没有办法不要这几个 LI 元素也能实现围绕效果呢？！能。至今没有露面的 clear 属性是时候出场了。我们可以利用它做两个类，把它们附加在 LI 元素上，实现相同的效果。

#album li.left {
  float:left;
  clear:left;
}
#album li.right {
  float:right;
  clear:right;
}

left 类能让页面元素位于行的最左端，如果此行已有一个拥有这类的元素，它就会跳到下一行，成为下一行的最左端的元素。right 类的功能也相仿。我们在第五个 LI 元素应用 left 类，它会成为当前行（即第二行）的最左端的元素，由于它本来就是这个位置，于是保持不变。我们在第六个 LI 元素应用 right，除 IE6 外，它都跳到这一行的最右端。但 IE6 就碰鬼了，竟然跳到第一行去，成为第一行的第五个元素。没办法，只好在第一行的第 4 个 LI 元素应用 right 类。接着流程基本一致，第七个 LI 元素应用 left 类，第八个 LI 元素应用 right 类，交错进行，直到我们在火狐下看到中间被挖空为止。这时，IE6 又出问题，最后两个元素赖在内部不走，但我们又不能给它应用 left 类或 right 类，这样会出现不合要求的第五行。怎么办，我们在这两个元素上添加一个 LI 元素，大小设置为中间的那块空白那么大，目的是把它们挤压下去。对于标准浏览器，它们都支持属性选择符，我们可以借此重写此 LI 元素的 display，让它鬼隐掉。这样一来，我们就少写 3 个 LI 元素了。

#album li.fixbug {
  width:200px;
  height:150px;
  background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg) no-repeat -100px -75px;
}
#album li[class="fixbug"]{
  display:none;
}

<!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; position:relative;/* 成为包含块 */ background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg) no-repeat 0 0; } #album li{/* 第 2 层 */ float:left; width:100px;/* 一定要设置，要不当 hover 激活 img 成为大图时，img 就上升到更上一层，↓*/ height:75px;/*LI 元素为空，就会被挤成一条线，后面的元素就会挤压过来填满此空间，出现最右下角少一块的现象 */ overflow:hidden; } #album img{ border:none;/* 默认存在边框，为了精确控制，我们清除它 */ display:block;/*li img 下方多出 5px 空白 bug*/ width:100px;/* 默认平时都以小图形式显示 */ height:75px; } #ablum span {display:none;} /*[ 修复 chrome 绝对定位错乱 Bug*/ #album li a{ display:block;/* 让具有盒子模型 */ width:100px; height:75px; } /******* 完 *****]*/ #album a:hover{margin:0;/* 修正 IE6 不渲染 bug，随便为其设置一种背景颜色，border,font-size，margin，让它有东西做就是 */} #album a:hover span{/* 第 2 层 */ display:block; position:absolute; left:100px;/* 上移小图的宽的一半 */ top:75px;/* 上移小图的高的一半 */ } #album a:hover span img{/* 第 2 层 */ width:200px; height:150px; } #album li.left { float:left; clear:left; } #album li.right { float:right; clear:right; } #album li.fixbug { width:200px; height:150px; background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg) no-repeat -100px -75px; } #album li[class="fixbug"]{display:none;} </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 司徒正美" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" alt="纯 CSS 相册 by 司徒正美" /> </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 司徒正美" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" alt="纯 CSS 相册 by 司徒正美" /> </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 司徒正美" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" alt="纯 CSS 相册 by 司徒正美" /> </a> </li> <li class="right"> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg" alt="纯 CSS 相册 by 司徒正美" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg" alt="纯 CSS 相册 by 司徒正美" /> </a> </li> <li class="left"> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s005.jpg" alt="纯 CSS 相册 by 司徒正美" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s005.jpg" alt="纯 CSS 相册 by 司徒正美" /> </a> </li> <li class="right"> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s008.jpg" alt="纯 CSS 相册 by 司徒正美" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s008.jpg" alt="纯 CSS 相册 by 司徒正美" /> </a> </li> <li class="left"> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s009.jpg" alt="纯 CSS 相册 by 司徒正美" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s009.jpg" alt="纯 CSS 相册 by 司徒正美" /> </a> </li> <li class="right"> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s012.jpg" alt="纯 CSS 相册 by 司徒正美" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s012.jpg" alt="纯 CSS 相册 by 司徒正美" /> </a> </li> <li class="left"> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s013.jpg" alt="纯 CSS 相册 by 司徒正美" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s013.jpg" alt="纯 CSS 相册 by 司徒正美" /> </a> </li> <li class="right"> <a href="http://www.cnblogs.com/rubylouvre/"> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s014.jpg" alt="纯 CSS 相册 by 司徒正美" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s014.jpg" alt="纯 CSS 相册 by 司徒正美" /> </a> </li> <li class="fixbug"></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 司徒正美" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s015.jpg" alt="纯 CSS 相册 by 司徒正美" /> </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 司徒正美" /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s016.jpg" alt="纯 CSS 相册 by 司徒正美" /> </a> </li> </ul>

运行代码

纯CSS相册3

如果您觉得此文有帮助，可以打赏点钱给我支付宝 1669866773@qq.com ，或扫描二维码

相关帖子

随便看看

纯CSS相册3