body{font:12px Georgia, "Times New Roman", Times, serif; text-align:center;background:#9c9a9c;}img{border:0;}h1{background:#638AAD;font-size:14px; color:#fff;font-weight:bold;padding:5px 0;}#one{ margin:10px auto; list-style:none; background:url(../images/photo_06.jpg) no-repeat; width:595px; height:300px; overflow:auto; } #one li{ float:left; display:block; border-right:1px solid #000; }a{ display:block; text-decoration:none; cursor:default; margin:0; }#one a:link,#one a:visited{ width:30px; height:300px; overflow:hidden; }#one a:link img{ width:30px; height:300px; border:0;} #one a:hover{ width:436px; height:300px; }#one a:hover img{ width:436px;}#two{ margin:10px auto; width:436px; height:425px; list-style:none; background:url(../images/photo_07.jpg); display:block;}#two li{ display:block; border-bottom:1px solid #000; margin-top:0 !important; margin-top:-3px; }#two a:link,#two a:visited{ width:436px; height:30px; overflow:hidden; }#two a:link img{ width:436px; height:30px; display:inline; }#two a:hover{ height:300px; width:436px; }#two a:hover img{ height:300px;}#back{ margin:10px auto;}#back a{ width:40px; cursor:pointer; padding:5px 0; margin: 0 0 0 480px !important; margin:0;}#back a:link,#back a:visited{ background:#dedfce; color:#4b648c; }#back a:hover{ color:#cc3300;} 列型<ul id="one"><li><a href="#"><img src="../images/photo_01.jpg" alt="" /></a></li> <li><a href="#"><img src="../images/photo_02.jpg" alt="" /></a></li><li><a href="#"><img src="../images/photo_03.jpg" alt="" /></a></li> <li><a href="#"><img src="../images/photo_04.jpg" alt="" /></a></li><li><a href="#"><img src="../images/photo_05.jpg" alt="" /></a></li></ul>树型 <ul id="two"><li><a href="#"><img src="../images/photo_01.jpg" alt="" /></a></li> <li><a href="#"><img src="../images/photo_02.jpg" alt="" /></a></li><li><a href="#"><img src="../images/photo_03.jpg" alt="" /></a></li> <li><a href="#"><img src="../images/photo_04.jpg" alt="" /></a></li><li><a href="#"><img src="../images/photo_05.jpg" alt="" /></a></li></ul>
