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. 模拟window桌面实现

    正在开发中的游戏有个全屏功能--可以在window桌面背景上运行,就像一些视频播放器在桌面背景上播放一样的,花了个上午整了个Demo放出来留个纪念. 实现功能:显示图标,双击图标执行相应的程序,右击图 ...

  2. 如何访问局域网的Access数据库？

    1]用共享打印机来打开文件共享, 2]把Access文件.mdb所在的文件夹 共享,然后其他的就和本地一样了. 设置如下: Data Source="\\192.168.7.49\user\ ...

  3. java基础---->string字面量的使用

    这里简单的理解一下java中关于string字面量的知识,关于字节码可以使用java自带的javap工具查看. string字面量 一.直接贴出测试的代码 A string literal alway ...

  4. 用Dialog 做自定义动画，加播放监听

    final Dialog customDialog = new Dialog(this); customDialog.setTitle(R.string.attention); customDialo ...

  5. linux shell 脚本使用

    定义变量 fileName=text.txt 变量名称fileName,变量名称text.txt 使用变量 $fileName 用美元符号$开头,后面加变量名称,即可使用变量 使用用户输入参数 打印第 ...

  6. powerdesinger导出数据库说明文档

    设置表结构要展示的属性,以及各个属性的展示列宽 不显示标题 右键单击items,选择format,然后Available栏中选择ListText选项卡,设置表格边框 保存为模板,Report-> ...

  7. 【教程】AI画放射图

    第一步:画矩形作图宇宙键shift 第二步:分为网格 第三步:直接选择工具 第四步:填充交叉色,这步不再敖述: 第五步:视图--轮廓:快捷键ctrl+y; 第六步:直接选择工具选择除边框以外的所有节点 ...

  8. debian卸载旧内核

    debian卸载旧内核要先看看有哪些旧的内核,用命令: uname -a dpkg --get-selections |grep linux 如果你的内核是以kernel开头的就把上面的linux改成 ...

  9. 深入学习AngularJS中数据的双向绑定机制

    来自:http://www.jb51.net/article/80454.htm Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持 ...

  10. jQuery中animate设置属性的一个问题

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...