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. C#三种字符串拼接方法的效率对比

    C#字符串拼接的方法常用的有:StringBuilder.+.string.Format.List<string>.使用情况不同,效率不同. 1.+的方式 string sql = &qu ...

  2. 五款超实用的开源 SVG 工具

    英文链接:Idrsolutions SVG(Scalable Vector Graphics)是基于 XML 的矢量图像格式,用户可灵活运用图像进行搜索.索引.脚本以及压缩(来自:湖北教育考试网).S ...

  3. 【BZOJ1855】[Scoi2010]股票交易 DP+单调队列

    [BZOJ1855][Scoi2010]股票交易 Description 最近lxhgww又迷上了投资股票,通过一段时间的观察和学习,他总结出了股票行情的一些规律. 通过一段时间的观察,lxhgww预 ...

  4. 『SharePoint 2010』Sharepoint 2010 Form 身份认证的实现（基于AD）

    一.进管理中心,创建一个应用程序,配置如下: 二.填端口号,和选择form身份认证,以及填写成员和角色,其他都默认就可以了 三.使用SharePoint 2010 Management Shell在里 ...

  5. Hadoop伪分布安装详解(五)

    目录: 1.修改主机名和用户名 2.配置静态IP地址 3.配置SSH无密码连接 4.安装JDK1.7 5.配置Hadoop 6.安装Mysql 7.安装Hive 8.安装Hbase 9.安装Sqoop ...

  6. 透明 Transparent connections through HTTP proxies.

    透明语境: 5.7层模型中数据链路层:透明传输: 谈谈如何使用Netty开发实现高性能的RPC服务器 - Newland - 博客园 http://www.cnblogs.com/jietang/p/ ...

  7. ntopng基础

    当你在本地网络监控网络流量,根据流量大小.监控平台/接口.数据库类型等等,可以有许多不同的选择.ntopng是一套开源(遵循GPLv3协议)网络流量分析解决方案,提供基于web界面的实时网络流量监控. ...

  8. 【keras框架】

    更高级别的封装.更简单的api,以tensorflow.theano为后端,支持更多的平台 读取网络模型后生成网络结构图 读取 from keras.models import load_model ...

  9. Bad Hair Day---poj3250（栈的运用）

    题目链接:http://poj.org/problem?id=3250 题意: n个牛排成一列向右看,牛i能看到牛j的头顶,当且仅当牛j在牛i的右边并且牛i与牛j之间的所有牛均比牛i矮. 设牛i能看到 ...

  10. Keywords Search---hdu2222（AC自动机 模板）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2222 一个常见的例子就是给出n个单词,再给出一段包含m个字符的文章,让你找出有多少个单词在文章里出现过 ...