H5作业3

最新推荐文章于 2022-06-26 09:44:29 发布

保持可爱forever

最新推荐文章于 2022-06-26 09:44:29 发布

阅读量474

点赞数 3

分类专栏： H5作业集合文章标签： H5

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/W_C_X/article/details/87856899

版权

H5作业集合专栏收录该内容

15 篇文章 2 订阅

订阅专栏

2月21:

1，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>wcx's homework</title>
	    <style type="text/css">
	    	#tab{
	    		width: 300px;
	    		height: 300px;
	    		background: url(img/2.jpg) no-repeat;
	    		background-size: 300px;
	    	}
	    	#tab td{
	    		background: url(img/h.jpg) no-repeat 100px 100px;
	    		background-size: 300px;
	    	}
	    	#tab1:hover{
	    		background-position: left top;
	    	}
	    	#tab2:hover{
	    		background-position: center top;
	    	}
	    	#tab3:hover{
	    		background-position: right top; 
	    	}
	    	#tab4:hover{
	    		background-position: left center;
	    	}
	    	#tab5:hover{
	    		background-position: center center;
	    	}
	    	#tab6:hover{
	    		background-position: right center; 
	    	}
	    	#tab7:hover{
	    		background-position: left bottom;
	    	}
	    	#tab8:hover{
	    		background-position: center bottom;
	    	}
	    	#tab9:hover{
	    		background-position: right bottom;
	    	}
	    </style>
	</head>
	<body>
		<table id="tab" border="1px" cellspacing="0">
			<tr>
				<td id="tab1"></td>
				<td id="tab2"></td>
				<td id="tab3"></td>
			</tr>
			<tr>
				<td id="tab4"></td>
				<td id="tab5"></td>
				<td id="tab6"></td>
			</tr>
			<tr>
				<td id="tab7"></td>
				<td id="tab8"></td>
				<td id="tab9"></td>
			</tr>
		</table>
	</body>
</html>

2，效果展示：

鼠标经过会出现另外一个图片的效果