学习笔记（响应式布局）

最新推荐文章于 2024-09-12 18:02:32 发布

抱书欲眠

最新推荐文章于 2024-09-12 18:02:32 发布

阅读量75

点赞数

文章标签： html css flex

本文链接：https://blog.csdn.net/weixin_47473788/article/details/116173643

版权

下面展示一些 内联代码片。

// A code block
var foo = 'bar';

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="layout">
			<div id="top"></div>
			<div id="main">
				<div>
					<li>分类1</li>
					<li>分类2</li>
					<li>分类3</li>
					<li>分类4</li>
					<li>分类5</li>
					<li>分类6</li>
					<li>分类7</li>
					<li>分类8</li>
				</div>
				<div>
					<li>图片1</li>
					<li>图片2</li>
					<li>图片3</li>
					<li>图片4</li>
					<li>图片5</li>
					<li>图片6</li>
					<li>图片7</li>
					<li>图片8</li>
				</div>
			</div>
		</div>
	</body>
</html>
<style >
	@media (min-width:1000px){
		*{
			padding: 0;
			margin: 0;
			background-color: #FFFFFF;
		}
		#layout{
			display: flex;
			width: 80%;
			flex-direction: column;
			margin: 0 auto;
		}
		#top{
			background-color: #005CBF;
			width: 100%;
			flex: 0 0 50px;
			margin: 0 auto;
		}
		#main{
			flex: 0 0 100%;
			flex-direction: row;
			display: flex;
		}
		#main div:first-child{
			flex: 0 0 10%;
			background-color: #f5f5f5;
			list-style-type: none;
			display: flex;
			flex-wrap: wrap;
			border-left: 1px solid white ;
			border-right: 1px solid white ;
			margin-top: 10px;
		}
		#main div:first-child li{
			flex: 0 0 100%;
			flex-wrap: wrap;
			line-height: 40px;
			height: 40px;
			text-align: center;
			background-color: #999999;
			border-bottom: 1px solid white;
		}
		#main div:nth-child(2){
			flex: 0 0 90%;
			background-color: #f5f5f5;
			list-style-type: none;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
		}
		#main div:nth-child(2) li{
			flex: 0 0 30%;
			height: 120px;
			text-align: center;
			background-color: #008000;
			border-bottom: 1px solid white;
			margin-top: 10px;
		}
	}
	@media (min-width: 350px) and (max-width: 1000px) {
		*{
			padding: 0;
			margin: 0;
			background-color: #FFFFFF;
		}
		#layout{
			display: flex;
			width: 100%;
			flex-direction: column;
			margin: 0 auto;
		}
		#top{
			background-color: #005CBF;
			width: 100%;
			flex: 0 0 50px;
			margin: 0 auto;
		}
		#main{
			flex: 0 0 100%;
			flex-direction: row;
			display: flex;
			flex-wrap: wrap;
		}
		#main div:first-child{
			flex: 0 0 100%;
			background-color: #f5f5f5;
			list-style-type: none;
			display: flex;
			flex-wrap: wrap;
			border-left: 1px solid white ;
			border-right: 1px solid white ;
			margin-top: 10px;
			align-content: flex-start;
		}
		#main div:first-child li{
			flex: 0 0 20%;
			flex-wrap: wrap;
			line-height: 40px;
			height: 40px;
			text-align: center;
			background-color: #999999;
			border-bottom: 1px solid white;
		}
		#main div:nth-child(2){
			flex: 0 0 100%;
			background-color: #f5f5f5;
			list-style-type: none;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
		}
		#main div:nth-child(2) li{
			flex: 0 0 30%;
			height: 120px;
			text-align: center;
			background-color: #008000;
			border-bottom: 1px solid white;
			margin-top: 10px;
		}
	}
</style>