css给你灵感-象壁画一样的图片展示

午梅2008-06-05 23:04:12

这是象壁画一样的图片展示效果。它有两种实现方式，下面的展示是运用图片的float属性，为了让图片的边距在ie6和firefox下一样，我加上了display:inline; position:relative; 。

还有一种更为简单的方式，就是不加float元素，让其自动排列，看第二个实例，然后在相隔的图片间给一个回车，（这个很神奇！偶还没研究明白为什么回车可以代替空格，加半角空格也可以，但是一行的最后一张图片和下一行的第一个图片间就不能加半角空格，这样如果加程序循环的话，不是很灵活）。偶又发现仅仅是这样的话，在ie6和firefox下，图片间隙是不等的，firefox图片间隔大，ie6下图片间隔小，这是因为两个浏览器的默认字体的原因。把字体设为Georgia字体，两个浏览器就一样了，不设这个字体是不好使的，你可以试试看还有没有其他适合的字体了。

我们还可以给图片加上连接。加连接后ie6下的图片间距又比Firefox的大二倍。解决办法是去掉font-family:Georgia;属性。或者将半角空格去掉，a上加padding属性。

.flower2 img {
	border: 1px solid #000;
	width:50px;
	height:50px;
}
--></style><div class="flower2"><a title="Freeren web标准学习" href="#"><img alt="象壁画一样的图片展示-Freeren" src="http://web.freeren.org/static/userfiles/Image/design/article/114/1.jpg" /></a><a title="Freeren web标准学习" href="#"><img alt="象壁画一样的图片展示-Freeren" src="http://web.freeren.org/static/userfiles/Image/design/article/114/2.jpg" /></a><a title="Freeren web标准学习" href="#"><img alt="象壁画一样的图片展示-Freeren" src="http://web.freeren.org/static/userfiles/Image/design/article/114/3.jpg" /></a><a title="Freeren web标准学习" href="#"><img alt="象壁画一样的图片展示-Freeren" src="http://web.freeren.org/static/userfiles/Image/design/article/114/4.jpg" /></a><a title="Freeren web标准学习" href="#"><img alt="象壁画一样的图片展示-Freeren" src="http://web.freeren.org/static/userfiles/Image/design/article/114/5.jpg" /></a><a title="Freeren web标准学习" href="#"><img alt="象壁画一样的图片展示-Freeren" src="http://web.freeren.org/static/userfiles/Image/design/article/114/6.jpg" /></a></div>

给图片加上标题和说明，再加一个双边框，看上去象不象一个绘画作品？

Flower

DONATE if you can

上一篇：css给你灵感-排出漂亮的版面
下一篇：《用户体验要素》

发表看法0

>> more 看看其他人的看法

css给你灵感-象壁画一样的图片展示

Flower

有什么想说的吗？