单列布局_上中下等宽

2021/6/10 18:50:53

编程Tag： 布局设置 height background color 单列 50px 上中下 960px

本文主要是介绍单列布局_上中下等宽，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>单列布局_上中下等宽</title>
	<style type="text/css">
	.container{
		max-width: 960px;/*设置最大宽度为960px*/
		margin: 0 auto;/*设置内部的块级元素水平居中*/
	}
	.header{
		height: 50px;
		background-color: aqua
	}
	.main{
		height: 600px;
		background-color: royalblue
	}
	.footer{
		height: 50px;
		background-color: saddlebrown
	}
	</style>
</head>
<body>
	<h2>基本思路</h2>
	<ol>
		<li>页面的头部，主体,底部全部放在一个容器中统一设置</li>
		<li>容器中的子块只需要设置一下高度即可</li>
	</ol>
	<!-- DOM -->
	<div class="container">
		<div class="header">头部</div>
		<div class="main">主体</div>
		<div class="footer">底部</div>
	</div>
</body>
</html>

这篇关于单列布局_上中下等宽的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

单列布局_上中下等宽

相关编程文章