css图片的相关操作

1、案例源码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0}
body{width: 95.2%;margin: 5px auto;}
.image{border: 1px solid darkgray;width: auto;height: auto;float: left;text-align: center;margin: 5px;}
.image p{font-size: 12px;margin-bottom: 4px;}
.image a img{padding: 3px;opacity: 0.92}/*padding和margin都可以实现同样效果*/
.image a img:hover{opacity: 1;}
.image a:hover{background-color: coral;}
</style>
</head>
<body>
<div class="image">
<a href="#"><img src="data:images/f1.jpg"/></a>
<p>美景</p>
</div>
<div class="image">
<a href="#"><img src="data:images/f2.jpg"/></a>
<p>美景</p>
</div>
<div class="image">
<a href="#"><img src="data:images/f3.jpg"/></a>
<p>美景</p>
</div>
<div class="image">
<a href="#"><img src="data:images/f4.jpg"/></a>
<p>美景</p>
</div>
<div class="image">
<a href="#"><img src="data:images/f5.jpg"/></a>
<p>美景</p>
</div>
<div class="image">
<a href="#"><img src="data:images/f6.jpg"/></a>
<p>美景</p>
</div>
<div class="image">
<a href="#"><img src="data:images/f7.jpg"/></a>
<p>美景</p>
</div>
<div class="image">
<a href="#"><img src="data:images/f1.jpg"/></a>
<p>美景</p>
</div>
<div class="image">
<a href="#"><img src="data:images/f2.jpg"/></a>
<p>美景</p>
</div>
<div class="image">
<a href="#"><img src="data:images/f1.jpg"/></a>
<p>美景</p>
</div>
<div class="image">
<a href="#"><img src="data:images/f2.jpg"/></a>
<p>美景</p>
</div>
<div class="image">
<a href="#"><img src="data:images/f3.jpg"/></a>
<p>美景</p>
</div>
</body>
</html>

2、案例效果

css图片的相关操作的更多相关文章

  1. css图片+文字浮动（文字包围效果）

    css图片+文字浮动(文字包围效果): 在网页中,我们有时想实现这个效果,但是 <div id="test"> <img src="gdimages/0 ...

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

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

  3. CSS图片列表

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

  4. 前端学习笔记(zepto或jquery)——对li标签的相关操作（四）

    对li标签的相关操作——五种方式给奇数项li标签设置样式 demo演示: 1 2 3 4 5 6 7 // 详解: 通常我们为多个li添加样式时常用的是使用filter,但我们在第三节中可以看到fil ...

  5. MAC 相关操作解析

    MAC 相关操作解析 OS 显示桌面 f11 F1~F12 fn + F1~F12 撤销重做 command + z command + shift + z 图片预览 选择图片 空格 上下左右 svn ...

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

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

  7. LayUI之table数据表格获取行、行高亮等相关操作

    前言 目前LayUI数据表格既美观有不乏一些实用功能.基本上表格应有的操作已经具备,LayUI作者[贤心]肯定是煞费苦心去优化,此处致敬.但是实话实话,如果单纯那数据表格功能来说,EasUI的数据表格 ...

  8. Android-SD卡相关操作

    SD卡相关操作 1.获取 App 文件目录 //获取 当前APP 文件路径 String path1 = this.getFilesDir().getPath(); 当前APP目录也就是应用的这个目录 ...

  9. vsto-Word相关操作

    //添加页码到页脚 Document doc = Globals.ThisAddIn.Application.ActiveDocument; HeaderFooter hprimary= doc.Se ...

随机推荐

  1. LeetCode - 620. Not Boring Movies

    X city opened a new cinema, many people would like to go to this cinema. The cinema also gives out a ...

  2. IBM优质资源

    springBoot介绍与Demo: https://www.ibm.com/developerworks/cn/java/j-spring-boot-basics-perry/index.html ...

  3. ansible 检查大量客户端的文件与配置情况

    ansible pro_adservers -m command -a 'w' ansible pro_adservers -m command -a 'hostname' ansible pro_a ...

  4. linux 内核参数优化

    Sysctl命令及linux内核参数调整   一.Sysctl命令用来配置与显示在/proc/sys目录中的内核参数．如果想使参数长期保存,可以通过编辑/etc/sysctl.conf文件来实现.   ...

  5. 在windows端和linux端安装Git

    一.Git的安装 1. 在windows端 到地址:https://git-scm.com/downloads 选择对应版本下载后,进行傻瓜式安装即可 2.  在linux端 查看是否安装了git,出 ...

  6. iOS isa指针

    在Objective-C中,任何类的定义都是对象.类和类的实例没有任何本质上的区别.任何对象都有isa指针. isa:是一个Class 类型的指针. 每个实例对象有个isa的指针,它指向对象的类,而C ...

  7. 如何使用supervisor管理你的应用

    1.前言 Supervisor(http://supervisord.org/)是用Python开发的一个client/server服务,是UNIX-like系统下的一个进程管理工具,不支持Windo ...

  8. Jenkins系列——使用checkstyle进行代码规范检查【升级版】

    1.背景 在<Jenkins系列——使用checkstyle进行代码规范检查>一文中完成了ant实现代码规范检查的例子.但存在以下缺陷: 每个作业都需要配置一个不同的checkstyle ...

  9. HDU - 3567 Eight II (bfs预处理 + 康托) [kuangbin带你飞]专题二

    类似HDU1430,不过本题需要枚举X的九个位置,分别保存状态,因为要保证最少步数.要保证字典序最小的话,在扩展节点时,方向顺序为:down, left, right, up. 我用c++提交1500 ...

  10. python file文件操作--内置对象open

    说明: 1. 函数功能打开一个文件,返回一个文件读写对象,然后可以对文件进行相应读写操作. 2. file参数表示的需要打开文件的相对路径(当前工作目录)或者一个绝对路径,当传入路径不存在此文件会报错 ...