CSS图像查看器

Kiyo • • HTML/CSS/特效 • 52 阅读
以下是引用片段：
<STYLE type=text/css>
.thumbnail {
 POSITION: relative
}
a.thumbnail:hover {
 Z-INDEX: 50; BACKGROUND-COLOR: transparent
}
.thumbnail SPAN {
 BORDER-RIGHT: gray 1px dashed; PADDING-RIGHT: 5px; BORDER-TOP: gray 1px dashed; PADDING-LEFT: 5px; LEFT: -1000px; VISIBILITY: hidden; PADDING-BOTTOM: 5px; BORDER-LEFT: gray 1px dashed; COLOR: black; PADDING-TOP: 5px; BORDER-BOTTOM: gray 1px dashed; POSITION: absolute; BACKGROUND-COLOR: lightyellow; TEXT-DECORATION: none
}
.thumbnail SPAN IMG {
 BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 2px; PADDING-LEFT: 2px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px; BORDER-RIGHT-WIDTH: 0px
}
a.thumbnail:hover SPAN {
 LEFT: 60px; VISIBILITY: visible; TOP: 0px
}
</STYLE>
以下是引用片段：
<a class="thumbnail" href="#thumb"><img src="pic1_small.jpg" width="100px" height="66px" border="0" /><span><img src="pic1.jpg" /><br />Simply beautiful.</span></a>
<a class="thumbnail" href="#thumb"><img src="pic2_small.jpg" width="100px" height="66px" border="0" /><span><img src="pic2.jpg" /><br />So real, it's unreal. Or is it?</span></a>
<br />
<br />
<a class="thumbnail" href="#thumb">图片一<span><img src="01.jpg" /><br />说明一</span></a><br />
<a class="thumbnail" href="#thumb">图片二<span><img src="02.jpg" /><br />说明二</span></a>

版权声明：
作者：Kiyo
链接：https://www.wkiyo.cn/html/2008-01/i492.html
来源：Kiyo's space
文章版权归作者所有，未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>