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. 自动化测试(二) 单元测试junit的Test注解突然不能使用原因以及解决方案

    做为一名刚接触自动化测试的人,才知道单元测试原来也挺有讲究的. 我塞,Test注解报错,没有道理啊~之前好好的,怎么会出现这样~ 原因如下,本人新建了个Test类,报错重名, 难怪提示Test不是注解 ...

  2. IT连创业系列：年终回顾录！

    一年不过一转眼,一光阴的青春又逝去了! 还有不到几天,就要进入新年快乐的祝福包围圈了. 在这归家之际,留文一篇,为这忙碌的一年创业留点回忆! IT连创业这一年走来: 大大小小的深坑,小小大大的困难,一 ...

  3. CNN网络架构演进：从LeNet到DenseNet

    卷积神经网络可谓是现在深度学习领域中大红大紫的网络框架,尤其在计算机视觉领域更是一枝独秀.CNN从90年代的LeNet开始,21世纪初沉寂了10年,直到12年AlexNet开始又再焕发第二春,从ZF ...

  4. Scrapy框架实战-妹子图爬虫

    Scrapy这个成熟的爬虫框架,用起来之后发现并没有想象中的那么难.即便是在一些小型的项目上,用scrapy甚至比用requests.urllib.urllib2更方便,简单,效率也更高.废话不多说, ...

  5. JSP基础点滴

    注释:<%-- 注释 --%> JSP中一共有3种Scriptlet代码.支持与HTML的代码混编. 第一种:<%%>  定义局部变量,编写语句. 第二种:<%!%> ...

  6. Apache、Lighttpd、Nginx 三种web服务器对比

    简介 1.    Apache Apache是世界使用排名第一的Web服务器软件.它可以运行在几乎所有广泛使用的计算机平台上,由于其跨平台和安全性被广泛使用,是最流行的Web服务器端软件之一.Apac ...

  7. 插入排序Insertion Sort

    插入排序:将一个数据插入到一个已经排好序的有序数据序列中,从而得到一个新的.个数+1的有序数列:插入排序适用于少量数据排序,时间复杂度为O(n^2). 实现思路:1.对于一个无序数组,选取第一个元素, ...

  8. easyui验证扩展

    问题描述: 如上所示:当用户添加信息时,必须保证一个队伍一天只能有一条数据.所以在选择了报表日期的时候必须查询数据库里面当前队伍这一天的数据是否存在.如果不存在,即当前日期队伍没有数据,就可以进行数据 ...

  9. appium+Python 启动app（三）登录

    我们根据前面的知识点,用uiautomatorviewer工具来获取我们当前的元素 (注:uiautomatorviewer 是 android sdk 自带的) 知识点:appium的webdriv ...

  10. Shell 编程入门

    首先创建一个文件: 在终端中输入如下命令: vi helloworld.sh 然后按i进行命令编写 下面这句话是必须写的 #!/bin/sh这句话是必须写的 #!/bin/sh a="hel ...