效果圖：
效果是不是還是很不錯的，最主要的是沒有使用一行js，這才是亮點。
先看html檔案：
簡單描述一下：
1、ul 中 li決定了**的個數
2、ul使用樣式float:right，width:140px;使得顯示在相簿的右側區域
3、li的float：left，使得li可以左浮動；li中存放大圖的div，position為absolute會根據div#gallary進行定位，預設只有第乙個顯示
4、當滑鼠移動到li上時，改變li span img的透明度和li div的display將大圖顯示
接下來就是css檔案：
margin: 0;padding: 0;
font-size: 100%;
border: 0;
outline: 0;
background: transparent; }
ol, ul
blockquote, q
:focus
table
HTML5 CSS3專題 純CSS打造相簿效果
效果圖 效果是不是還是很不錯的，最主要的是沒有使用一行js，這才是亮點。先看html檔案 簡單描述一下 1 ul 中 li決定了 的個數 2 ul使用樣式float right，width 140px 使得顯示在相簿的右側區域 3 li的float left，使得li可以左浮動 li中存放大圖的di...
HTML5 CSS3專題 純CSS打造相簿效果
效果圖 效果是不是還是非常不錯的。最基本的是沒有使用一行js。這才是亮點。先看html檔案 簡單描寫敘述一下 1 ul 中 li決定了 的個數 2 ul使用樣式float right。width 140px 使得顯示在相簿的右側區域 3 li的float left，使得li能夠左浮動。li中存放大圖...
初學HTML5 CSS3動畫
乙個完整的css animations由兩部分構成 在css3中使用 keyframes規則來建立動畫，keyframes可以設定多個關鍵幀，每個關鍵幀表示動畫過程中的乙個狀態，多個關鍵幀就可以使動畫十分絢麗。keyframes animationname animation屬性用於描述動畫的css...