ul,li小标签大用处（个人感觉）

最新推荐文章于 2023-05-18 18:41:03 发布

柳柳柳......

最新推荐文章于 2023-05-18 18:41:03 发布

阅读量398

点赞数

文章标签： css css3

本文链接：https://blog.csdn.net/qq_57041868/article/details/121553844

版权

html部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/电脑手机双页面.css"/>
	</head>
	<body>
		<div class="he">
			<div class="he-1">
				<h1>OPPO ACCESSORY</h1>
				<ul>
					<li>
						<ul>
							<li>
								<ul>
									<li></li>
									<li>
										<ul>
											<li></li>
											<li></li>
										</ul>
									</li>
								</ul>
							</li>
							<li>
								
							</li>
						</ul>
					</li>
					<li>
						<ul>
							<li>
								
							</li>
							<li>
								<ul>
									<li>
										
									</li>
									<li>
										<ul>
											<li></li>
											<li></li>
										</ul>
									</li>
								</ul>
							</li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</body>
</html>

css部分

*{
	margin: 0;
	padding: 0;
	list-style: none;
}

.he{
	width: 100%;
	background-color: #666;
	height: 200vh;
}

.he-1{
	display: flex;
	flex-direction: column;
	align-items: center;
}

.he-1 > ul{
	display: flex;
	width: 900px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.he-1 > ul > li{
	width: 420px;
	box-sizing: border-box;
	margin-top: 20px;
}

.he-1 > ul > li:nth-child(1){
	
}

.he-1 > ul > li:nth-child(1) > ul{
	display: flex;
	flex-direction: column;
}

.he-1 > ul > li:nth-child(1) > ul > li > ul{
	display: flex;
	width: 420px;
	justify-content: space-between;
}

.he-1 > ul > li:nth-child(1) > ul > li > ul > li:nth-child(1){
	width: 200px;
	height: 300px;
	background-color: #fff;
}
.he-1 > ul > li:nth-child(1) > ul > li > ul > li:nth-child(2){
	width: 200px;
	height: 300px;
}
.he-1 > ul > li:nth-child(1) > ul > li > ul > li:nth-child(2) > ul{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
}
.he-1 > ul > li:nth-child(1) > ul > li > ul > li:nth-child(2) > ul > li:nth-child(1){
	width: 200px;
	height: 140px;
	background-color: #fff;
}
.he-1 > ul > li:nth-child(1) > ul > li > ul > li:nth-child(2) > ul > li:nth-child(2){
	width: 200px;
	height: 140px;
	background-color: #fff;
}

.he-1 > ul > li:nth-child(1) > ul > li:nth-child(2){
	width: 100%;
	height: 180px;
	background-color: #fff;
	margin-top: 20px;
	box-sizing: border-box;
}






.he-1 > ul > li:nth-child(2){
	
}

.he-1 > ul > li:nth-child(2) > ul{
	display: flex;
	flex-direction: column;
}

.he-1 > ul > li:nth-child(2) > ul > li{
	
}
.he-1 > ul > li:nth-child(2) > ul > li:nth-child(1){
	width: 100%;
	height: 180px;
	background-color: #fff;
	margin-bottom: 20px;
	box-sizing: border-box;
}

.he-1 > ul > li:nth-child(2) > ul > li:nth-child(2) > ul{
	display: flex;
	justify-content: space-between;
}

.he-1 > ul > li:nth-child(2) > ul > li:nth-child(2) > ul > li:nth-child(1){
	width: 200px;
	height: 300px;
	box-sizing: border-box;
	background-color: #fff;
}

.he-1 > ul > li:nth-child(2) > ul > li:nth-child(2) > ul > li:nth-child(2) > ul{
	width: 200px;
	height: 300px;
	box-sizing: border-box;
	
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.he-1 > ul > li:nth-child(2) > ul > li:nth-child(2) > ul > li:nth-child(2) > ul > li{
	width: 200px;
	height: 140px;
	background-color: #fff;
}

@media (max-width: 1000px) {
	.he-1 > ul{
		flex-direction: column;
	}
}

我知道我可能有点病，请不要说出来