js实现九宫格布局效果

最新推荐文章于 2023-09-06 19:36:09 发布

阡陌路人

最新推荐文章于 2023-09-06 19:36:09 发布

阅读量1.4k

点赞数

分类专栏： js特效篇文章标签： javascript html5 css

本文链接：https://blog.csdn.net/Iwokei/article/details/106339446

版权

本文介绍了如何利用JavaScript、HTML5和CSS实现一个九宫格布局的效果。通过示例代码详细展示了实现过程。

摘要由CSDN通过智能技术生成

效果

在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
   
				margin: 0;
				padding: 0;
				
			}
			#container{
   
				width: 1200px;
				margin:0 auto;
				
			}
			#top{
   
				padding: 20px;
				
			}
			#bottom{
   
				position: relative;
			}
			.box{
          //每一个小块
				width: 220px;
				height: 360px;
				margin: 0 15px 15px 0;
				background-color:#e8e8e8;
				
			}
			.box img{
   
				width: 220px;
				height: 300px;
			}
			.box p{
   
				color: orangered;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="top">
				<button id="btn1">3列</button>