web前端入门：Html、CSS完成九宫格

最新推荐文章于 2024-07-20 13:41:52 发布

莫得信服

最新推荐文章于 2024-07-20 13:41:52 发布

阅读量2.2k

点赞数 2

分类专栏： web前端文章标签： html5 css 前端

本文链接：https://blog.csdn.net/m0_59587050/article/details/119293446

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

用html、css制作一个简单的九宫格，显示完整的拼图效果。

1.建一个三行三列的表格；

2.设置一个图片背景；

3.使用background-position属性来移动背景图片位置。

关于设置背景属性，可以参考以下文档！

http://css.doyoe.com/properties/background/background-position.htm

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>九宫格</title>
		<style>
			table{
				width: 400px;
				height: 400px;
			}
			td{
				width: 133px;
				height: 133px;
				background-image: url(img/1.jpg);
			}
			td.a{
				background-position: 0px 0px;
			}
			td.b{
				background-position: -133px 0px;
			}
			td.c{
				background-position: -266px 0px;
			}
			td.a1{
				background-position: 0px -133px;
			}
			td.b1{
				background-position: -133px -133px;
			}
			td.c1{
				background-position: -266px -133px;
			}
			td.a2{
				background-position: 0px -266px;
			}
			td.b2{
				background-position: -133px -266px;
			}
			td.c2{
				background-position: -266px -266px;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td class="a"></td>
				<td class="b"></td>
				<td class="c"></td>
			</tr>
			<tr>
				<td class="a1"></td>
				<td class="b1"></td>
				<td class="c1"></td>
			</tr>
			<tr>
				<td class="a2"></td>
				<td class="b2"></td>
				<td class="c2"></td>
			</tr>
		</table>
	</body>
</html>

来看看效果吧。