css手写九宫格布局

最新推荐文章于 2024-06-22 23:09:06 发布

洪洪呀

最新推荐文章于 2024-06-22 23:09:06 发布

阅读量383

点赞数

本文链接：https://blog.csdn.net/H_hongai/article/details/120664952

版权

css3 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

css手写九宫格布局

能实现九宫格布局的方式有很多种比如 flex grid table float 等等下面整理的是flex布局写的一起看看吧

html部分实现布局

<body>
		<div>
			<ul>
				<li> 我是1 </li>
				<li> 我是2 </li>
				<li> 我是3 </li>
				<li> 我是4 </li>
				<li> 我是5 </li>
				<li> 我是6 </li>
				<li> 我是7 </li>
				<li> 我是8 </li>
				<li> 我是9 </li>
			</ul>
		</div>
	</body>

css部分调整样式

<style>
		body {
			width: 800px;
			margin: 0 auto;
		}

		ul {
			padding: 0;
			display: flex;
			flex-wrap: wrap;
			width: 100%;
			height: 100%;
			margin-top: 100px;
		}

		li {
			width: 30%;
			height: 100px;
			margin-right: 5%;
			margin-bottom: 5%;
			list-style: none;
			border-radius: 6px;
			background: palevioletred;
			line-height: 100px;
			text-align: center;
			color: #EEEEEE;
		}

		li:nth-of-type(3n) {
			margin-right: 0;
		}

		li:nth-of-type(n+7) {
			margin-bottom: 0;
		}
	</style>

效果图

有用的话就给我点个赞和关注吧

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

洪洪呀

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css手写九宫格布局

css手写九宫格布局能实现九宫格布局的方式有很多种比如 flex grid table float 等等下面整理的是flex布局写的一起看看吧html部分实现布局<body> <div> <ul> <li> 我是1 </li> <li> 我是2 </li> <li> 我是3 </li> <li> 我是4 </li>
复制链接

扫一扫