图片廊"/>
CSS：CSS 图片廊
| ylbtech-CSS：CSS 图片廊 |
| 1.返回顶部 |
CSS 图片廊
以下是使用CSS创建图片廊：
图片廊
以下是使用 CSS 创建图片廊：
实例
<div class="responsive"><div class="img"><a target="_blank" href=".jpg"><img src=".jpg" alt="图片文本描述" width="300" height="200"></a><div class="desc">这里添加图片文本描述</div></div> </div><div class="responsive"><div class="img"><a target="_blank" href=".jpg"><img src=".jpg" alt="图片文本描述" width="300" height="200"></a><div class="desc">这里添加图片文本描述</div></div> </div><div class="responsive"><div class="img"><a target="_blank" href=".jpg"><img src=".jpg" alt="图片文本描述" width="300" height="200"></a><div class="desc">这里添加图片文本描述</div></div> </div><div class="responsive"><div class="img"><a target="_blank" href=".jpg"><img src=".jpg" alt="图片文本描述" width="300" height="200"></a><div class="desc">这里添加图片文本描述</div></div> </div>尝试一下 »
更多实例
响应式图片廊
使用 CSS3 的媒体查询来创建响应式图片廊：
<div class="responsive"><div class="img"><a target="_blank" href="img_fjords.jpg"><img src=".jpg" alt="Trolltunga Norway" width="300" height="200"></a><div class="desc">这里添加图片文本描述</div></div> </div><div class="responsive"><div class="img"><a target="_blank" href="img_forest.jpg"><img src=".jpg" alt="Forest" width="600" height="400"></a><div class="desc">这里添加图片文本描述</div></div> </div><div class="responsive"><div class="img"><a target="_blank" href="img_lights.jpg"><img src=".jpg" alt="Northern Lights" width="600" height="400"></a><div class="desc">这里添加图片文本描述</div></div> </div><div class="responsive"><div class="img"><a target="_blank" href="img_mountains.jpg"><img src=".jpg" alt="Mountains" width="600" height="400"></a><div class="desc">这里添加图片文本描述</div></div> </div><div class="clearfix"></div><div style="padding:6px;"><h4>重置浏览器大小查看效果</h4> </div>尝试一下 » 2、
| 2.返回顶部 |
| 3.返回顶部 |
| 4.返回顶部 |
| 5.返回顶部 |
| 6.返回顶部 |
| 作者：ylbtech 出处：/ 本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。 |
转载于:.html
更多推荐
CSS：CSS 图片廊
发布评论