CSS_图片廊&透明度

最新推荐文章于 2022-04-28 20:27:55 发布

「已注销」

最新推荐文章于 2022-04-28 20:27:55 发布

阅读量214

点赞数

分类专栏： HTML学习

本文链接：https://blog.csdn.net/dolola/article/details/79181300

版权

HTML学习专栏收录该内容

37 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>practice</title> 

<style>
		div.img
		{
			margin:5px;
			border:1px solid #ccc;
			float:left;
			width:180px;
		}
		div.img:hover
		{
			border:1px solid #777;
		}
		div.img img
		{
			width:100%;
			height:100px;
		}
		div.desc
		{
			padding:15px;
			text-align:center;
			
		}
		#opacity
		{
			opacity:0.4;
		}
		#opacity:hover
		{
			opacity:1;
		}
</style>
	
</head>

<body>
	<div class="responsive">
		<div class="img">
			<a target="_blank" href="E:\HTML\pictures\316081.jpg">
				<img src="E:\HTML\pictures\316081.jpg" alt="图片描述" width="300" height="200">
			</a>
			<div class="desc">这里添加图片描述</div>
		</div>
	</div>
	
	<div class="responsive">
		<div class="img">
			<a target="_blank" href="E:\HTML\pictures\316168.jpg">
				<img src="E:\HTML\pictures\316168.jpg" alt="图片描述" width="300" height="200">
			</a>
			<div class="desc">这里添加图片描述</div>
		</div>
	</div>
	
	<div class="responsive">
		<div class="img">
			<a target="_blank" href="E:\HTML\pictures\316192.jpg">
				<img src="E:\HTML\pictures\316192.jpg" alt="图片描述" width="300" height="200">
			</a>
			<div class="desc">这里添加图片描述</div>
		</div>
	</div>
	
	<div class="responsive">
		<div class="img">
			<a target="_blank" href="E:\HTML\pictures\316216.jpg">
				<img src="E:\HTML\pictures\316216.jpg" alt="图片描述" width="300" height="200">
			</a>
			<div class="desc">这里添加图片描述</div>
		</div>
	</div>
	
	<img id="opacity" src="E:\HTML\pictures\316216.jpg" alt="图片描述" width="300" height="200">
</body>	
</html>

包裹关系

「已注销」

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS_图片廊&透明度

practice div.img { margin:5px; border:1px solid #ccc; float:left; width:180px; } div.img:hover { border:1px solid #777; } div.img img { width:100%; height:100px
复制链接

扫一扫