CSS 图片廊 -HTML教程CSS5.net


CSS 图片廊

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

图片文本描述
这里添加图片文本描述
图片文本描述
这里添加图片文本描述
图片文本描述
这里添加图片文本描述
图片文本描述
这里添加图片文本描述






图片廊

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

实例

<div class="responsive">

<div class="img">

<a target="_blank"href="http://static.css5.net/images/demo/demo1.jpg">

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

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

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

<img src="http://static.css5.net/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.css5.net/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.css5.net/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.css5.net/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.css5.net/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>


尝试一下 ?


Copyright © 2017 CSS5.NET教程.CSS5 内容仅用于学习和测试参考。 css5.net All Rights Reserved 蜀ICP备15003849号-16