今天偶然發現電腦裡面還有這樣的一個例子，感覺效果還不錯，不記得啥時候下載的了，也好久沒上w3cfuns了，懷念學習前台的日子，給大家分享下。
效果圖：
效果是不是還是很不錯的，最主要的是沒有使用一行js，這才是亮點。
先看html檔：
簡單描述一下：
1、ul 中li決定了照片的個數
2、ul使用樣式float:right，width:140px;使得顯示在相簿的右側區域
3、li的float：left，使得li可以左浮動；li中存放大圖的p，position為absolute會根據p#gallary進行定位，預設只有第一個顯示
4、當滑鼠移到li上時，改變li span img的透明度和li p的display將大圖顯示
接下來就是css檔：
程式碼如下:
css中沒有什麼複雜的樣式，就不做描述了。另外html我引入了重置樣式的css , reset.css ，大家也可以用自己習慣的重置樣式：
程式碼如下:
html, body, p, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend{
margin: 0;
padding: 0;
font-size: 100%;
border: 0;
outline: 0;
background: transparent;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
:focus {
outline: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
