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. gitlab项目迁移

    ALL Git* => Gitlab Nothing, Just copy the git URL to gitlab(类似于 fork) 使用 Git Mirror 無痛轉移 Git Serv ...

  2. docker cs50 ide 安装

    ECS上搭建Docker(CentOS7): https://help.aliyun.com/document_detail/51853.html docker官方文档: https://docs.d ...

  3. SSE图像算法优化系列十七：多个图像处理中常用函数的SSE实现。

    在做图像处理的SSE优化时,也会经常遇到一些小的过程.数值优化等代码,本文分享一些个人收藏或实现的代码片段给大家. 一.快速求对数运算 对数运算在图像处理中也是个经常会遇到的过程,特备是在一些数据压缩 ...

  4. ARM平台的虚拟化介绍

    本篇博文主要介绍虚拟化的基本思想以及在arm平台如何做虚拟化,arm提供的硬件feature等等. 虚拟化技术简介 虚拟化技术 虚拟化是一个概念,单从这个概念的角度来看,只要是用某一种物品去模拟另一种 ...

  5. 删除表中的所有记录 ID从1开始

    TRUNCATE TABLE 删除表中的所有行,而不记录单个行删除操作.语法TRUNCATE TABLE nameTRUNCATE TABLE 在功能上与不带 WHERE 子句的 DELETE 语句相 ...

  6. Hibernate 一对一中的一些问题

    1.对于想查询一对一种一方为空的时候使用 例如一个用户对应一个人,则要从人查找没有用户的人员的话, 使用hql语句是查询不到的 我今天也碰到了这个问题,研究了下,可以用以下语句查出来:from Per ...

  7. Yii高级模板的安装

    1,如果你使用composer来安装的话,执行下边两条命令. composer global require "fxp/composer-asset-plugin:^1.2.0" ...

  8. MysqL主主复制_模式之日志点复制

    主主复制即在两台MySQL主机内都可以变更数据,而且另外一台主机也会做出相应的变更,可以起到一定的压力分担等作用. 测试两台虚拟机IP分别为: 192.168.136.131.192.168.136. ...

  9. hihoCoder 1015 KMP算法

    题意:经典字符串匹配算法.给定原串和模式串,求模式串在原串中出现的次数.算法讲解 AC代码 #include <cstdio> #include <cmath> #includ ...

  10. SMJobBless官方Demo笔记

    SMJobBless是苹果官方提供的用于"MacOS app获取root权限"的demo. 具体思路 使用Security.framework和ServiceManagement. ...