【编程词典】CSS 图片廊

CSS 图片廊

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

图片文本描述

这里添加图片文本描述

图片文本描述

这里添加图片文本描述

图片文本描述

这里添加图片文本描述

图片文本描述

这里添加图片文本描述

图片廊

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

实例

<
div

class
=
"
responsive
"
>

<
div

class
=
"
img
"
>

<
a

target
=
"
_blank
"

href
=
"
http://static.ki4.cn/images/demo/demo1.jpg
"
>

<
img

src
=
"
http://static.ki4.cn/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.ki4.cn/images/demo/demo2.jpg
"
>

<
img

src
=
"
http://static.ki4.cn/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.ki4.cn/images/demo/demo3.jpg
"
>

<
img

src
=
"
http://static.ki4.cn/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.ki4.cn/images/demo/demo4.jpg
"
>

<
img

src
=
"
http://static.ki4.cn/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

src
=
"
http://www.ki4.cn/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

src
=
"
http://www.ki4.cn/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

src
=
"
http://www.ki4.cn/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

src
=
"
http://www.ki4.cn/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
>

点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注