zoukankan      html  css  js  c++  java
  • CSS 图片廊:使用 CSS3 的媒体查询来创建响应式图片廊

    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>

  • 相关阅读:
    mybatis技术总结
    eclipse与idea部署项目的区别
    jQuery基础总结
    html页面加载顺序
    JavaScript高级技术总结
    JavaScript基础技术总结
    Node.js 从零开发 web server博客项目[数据存储]
    Node.js 从零开发 web server博客项目[koa2重构博客项目]
    Node.js 从零开发 web server博客项目[安全]
    Node.js 从零开发 web server博客项目[日志]
  • 原文地址:https://www.cnblogs.com/peijz/p/12664575.html
Copyright © 2011-2022 走看看