css實現圖片閱讀器

HTML:

<div id="wrap" >
     
   
      <ul>
           <li><a href="#image1" id="2"><img src="2.png" alt=""/></a></li>
           <li><a href="#image2" id="3"><img src="3.png" alt=""/></a></li>
           <li><a href="#image3" id="4"><img src="4.png" alt=""/></a></li>
           <li><a href="#image4" id="5"><img src="5.png" alt=""/></a></li>
           <li><a href="#image5" id="6"><img src="6.png" alt=""/></a></li>
      </ul>
     

<div id="images">
       <div><a id="image1"></a><img
style="width:500px;height:300px;"src="2.png" alt=""
title=""/></div>
       <div><a id="image2"></a><img
style="width:500px;height:300px;"src="3.png" alt=""
title=""/></div>
       <div><a id="image3"></a><img
style="width:500px;height:300px;"src="4.png" alt=""
title=""/></div>
       <div><a id="image4"></a><img
style="width:500px;height:300px;"src="5.png" alt=""
title=""/></div>
       <div><a id="image5"></a><img
style="width:500px;height:300px;"src="6.png" alt=""
title=""/></div>
      
</div>

</div>

 

 

CSS:

*{
margin:o auto;
padding: 0;}

body {
margin:0;
padding:0;
background-color: #111;
color:#888;}

a{
text-decoration:none;
color:#660066;}

ul{
list-style:none;
float:left;
width:125px;
margin:0 auto;
border-right:5px solid black;

}

ul li{
height:60px;
border-right:10px solid black;
}

ul li a img{
filter:alpha(opacity=40);
width:110px;
opacity:0.4;}

 

height:60px;}

ul li a:hover img{
filter:alpha(opacity=100);
opacity:1.0;  
}

#images {
width:500px;
height:300px;
overflow:hidden;
float:left;
border-right:10px solid black;}

#wrap{
width:700px;
height:300px;

}

所用的圖片為500*300