你的位置: Kiyo'Space首页 HTML/CSS/特效 阅读文章 欢迎留下您的足迹

CSS图像查看器

[ HTML/CSS/特效 ] 分享
以下是引用片段:
<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>

欢迎在此留下您的脚步






评论内容 (*必填):
(Ctrl + Enter 快速提交)