CSS3簡易相簿功能

CSS3簡易相簿功能
DEMO
參考網站

CSS #album{ width:1000 px; height:300 px; } #album_ul{ width:125px; /* Width of Tab Image */ float: left; list-style: none; } #main_album{ width:580px; height:305px; overflow:hidden; /* Hides the non selected images */ float:left; }
需要特別注意的是 main_album裡面的 width:580 px中間一定不能有空格， 不然就是.........鬼打牆找不出原因，找了整整一小時... 正確寫法 width:580px body
<div id ="album"> <ul id ="album_ul"> <li><a href="#image1" id="tab1"><img src="../show_mop (1).jpg" alt="" title="" width="125px" height="75px"/></a></li> <li><a href="#image2" id="tab2"><img src="../show_mop (2).jpg" alt="" title="" width="125px" height="75px"/></a></li> <li><a href="#image3" id="tab3"><img src="../show_mop (3).jpg" alt="" title="" width="125px" height="75px"/></a></li> <li><a href="#image4" id="tab4"><img src="../show_mop(5).jpg" alt="" title="" width="125px" height="75px"/></a></li> </ul> <div id="main_album"> <div><a name="image1"></a><img src="../show_mop (1).jpg" alt="" title="" width="500px" height="300px"/></div> <div><a name="image2"></a><img src="../show_mop (2).jpg" alt="" title="" width="500px" height="300px" /></div> <div><a name="image3"></a><img src="../show_mop (3).jpg" alt="" title=""width="500px" height="300px"/></div> <div><a name="image4"></a><img src="../show_mop(5).jpg" alt="" title="" width="500px" height="300px"/></div> </div> </div> 
將點選圖往下擺的方法：
範例圖

CSS

#album{
width:500 px;
height:500 px;
}
#album_ul{
width:600px; /* Width of Tab Image */
/*float: left;*/
list-style: none;
 
}
#album_ul li {
display: inline;
list-style-type: none;
padding: 1px 1px;
}
#main_album{
width:580px;
height:305px;
 overflow:hidden;  /* Hides the non selected images */
 float:left;
 padding: 0px 0px 0px 55px;
  }

BODY
    <div id ="album">
      <div id="main_album">
          <div><a name="image1"></a><img src="../show_mop (1).jpg" alt="" title="" width="500px" height="300px"/></div>
          <div><a name="image2"></a><img src="../show_mop (2).jpg" alt="" title="" width="500px" height="300px" /></div>
          <div><a name="image3"></a><img src="../show_mop (3).jpg" alt="" title=""width="500px" height="300px"/></div>
          <div><a name="image4"></a><img src="../show_mop(5).jpg" alt="" title="" width="500px" height="300px"/></div>
      </div>
    </div>
      <ul id="album_ul">
          <li><a href="#image1" id="tab1"><img src="../show_mop (1).jpg" alt="" title=""  width="125px" height="75px"/></a></li>
          <li><a href="#image2" id="tab2"><img src="../show_mop (2).jpg" alt="" title="" width="125px" height="75px"/></a></li>
          <li><a href="#image3" id="tab3"><img src="../show_mop (3).jpg" alt="" title="" width="125px" height="75px"/></a></li>
        <li><a href="#image4" id="tab4"><img src="../show_mop(5).jpg" alt="" title="" width="125px" height="75px"/></a></li>
      </ul>