CSS 图片廊

一、示例一

代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>CSS教程</title>

<style>

div.img {

    margin: 5px;

    border: 1px solid #ccc;

    float: left;

    width: 180px;

}

div.img:hover {

    border: 1px solid #777;

}

div.img img {

    width: 100%;

    height: auto;

}

div.desc {

    padding: 15px;

    text-align: center;

}

</style>

</head>

<body>

<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 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 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 src="http://static.runoob.com/images/demo/demo4.jpg" alt="图片文本描述" width="300" height="200">

    </a>

    <div class="desc">这里添加图片文本描述</div>

  </div>

</div>

</body>

</html>

效果：

二、示例二

代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>CSS代码</title>

<style>

div.img {

    border: 1px solid #ccc;

}

div.img:hover {

    border: 1px solid #777;

}

div.img img {

    width: 100%;

    height: auto;

}

div.desc {

    padding: 15px;

    text-align: center;

}

* {

    box-sizing: border-box;

}

.responsive {

    padding: 0 6px;

    float: left;

    width: 24.99999%;

}

@media only screen and (max-width: 700px){

    .responsive {

        width: 49.99999%;

        margin: 6px 0;

    }

}

@media only screen and (max-width: 500px){

    .responsive {

        width: 100%;

    }

}

.clearfix:after {

    content: "";

    display: table;

    clear: both;

}

</style>

</head>

<body>

<h2 style="text-align:center">响应式图片相册</h2>

<div class="responsive">

  <div class="img">

    <a target="_blank" href="img_fjords.jpg">

      <img src="http://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">

    </a>

    <div class="desc">Add a description of the image here</div>

  </div>

</div>

<div class="responsive">

  <div class="img">

    <a target="_blank" href="img_forest.jpg">

      <img src="http://www.runoob.com/wp-content/uploads/2016/04/img_forest.jpg" alt="Forest" width="600" height="400">

    </a>

    <div class="desc">Add a description of the image here</div>

  </div>

</div>

<div class="responsive">

  <div class="img">

    <a target="_blank" href="img_lights.jpg">

      <img src="http://www.runoob.com/wp-content/uploads/2016/04/img_lights.jpg" alt="Northern Lights" width="600" height="400">

    </a>

    <div class="desc">Add a description of the image here</div>

  </div>

</div>

<div class="responsive">

  <div class="img">

    <a target="_blank" href="img_mountains.jpg">

      <img src="http://www.runoob.com/wp-content/uploads/2016/04/img_mountains.jpg" alt="Mountains" width="600" height="400">

    </a>

    <div class="desc">Add a description of the image here</div>

  </div>

</div>

<div class="clearfix"></div>

<div style="padding:6px;">

  <h4>重置浏览器大小查看效果</h4>

</div>

</body>

</html>

效果：

CSS 图片廊的更多相关文章

  1. CSS：CSS 图片廊

    ylbtech-CSS:CSS 图片廊 1.返回顶部 1. CSS 图片廊 以下是使用CSS创建图片廊: 图片廊 以下是使用 CSS 创建图片廊: 实例 <div class="res ...

  2. 几种垂直居中的方式及CSS图片替换技术

    由于块级元素的高度是可以设置的,所以对于块级元素的垂直居中比较简单. 方法一: 在不定高的情况下,把元素的上下内边距设为同一个值即可实现,即padding :10px   0; 以上方法针对块级元素和 ...

  3. css图片叠加和底部定位

    css图片叠加和底部定位 css图片叠加 两张图片需要叠在一起显示,如何定位 容器先对定位 第一张图片正常摆放 第二张图片绝对定位,top:0px 这样便实现了两张图片叠加在一起了,设置z-index ...

  4. 转：利用node压缩、合并js,css,图片

    1.安装nodejs http://nodejs.org/ 2.安装各自的node package js我用的是UglifyJS github地址:https://github.com/mishoo/ ...

  5. CSS图片列表

    1.效果图: 2.Example Source Code <h3><a href="http://www.52css.com/">我爱CSS画廊</a ...

  6. 漂亮的自适应宽度的多色彩CSS图片按钮

    一.素材               二.效果 三.CSS *{padding:0;margin:0} /*----------------------------------- 自适应宽度图片按钮 ...

  7. css图片垂直居中

    css图片垂直居中一.style代码 .case-pic{ height: 125px; position: relative; text-align: center } .case-pic span ...

  8. css 图片 圆形显示区域

    css 图片 圆形显示区域 css 和 div 实现 方形图片 圆形显示 点击下载

  9. CSS图片翻转动画技术详解

    因为不断有人问我,现在我补充一下:IE是支持这种技术的!尽管会很麻烦.需要做的是旋转front和back元素,而不是旋转整个容器元素.如果你使用的是最新版的IE,可以忽略这一节.IE10+是支持的,I ...

随机推荐

  1. 在用VMware虚拟机的时候，有时会发现打开虚拟机时提示“该虚拟机似乎正在使用中。如果该虚拟机未在使用，请按“获取所有权(T)”按钮获取它的所有权。否则，请按“取消(C)”按钮以防损坏。配置文件: D:\win10x64\Windows 10 x64.vmx。”这是由于虚拟机未正常关闭引起的，下面看看解决办法

    我们首先点击“获取所有权(T)”按钮,会发现弹出一个窗口,显示“ 无法打开虚拟机: D:\win10x64\Windows 10 x64.vmx获取该虚拟机的所有权失败.主机上的某个应用程序正在使用该 ...

  2. 【黑金原创教程】【Modelsim】【第六章】结束就是开始

    声明:本文为黑金动力社区(http://www.heijin.org)原创教程,如需转载请注明出处,谢谢! 黑金动力社区2013年原创教程连载计划: http://www.cnblogs.com/al ...

  3. ehcache 的 配置文件: ehcache.xml的认识

    <ehcache> <!-- 指定一个目录:当 EHCache 把数据写到硬盘上时, 将把数据写到这个目录下. --> <diskStore path="d:\ ...

  4. Hibernate-sessio缓存的操作

    首先咋们看一个图: flush:首先箭头是由缓存指向数据库,即当我调用 Session.flush()方法时它会强制使数据库的记录跟缓存 中的对象状态保持同步 ,如果不一致,就会发送Sql语句 ,保持 ...

  5. kubernetes基础知识：限制POD和容器运行的CPU、内存

    限制运行内存 https://kubernetes.io/docs/tasks/configure-pod-container/assign-memory-resource/ 先看一个pod的yaml ...

  6. iOS中navigationItem修改标题的颜色

    UIColor * color = [UIColor redColor];//这里我们设置的是颜色,NSDictionary * dict = [NSDictionary dictionaryWith ...

  7. file结构中的private_data

    private_data是Linux下连接VFS文件系统框架和不同文件/文件系统底层实现之间的一个核心数据结构,虽然它只是一个指针,但是一个指针可以解决所有问题. 因 为file是VFS框架的一个基本 ...

  8. Python面象对象与类

    # -*- coding: utf-8 -*- # @Date: 2017-08-26 # @Original: from collections import namedtuple from col ...

  9. 并发编程 - io模型 - 总结

    1.提交任务得方式: 同步:提交完任务,等结果,执行下一个任务 异步:提交完,接着执行,异步 + 回调 异步不等结果,提交完任务,任务执行完后,会自动触发回调函数2.同步不等于阻塞: 阻塞:遇到io, ...

  10. 转：docker的核心技术深度剖析

    一.docker是什么 Docker的英文本意是码头工人,也就是搬运工,这种搬运工搬运的是集装箱(Container),集装箱里面装的可不是商品货物,而是任意类型的App,Docker把App(叫Pa ...