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>
尝试一下 »