zoukankan
html css js c++ java
css图片的相关操作
css图片的相关操作
1、案例源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0}
body{ 95.2%;margin: 5px auto;}
.image{border: 1px solid darkgray; 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="images/f1.jpg"/></a>
<p>美景</p>
</div>
<div class="image">
<a href="#"><img src="images/f2.jpg"/></a>
<p>美景</p>
</div>
<div class="image">
<a href="#"><img src="images/f3.jpg"/></a>
<p>美景</p>
</div>
<div class="image">
<a href="#"><img src="images/f4.jpg"/></a>
<p>美景</p>
</div>
<div class="image">
<a href="#"><img src="images/f5.jpg"/></a>
<p>美景</p>
</div>
<div class="image">
<a href="#"><img src="images/f6.jpg"/></a>
<p>美景</p>
</div>
<div class="image">
<a href="#"><img src="images/f7.jpg"/></a>
<p>美景</p>
</div>
<div class="image">
<a href="#"><img src="images/f1.jpg"/></a>
<p>美景</p>
</div>
<div class="image">
<a href="#"><img src="images/f2.jpg"/></a>
<p>美景</p>
</div>
<div class="image">
<a href="#"><img src="images/f1.jpg"/></a>
<p>美景</p>
</div>
<div class="image">
<a href="#"><img src="images/f2.jpg"/></a>
<p>美景</p>
</div>
<div class="image">
<a href="#"><img src="images/f3.jpg"/></a>
<p>美景</p>
</div>
</body>
</html>
2、案例效果
查看全文
相关阅读:
定时删除日志文件---linux定时清理日志
Packagist 镜像使用方法--composer
laravel 5.5 跨域问题解决方案
linux服务器上面部署ShowDoc 安装Composer
shell之批量新增用户脚本(http-basic-auth)
js转义问题
js之select三级联动
《远见》之读书笔记
Node.js之判断字符串中是否包含某个字符串
微信小程序之页面传参
原文地址:https://www.cnblogs.com/qikeyishu/p/7392354.html
最新文章
zookeeper3.4.6配置实现自动清理日志【转】
Kafka管理工具介绍【转】
Kafka监控KafkaOffsetMonitor【转】
linux的/etc/profile环境变量设置不生效【原创】
Spring详解(一)------概述
Maven详解(八)------ 继承和聚合
Maven详解(七)------ 创建Web工程以及插件原理
Maven详解(六)------ 生命周期
Maven详解(五)------ 坐标的概念以及依赖管理
SpringMVC详解(六)------与json交互
热门文章
SpringMVC详解(五)------参数绑定
Maven详解(四)------ 常用的Maven命令
Maven详解(三)------ Maven工程目录介绍
Maven详解(二)------ Maven的安装配置
php 获取远程图片长宽和大小
nginx 常见正则匹配符号表示
MySQL max_allowed_packet设置及问题
Laravel应用性能调优
Laravel 5 中使用 JWT(Json Web Token) 实现基于API的用户认证
Centos curl ssl 替换 NSS 为 OpenSSL
Copyright © 2011-2022 走看看