纯CSS相册-赢在网络赢在网络科技有限公司网站建设

北京上海广州深圳 >>

网站建设


	◎	网站建设套餐
	◎	网站建设流程
	◎	功能模块介绍
	◎	网页设计报价
	◎	网站改版设计
	◎	网站售后服务
	◎	建站技术知识

最新客户

·	广州惠多广告有限公司
·	广州通用科技国际
·	东莞乐邦电子有限公司
·	广州鸿翔科技有限公司
·	新百胜纸制品有限公司
·	广州海迪尔科技有限公司
·	广州律师黄卓童
·	广州采盛包装有限公司
·	广州科杰电子有限公司
·	广州艺琳彩印有限公司
·	广州科星电子
·	湖南大自然制药有限公司
·	广州“晶之恋(天然)水晶
·	捷安视电子科技有限公司
·	广州佐丹士涂料有限公司

网站推广

推广知识

·	浅谈造成网站关键字排名
·	浅谈最近百度调整对网站
·	分析：站内锚文本链接使
·	细节成就权重权重决定
·	根据百度有效反链数据
·	详解SEO策略制定中的
·	关键词排名优化之挖掘长

建站技术知识

纯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元素里拼凑出第一张图片。

/*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 可查看结构层的内联样式部分。

<!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元素上，实现相同的效果。

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(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg) no-repeat -100px -75px; 5.} 6.#album li[class="fixbug"]{ 7. display:none; 8.}

<!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>

在线咨询

QQ咨询

旺旺咨询

MSN咨询

建站服务

经济型网站设计套餐￥2580

企业型网站设计套餐￥3980

豪华型网站设计套餐￥6580

商城型网站设计套餐￥7580

定制型网站设计套餐￥面谈

智赢型ABC ￥1580/1980

赢在网络各行业解决方案

赢在网络企业建站流程

虚拟主机

普及型（电信）350元/年

经济型（电信）650元/年

普及A型（双线）500元/年

普及B型（双线）900元/年

外贸型（国外） 550元/年

企业型（国外） 1050元/年

我要订购主机>>

域名注册

国际顶级域名.com 100元/年

国际顶级域名.net 100元/年

国际顶级域名.cc 380元/年

国际顶级域名.org 180元/年

中国顶级域名.cn 100元/年

中国顶级域名.com.cn 100元/年

中文域名.中国.公司 280元/年

我要注册域>>

友情链接：湖南网站建设广州网站建设上海网站建设广州网站建设公司中山网站制作网页设计网网页设计公司网站制作网站建设建网站公司珠海网站建设赢在网络

业务范围：广州虚拟主机广州网站设计广州网页制作广州网页设计深圳网站建设珠海网页设计中山网页制作汕头网站设计番禺网页制作南海网站建设肇庆网页制作

Copyright 2005-2020 win580.com rights reserved 电话：020-87518743 87518740 　传真：020-87518740
地址:广州市天河区中山大道西8号(天河商贸大厦)1304室　邮编：510620
E-mail：Win580@126.com