CSS 图片廊

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

这里添加图片文本描述

这里添加图片文本描述

这里添加图片文本描述

这里添加图片文本描述

图片廊

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

实例

< div class = " responsive " > < div class = " img " > < a target = " _blank " href = " http://static.runoob.com/images/demo/demo1.jpg " > < img src = " http://static.runoob.com/images/demo/demo1.jpg " alt = " 图片文本描述 " width = " 300 " height = " 200 " > </ a > < div class = " desc " > 这里添加图片文本描述 </ div > </ div > </ div > < div class = " responsive " > < div class = " img " > < a target = " _blank " href = " http://static.runoob.com/images/demo/demo2.jpg " > < img loading = " lazy " src = " http://static.runoob.com/images/demo/demo2.jpg " alt = " 图片文本描述 " width = " 300 " height = " 200 " > </ a > < div class = " desc " > 这里添加图片文本描述 </ div > </ div > </ div > < div class = " responsive " > < div class = " img " > < a target = " _blank " href = " http://static.runoob.com/images/demo/demo3.jpg " > < img loading = " lazy " src = " http://static.runoob.com/images/demo/demo3.jpg " alt = " 图片文本描述 " width = " 300 " height = " 200 " > </ a > < div class = " desc " > 这里添加图片文本描述 </ div > </ div > </ div > < div class = " responsive " > < div class = " img " > < a target = " _blank " href = " http://static.runoob.com/images/demo/demo4.jpg " > < img loading = " lazy " src = " http://static.runoob.com/images/demo/demo4.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 loading = " lazy " src = " http://www.runoob.com/wp-content/uploads/2016/04/img\_fjords.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 loading = " lazy " src = " http://www.runoob.com/wp-content/uploads/2016/04/img\_forest.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 loading = " lazy " src = " http://www.runoob.com/wp-content/uploads/2016/04/img\_lights.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 loading = " lazy " src = " http://www.runoob.com/wp-content/uploads/2016/04/img\_mountains.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 >

尝试一下 »