CSS 图片廊：使用 CSS3 的媒体查询来创建响应式图片廊

时间：2020-04-09 10:51:35 阅读：80 评论：0 收藏：0 [点我收藏+]

CSS 图片廊

以下是使用CSS创建图片廊：

这里添加图片文本描述

图片廊

以下是使用 CSS 创建图片廊：

实例

<divclass="responsive"><divclass="img"><atarget="_blank"href="http://static.runoob.com/images/demo/demo1.jpg"><imgsrc="http://static.runoob.com/images/demo/demo1.jpg"alt="图片文本描述"width="300"height="200"></a><divclass="desc">这里添加图片文本描述</div></div></div><divclass="responsive"><divclass="img"><atarget="_blank"href="http://static.runoob.com/images/demo/demo2.jpg"><imgsrc="http://static.runoob.com/images/demo/demo2.jpg"alt="图片文本描述"width="300"height="200"></a><divclass="desc">这里添加图片文本描述</div></div></div><divclass="responsive"><divclass="img"><atarget="_blank"href="http://static.runoob.com/images/demo/demo3.jpg"><imgsrc="http://static.runoob.com/images/demo/demo3.jpg"alt="图片文本描述"width="300"height="200"></a><divclass="desc">这里添加图片文本描述</div></div></div><divclass="responsive"><divclass="img"><atarget="_blank"href="http://static.runoob.com/images/demo/demo4.jpg"><imgsrc="http://static.runoob.com/images/demo/demo4.jpg"alt="图片文本描述"width="300"height="200"></a><divclass="desc">这里添加图片文本描述</div></div></div>

响应式图片廊

使用 CSS3 的媒体查询来创建响应式图片廊：

<divclass="responsive"><divclass="img"><atarget="_blank"href="img_fjords.jpg"><imgsrc="http://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg"alt="Trolltunga Norway"width="300"height="200"></a><divclass="desc">这里添加图片文本描述</div></div></div><divclass="responsive"><divclass="img"><atarget="_blank"href="img_forest.jpg"><imgsrc="http://www.runoob.com/wp-content/uploads/2016/04/img_forest.jpg"alt="Forest"width="600"height="400"></a><divclass="desc">这里添加图片文本描述</div></div></div><divclass="responsive"><divclass="img"><atarget="_blank"href="img_lights.jpg"><imgsrc="http://www.runoob.com/wp-content/uploads/2016/04/img_lights.jpg"alt="Northern Lights"width="600"height="400"></a><divclass="desc">这里添加图片文本描述</div></div></div><divclass="responsive"><divclass="img"><atarget="_blank"href="img_mountains.jpg"><imgsrc="http://www.runoob.com/wp-content/uploads/2016/04/img_mountains.jpg"alt="Mountains"width="600"height="400"></a><divclass="desc">这里添加图片文本描述</div></div></div><divclass="clearfix"></div><divstyle="padding:6px;"><h4>重置浏览器大小查看效果</h4></div>

CSS 图片廊：使用 CSS3 的媒体查询来创建响应式图片廊

原文：https://www.cnblogs.com/peijz/p/12664575.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)

CSS 图片廊：使用 CSS3 的媒体查询来创建响应式图片廊

CSS 图片廊

图片廊

实例

更多实例

响应式图片廊