图片展示页面
实例：http://www.gengbing.com/demo/016/
用来放blog类小的图片展示还是很合适的。
css
#menu {position:relative; width:152px; height:152px; background-color:#fff; margin:2em auto;}
#menu a.p1:visited, #menu a.p2:visited, #menu a.p3:visited, #menu a.p4:visited, #menu a.p5:visited, #menu a.p6:visited, #menu a.p7:visited, #menu a.p8:visited {position:absolute; display:block; width:50px; height:50px; background-color:#949e7c; color:#fff; text-decoration:none;}
#menu a.p1:visited {top:0px; left:0px;}
#menu a.p2:visited {top:0px; left:51px;}
#menu a.p3:visited {top:0px; left:102px;}
#menu a.p4:visited {top:51px; left:0px;}
#menu a.p5:visited {top:51px; left:102px;}
#menu a.p6:visited {top:102px; left:0px;}
#menu a.p7:visited {top:102px; left:51px;}
#menu a.p8:visited {top:102px; left:102px;}
#menu a.p1, #menu a.p2, #menu a.p3, #menu a.p4, #menu a.p5, #menu a.p6, #menu a.p7, #menu a.p8 {position:absolute; display:block; width:50px; height:50px; background-color:#949e7c; color:#fff; text-decoration:none;}
#menu a.p1 {top:0px; left:0px;}
#menu a.p2 {top:0px; left:51px;}
#menu a.p3 {top:0px; left:102px;}
#menu a.p4 {top:51px; left:0px;}
#menu a.p5 {top:51px; left:102px;}
#menu a.p6 {top:102px; left:0px;}
#menu a.p7 {top:102px; left:51px;}
#menu a.p8 {top:102px; left:102px;}
#menu a.p1:hover, #menu a.p2:hover, #menu a.p3:hover, #menu a.p4:hover, #menu a.p5:hover, #menu a.p6:hover, #menu a.p7:hover, #menu a.p8:hover {text-decoration:none; background-color:#d4d8bd; color:#000;}
#menu a img {display:block; position:absolute; width:1px; height:1px; border:0px; top:0px; left:0px;}
#menu a.p1:hover img {display:block; position:absolute; top:51px; left:51px; width:50px; height:50px; border:0px;}
#menu a.p2:hover img {display:block; position:absolute; top:51px; left:0px; width:50px; height:50px; border:0px;}
#menu a.p3:hover img {display:block; position:absolute; top:51px; left:-51px; width:50px; height:50px; border:0px;}
#menu a.p4:hover img {display:block; position:absolute; top:0px; left:51px; width:50px; height:50px; border:0px;}
#menu a.p5:hover img {display:block; position:absolute; top:0px; left:-51px; width:50px; height:50px; border:0px;}
#menu a.p6:hover img {display:block; position:absolute; top:-51px; left:51px; width:50px; height:50px; border:0px;}
#menu a.p7:hover img {display:block; position:absolute; top:-51px; left:0px; width:50px; height:50px; border:0px;}
#menu a.p8:hover img {display:block; position:absolute; top:-51px; left:-51px; width:50px; height:50px; border:0px;}
#freddie {position:absolute; left:51px; top:51px; border:0px;}
html
<div id="menu">
<img id="freddie" src="freddie.png" title="Freddie mercury" alt="Freddie mercury" />
<a class="p1" href="#nogo"> 1<img src="boy.gif" title="A boy" alt="" /></a><a class="p2" href="#nogo"> 2<img src="eyeye.gif" title="Seeing eye to eye" alt="" /></a><a class="p3" href="#nogo"> 3<img src="freddie2.png" title="Queen" alt="" /></a><a class="p4" href="#nogo"> 4<img src="mondriaan.gif" title="A picture by Mondriaan" alt="" /></a><a class="p5" href="#nogo"> 5<img src="puddytat.gif" title="A pussy cat" alt="" /></a><a class="p6" href="#nogo"> 6<img src="pic.gif" title="Black and White" alt="" /></a><a class="p7" href="#nogo"> 7<img src="mee.gif" title="My animation" alt="" /></a><a class="p8" href="#nogo"> 8<img src="spooky3.gif" title="Spooky" alt="" /></a>
</div>
#1
