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. [SCOI2010]序列操作[分块or线段树]

    #include<cstdio> #include<iostream> #define lc k<<1 #define rc k<<1|1 using ...

  2. js功能实现的特效--距离新年还有多少天

    代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> & ...

  3. Java IO 修改文件名

    /** *//**文件重命名 * @param path 文件目录 * @param oldname 原来的文件名 * @param newname 新文件名 */ public void renam ...

  4. Servlet------>jsp自定义标签3（不显示余下jsp内容）

    2.自定义标签控制,jsp页面余下标签是否继续执行 EndTag.java package tag; import javax.servlet.jsp.JspException; import jav ...

  5. 日志输出：控制台和log文件输出日志

    self_log.py 中 import os import logging import time # 如果日志文件夹不存在,则创建 log_dir = "log" # 日志存放 ...

  6. （0.2.4）Mysql安装——yum源安装

    转自:https://www.cnblogs.com/jimboi/p/6405560.html Centos6.8通过yum安装mysql5.7 1.下载好对应版本的yum源文件 2.安装用来配置m ...

  7. JavaWeb—Session与Cookie

    概念 会话:指从一个浏览器窗口打开到关闭期间的一系列动作(可简单理解为用户开一个浏览器,点击多个链接,访问服务器多个web资源,然后关闭浏览器). HTTP协议是无状态协议:每次连接(比如同一个网站的 ...

  8. 七、Mosquito 集群搭建

    本章主要讲述Mosquitto 集群搭建的两种方式 1.进行双服务器搭建 2.进行多服务器搭建 一.Mosquitto的分布式集群部署 如果需要做并发量很大的时候就需要考虑做集群处理,但是我在查找资料 ...

  9. Delphi程序调用C#.Net编译的DLL并打开窗体(详解)

    Delphi程序调用C#.Net编译的DLL并打开窗体(详解)最近用C#.Net写了一个公用模块, 本以为仅提供给.Net程序使用, 但是领导要求把这些功能提供给旧系统使用, 天啦, 几套旧系统全是D ...

  10. 一步一步学EF系列四【升级篇 实体与数据库的映射】

    之前的三张为基础篇,如果不考虑架构问题,做一般的小程序,以足够用了.基本的增删改查也都有了.但是作为学习显然是不够的.通过之前三章的学习,有没有发现这样写有什么问题,有没有觉得繁琐的?可能有人会说,之 ...