[劉陽Java]_CSS圖片畫廊
阿新 • • 發佈：2018-02-14
.so photo ora html fault com view 思路 float
圖片畫廊也是一種比較經典的案例。本節文章主要簡單給大家介紹了CSS2實現圖片畫廊，采取的實現思路
- ul放置圖片
- li標簽裏面嵌套a標簽
- a標簽裏面嵌套兩個圖片的標簽
- 通過簡單的偽類來實現圖片預覽效果
具體效果圖如下，這樣子大家看了效果圖，就會知道我們到底為了實現什麽樣子的效果
具體的代碼如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body { background: #fff; color: #777; margin: 0 auto; padding: 50px; position: relative; width: 620px; } h1 { border-bottom: 1px dashed #ccc; color: #933; font: 17px Georgia, serif; margin: 0 0 10px; padding: 0 0 5px; text-align: center; } .hoverbox { list-style: none; cursor: default; } .hoverbox li { background: #eee; border-color: #ddd #bbb #aaa #ccc; border-style: solid; border-width: 1px; display: inline; float: left; margin: 3px; padding: 5px; position: relative; } .hoverbox a { text-decoration: none; cursor: default; } .hoverbox img { width: 100px; height: 75px; background: #fff; border-color: #aaa #ccc #ddd #bbb; border-style: solid; border-width: 1px; padding: 2px; vertical-align: top; } .hoverbox .preview { border-color: #000; width: 200px; height: 150px; } .hoverbox a .preview { display: none; } .hoverbox a:hover .preview{ position: absolute; left: -45px; top: -33px; z-index: 10; display: block; } </style> </head> <body> <h1>CSS_圖片畫廊</h1> <ul class="hoverbox"> <li><a href="#"><img src="https://host.sonspring.com/hoverbox/img/photo01.jpg"/><img src="https://host.sonspring.com/hoverbox/img/photo01.jpg"/ class="preview"></a></li> <li><a href="#"><img src="https://host.sonspring.com/hoverbox/img/photo02.jpg"/><img src="https://host.sonspring.com/hoverbox/img/photo02.jpg"/ class="preview"></a></li> <li><a href="#"><img src="https://host.sonspring.com/hoverbox/img/photo03.jpg"/><img src="https://host.sonspring.com/hoverbox/img/photo03.jpg"/ class="preview"></a></li> <li><a href="#"><img src="https://host.sonspring.com/hoverbox/img/photo04.jpg"/><img src="https://host.sonspring.com/hoverbox/img/photo04.jpg"/ class="preview"></a></li> <li><a href="#"><img src="https://host.sonspring.com/hoverbox/img/photo05.jpg"/><img src="https://host.sonspring.com/hoverbox/img/photo05.jpg"/ class="preview"></a></li> <li><a href="#"><img src="https://host.sonspring.com/hoverbox/img/photo06.jpg"/><img src="https://host.sonspring.com/hoverbox/img/photo06.jpg"/ class="preview"></a></li> <li><a href="#"><img src="https://host.sonspring.com/hoverbox/img/photo07.jpg"/><img src="https://host.sonspring.com/hoverbox/img/photo07.jpg"/ class="preview"></a></li> <li><a href="#"><img src="https://host.sonspring.com/hoverbox/img/photo08.jpg"/><img src="https://host.sonspring.com/hoverbox/img/photo08.jpg"/ class="preview"></a></li> <li><a href="#"><img src="https://host.sonspring.com/hoverbox/img/photo09.jpg"/><img src="https://host.sonspring.com/hoverbox/img/photo09.jpg"/ class="preview"></a></li> <li><a href="#"><img src="https://host.sonspring.com/hoverbox/img/photo10.jpg"/><img src="https://host.sonspring.com/hoverbox/img/photo10.jpg"/ class="preview"></a></li> <li><a href="#"><img src="https://host.sonspring.com/hoverbox/img/photo11.jpg"/><img src="https://host.sonspring.com/hoverbox/img/photo11.jpg"/ class="preview"></a></li> <li><a href="#"><img src="https://host.sonspring.com/hoverbox/img/photo12.jpg"/><img src="https://host.sonspring.com/hoverbox/img/photo12.jpg"/ class="preview"></a></li> </ul> </body> </html>
[劉陽Java]_CSS圖片畫廊