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. 使用tcp+select实现客户端与客户端的通信

    使用多路复用实现客户端与客户端进行通信: 原理:客户端只要一连上服务器,立马给服务器发送用户名,然后在服务端将newsocketfd存放在同一个结构体中,客户端先给服务器发送数据,然后通过服务器转发给 ...

  2. PHPUnit简介及使用

    一.PHPUnit是什么? 1.它是一款轻量级的PHP测试框架,地址:http://www.phpunit.cn 2.手册:http://www.phpunit.cn/manual/5.7/zh_cn ...

  3. LVS结合keepalived配置测试

     LVS/DR + keepalived配置 注意:前面虽然我们已经配置过一些操作,但是下面我们使用keepaliave操作和之前的操作是有些冲突的,所以若是之前配置过DR,请首先做如下操作:   三 ...

  4. .NET常用第三方库（包）总结

    文章会不定期更新,以下内容均为个人总结,欢迎各位拍砖指正 序列化与反序列化 JSON.NET应该是.NET平台上使用最为广泛的序列化/反序列化包了,ASP.NET和ASP.NET Core中默认序列化 ...

  5. pycharm的用法

    Ctrl / 注释(取消注释)选择的行 Shift + Enter开始新行Ctrl + Enter智能换行TAB Shift+TAB缩进/取消缩进所选择的行Ctrl + Alt + I自动缩进行Ctr ...

  6. Activt工作流数据库对应表的作用

    1.资源库流程规则表 1)       act_re_deployment 部署信息表 2)       act_re_model                流程设计模型部署表 3)       ...

  7. FFMpeg在Ubuntu上的安装和使用

    在Ubuntu Server上编译FFmpeg FFmpeg是最流行的开源视频转码工具包,在Ubuntu上可以直接通过apt-get安装,但是默认的编码器不提供x264这些non-free的编码器,所 ...

  8. Redis限制在规定时间范围内登陆错误次数限制

    在博客里之前有过一篇文章是 <PHP结合Redis来限制用户或者IP某个时间段内访问的次数>,这篇文章的思路也是一样的.看下代码吧 //登录错误次数校验 $key = "logi ...

  9. 深度学习优化算法Momentum RMSprop Adam

    一.Momentum 1. 计算dw.db. 2. 定义v_db.v_dw \[ v_{dw}=\beta v_{dw}+(1-\beta)dw \] \[ v_{db}=\beta v_{db}+( ...

  10. spring-boo hello world程序

    作为一个程序猿,使用了spring好多年,现在有了spring-boot,也想尝尝鲜. 初听spring-boot,觉得很神秘,实际上就是集合了很多组件,再加上一些boot开发的启动和粘合程序. 个人 ...