<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"&n ... uot;en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title> A 'Two Step' CSS Photograph Gallery </title>
<style type="text/css">
ul#gallery {
padding:0;
margin:0;
width:448px;
height:336px;
position:relative;
background:#888 url(http://sheneyan.com/image/article/css_gallery2/g26.jpg);
}
#gallery li {
list-style-type:none;
width:64px;
height:48px;
float:left;
z-index:100;
}
#gallery li.lft {
float:left;
clear:left;
}
#gallery li.rgt {
float:right;
clear:right;
}
#gallery a {
position:relative;
width:64px;
height:48px;
display:block;
float:left;
z-index:100;
cursor:default;
}
#gallery a img {
position:relative;
width:62px;
height:46px;
border:1px solid #888;
z-index:100;
}
#gallery a:hover {
width:160px;
height:120px;
padding:108px 144px;
position:absolute;
left:0;
top:0;
z-index:20;
}
#gallery a:hover img {
background:#eee;
position:relative;
width:160px;
height:120px;
border:0;
z-index:20;
}
#gallery a:active, #gallery a:focus {
background:transparent;
width:320px;
height:240px;
padding:48px 64px;
position:absolute;
left:0;
top:0;
z-index:10;
}
#gallery a:active img, #gallery a:focus img {
background:#eee;
position:relative;
width:320px;
height:239px;
border:0;
z-index:10;
}
/* hack for Internet Explorer */
#gallery li.pad {
height:0;
display:block;
margin-top:-2px;
width:448px;
font-size:0;
}
a:visited {color:#000;}
/* hack for Opera 7+ */
@media all and (min-width:0px){
#gallery a:hover {
background:#888;
width:320px;
height:240px;
padding:48px 64px;
position:absolute;
left:0;
top:0;
z-index:10;
}
#gallery a:hover img {
background:#aaa;
position:relative;
width:320px;
height:240px;
border:0;
z-index:10;
}
}
</style>
</head>
<body>
<br><br><br>
<ul id="gallery">
<li><a href="#nogo">
<img src="http://sheneyan.com/image/article/css_gallery2/g1.jpg" alt=& ... t;#1" /></a></li>
<li><a href="#nogo">
<img src="http://sheneyan.com/image/article/css_gallery2/g2.jpg" alt=& ... t;#2" /></a></li>
<li><a href="#nogo">
<img src="http://sheneyan.com/image/article/css_gallery2/g3.jpg" alt=& ... t;#3" /></a></li>
<li><a href="#nogo">
<img src="http://sheneyan.com/image/article/css_gallery2/g4.jpg" alt=& ... t;#4" /></a></li>
<li><a href="#nogo">
<img src="http://sheneyan.com/image/article/css_gallery2/g5.jpg" alt=& ... t;#5" /></a></li>
<li><a href="#nogo">
<img src="http://sheneyan.com/image/article/css_gallery2/g6.jpg" alt=& ... t;#6" /></a></li>
<li class="rgt"><a href="#nogo">
<img src="http://sheneyan.com/image/article/css_gallery2/g7.jpg" alt=& ... t;#7" /></a></li>
<li class="lft"><a href="#nogo">
<img src="http://sheneyan.com/image/article/css_gallery2/g8.jpg" alt=& ... t;#8" /></a></li>
<li class="rgt"><a href="#nogo">
<img src="http://sheneyan.com/image/article/css_gallery2/g9.jpg" alt=& ... t;#9" /></a></li>
<li class="lft"><a href="#nogo">
<img src="http://sheneyan.com/image/article/css_gallery2/g10.jpg" alt=&q ... t;#10" /></a></li>
<li class="rgt"><a href="#nogo">
<img src="http://sheneyan.com/image/article/css_gallery2/g11.jpg" alt=&q ... t;#11" /></a></li>
<li class="lft"><a href="#nogo">
<img src="http://sheneyan.com/image/article/css_gallery2/g12.jpg" alt=&q ... t;#12" /></a></li>
<li class="rgt"><a href="#nogo">
<img src="http://sheneyan.com/image/article/css_gallery2/g13.jpg" alt=&q ... t;#13" /></a></li>
<li class="lft"><a href="#nogo">
<img src="http://sheneyan.com/image/article/css_gallery2/g14.jpg" alt=&q ... t;#14" /></a></li>
<li class="rgt"><a href="#nogo">
<img src="http://sheneyan.com/image/article/css_gallery2/g15.jpg" alt=&q ... t;#15" /></a></li>
<li class="lft"><a href="#nogo">
<img src="http://sheneyan.com/image/article/css_gallery2/g16.jpg" alt=&q ... t;#16" /></a></li>
<li class="rgt"><a href="#nogo">
<img src="http://sheneyan.com/image/article/css_gallery2/g17.jpg" alt=&q ... t;#17" /></a></li>
<li class="pad"></li>
<li class="lft"><a href="#nogo">
<img src="http://sheneyan.com/image/article/css_gallery2/g18.jpg" alt=&q ... t;#18" /></a></li>
<li><a href="#nogo">
<img src="http://sheneyan.com/image/article/css_gallery2/g19.jpg" alt=&q ... t;#19" /></a></li>
<li><a href="#nogo">
<img src="http://sheneyan.com/image/article/css_gallery2/g20.jpg" alt=&q ... t;#20" /></a></li>
<li><a href="#nogo">
<img src="http://sheneyan.com/image/article/css_gallery2/g21.jpg" alt=&q ... t;#21" /></a></li>
<li><a href="#nogo">
<img src="http://sheneyan.com/image/article/css_gallery2/g22.jpg" alt=&q ... t;#22" /></a></li>
<li><a href="#nogo">
<img src="http://sheneyan.com/image/article/css_gallery2/g23.jpg" alt=&q ... t;#23" /></a></li>
<li class="rgt"><a href="#nogo">
<img src="http://sheneyan.com/image/article/css_gallery2/g24.jpg" alt=&q ... t;#24" /></a></li>
</ul>
效果：
浙公网安备 33010602011771号