软通乐学_jasonwx20201029随堂代码

程序员文章站 2022-04-30 19:14:42

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<!-- 内嵌式 
		<style type="text/css"></style>
	-->
	<!-- 链入式 -->
	<link rel="stylesheet" type="text/css" href="css/index.css" >
</head>
<body>
	<!--  -->
	<div class="container">
		
		<div class="box">
			<img src="img/2.jpg" title="" alt="" class="img_1" >
			<img src="img/1.jpg" title="" alt="" class="img_0" >
			<p class="title" >图片_1</p>
		</div>
		<div class="box">
			<img src="img/2.jpg" title="" alt="" class="img_1" >
			<img src="img/1.jpg" title="" alt="" class="img_0" >
			<p class="title" >图片_1</p>
		</div>
		<div class="box">
			<img src="img/2.jpg" title="" alt="" class="img_1" >
			<img src="img/1.jpg" title="" alt="" class="img_0" >
			<p class="title" >图片_1</p>
		</div>
		<div class="box">
			<img src="img/2.jpg" title="" alt="" class="img_1" >
			<img src="img/1.jpg" title="" alt="" class="img_0" >
			<p class="title" >图片_1</p>
		</div>
		
	</div>
	
</body>
</html>

* {
	margin:0;
	padding:0;
}
.container {
	width:1200px;
	height:500px;
	border:1px solid #000;
}
.box {
	width:20%;
	height:300px;
	border:1px solid #fff;
	float:left;
	margin-right:5px;
	/*定位position*/
	position:relative;
}

/*鼠标悬停事件*/
.box:hover {
	border:1px solid red;
	/*光标变小手*/
	cursor:pointer;
	color:red;
}
.box:hover .img_0 {
	display:none;
}
img {
	width:90%;
	height:90%;
	/*margin-left:5%;*/
	/*绝对定位*/
	position:absolute;
	left:5%;
}
.title {
	text-align:center;
	position:relative;
	top:90%;
	/*left:40%;*/
	
}

本文地址：https://blog.csdn.net/JsonWuxin/article/details/109369198