图片廊"/>
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 图片廊
发布评论