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. xftp上传失败之解决办法

    修改/usr/local 文件夹权限 rwx 为不可读不可写第三方不可访问 报错 传输状态 恢复文件夹/usr/local 读写第三方访问权限 成功上传

  2. Vue的土著指令和自定义指令

    1.土著指令 当我开始学习Vue的时候,看官网的时候看到了"指令"两个字.我愣住了,what?指令是啥啊?后来继续往下看,像这种什么"v-for""v ...

  3. centos 6.8 下安装redmine(缺陷跟踪系统)

    一.实验环境 centos6.8 64位 所需安装包: ruby-2.3.4.tar.gz.rubygems-1.8.25.tgz.redmine-2.3.2.tar.gz 二.安装步骤 1.安装必要 ...

  4. php正则判断字符串是否含有中文

    <?php $str = '若你安好便是晴天'; if (preg_match('/^[\x{4e00}-\x{9fa5}]+$/u', $str)>0) { echo '全是中文'; } ...

  5. [记录]Python2.7使用argparse模块

    # -*- coding: utf8 -*- import argparse #ArgumentParser.add_argument(name or flags-[, action][, nargs ...

  6. Java经典编程题50道之二十八

    对10个数进行排序. public class Example28 {    public static void main(String[] args) {        int[] s = { 5 ...

  7. 浅谈扩展欧几里得算法(exgcd)

    在讲解扩展欧几里得之前我们先回顾下辗转相除法: \(gcd(a,b)=gcd(b,a\%b)\)当a%b==0的时候b即为所求最大公约数 好了切入正题: 简单地来说exgcd函数求解的是\(ax+by ...

  8. bzoj 3576[Hnoi2014]江南乐 sg函数+分块预处理

    3576: [Hnoi2014]江南乐 Time Limit: 30 Sec  Memory Limit: 512 MBSubmit: 1929  Solved: 686[Submit][Status ...

  9. Java集合框架（二）—— HashSet、LinkedHashSet、TreeSet和EnumSet

    Set接口 前面已经简绍过Set集合,它类似于一个罐子,一旦把对象'丢进'Set集合,集合里多个对象之间没有明显的顺序.Set集合与Collection基本上完全一样,它没有提供任何额外的方法. Se ...

  10. PAT1117. Eddington Number

    思路:搞懂题意是关键–E满足有共有E天骑车的距离超过E米,求最大的E! 将数组排序,我们假设最大的E是e,e满足条件有e天骑车超过e米,并且e+1不满足有e+1天骑车超过e+1米.那么我们可以逆序统计 ...