分割、柱子、list

最新推荐文章于 2024-02-02 09:00:22 发布

小菜鸟码住

最新推荐文章于 2024-02-02 09:00:22 发布

阅读量111

点赞数

分类专栏： h5知识

本文链接：https://blog.csdn.net/hfyldx/article/details/102232825

版权

h5知识专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			li{
				list-style-type: none;
			}
			.nav{
				width: 1200px;
				margin: 0 auto;
				column-count: 4;
				column-gap: 40px;
				border: 2px solid blue;
				column-rule: 3px solid green;
			}
			.nav li{
				margin-bottom: 40px;
				height: 100px;
				border: 3px solid red;
			
			}
			/*.nav div{
				border: 2px solid blue;
				column-span: all;
			}*/
		</style>
	</head>
	<body>
		<ul class="nav">
			<li><img src="img/musicBtn.png"/></li>
			<li>222222</li>
			<li>333352533</li>
			<li>111111</li>
			<li>2224535222</li>
			<li>3335245333</li>
			<li>222525222</li>
			<li>3333325233</li>
		</ul>
	</body>
</html>

在这里插入图片描述