CSS7 CSS网页布局经典的行布局基础行布局水平居中：margin:0auto;；position属性设置absol

经典的行布局

基础行布局

水平居中：margin: 0 auto;

；

position属性设置absolute，意为相对最近的父元素偏移，如果没有父元素，相对浏览器框定位

多行布局

<!DOCTYPE html>
<html>
<head>
	<title>布局</title>
	<style type="text/css">
		body{margin: 0;padding: 0;color: white;text-align: center;font-size: 16px;}
		.header{width: 100%;
			height: 50px;
			background-color: #333;
			margin: 0 auto;
			position: fixed;
			}
		.banner{width: 800px;
			height: 200px;
			background-color: pink;
			margin: 0 auto;
			line-height: 300px;
			padding-top: 50px;/*取消头部对banner的覆盖*/
		}
		.container{
			width: 800px;
			height: 500px;
			background-color: #4c77f2;
			margin: 0 auto;
		}
		.footer{
			width: 800px;
			height: 50px;
			background-color: #333;
			margin: 0 auto;
			line-height: 50px;
		}
	</style>
</head>
<body>
	<div class="header">页面头部</div>
	<div class="banner">页面banner图</div>
	<div class="container">页面内容</div>
	<div class="footer"> 页面底部</div>
</body>
</html>

实现：

经典的列布局

两列布局与自适应

给两个盒子分别设置float:left和float:right属性

<!DOCTYPE html>
<html>
<head>
	<title>布局</title>
	<style type="text/css">
		body{margin: 0;padding: 0;color: white;}
		.container{
			width: 90%;
			height: 1000px;
			margin: 0 auto;
			
		}
		.left{width: 60%;
			height: 1000px;
			background-color: blue;
			float: left;}
		.right{width: 40%;
			height: 1000px;
			background-color: pink;
			float: right;}
	</style>
</head>
<body>
	
	<div class="container">
		<div class="left">页面左侧</div>
		<div class="right">页面右侧</div>
	</div>
	
</body>
</html>

三列布局与自适应

<!DOCTYPE html>
<html>
<head>
	<title>布局</title>
	<style type="text/css">
		body{margin: 0;padding: 0;color: white;}
		.container{
			width: 1000px;
			margin: 0 auto;
			
		}
		.left{width: 300px;
			height: 1000px;
			background-color: blue;
			float: left;}
		.right{width: 200px;
			height: 1000px;
			background-color: pink;
			float: right;}
		.middle{
			width: 500px;
			height: 1000px;
			background-color: green;
			float: left;
		}
	</style>
</head>
<body>
	
	<div class="container">
		<div class="left">页面左侧</div>
		<div class="middle"> 页面中间</div>
		<div class="right">页面右侧</div>
	</div>
	
</body>
</html>

混合布局

<!DOCTYPE html>
<html>
<head>
	<title>布局</title>
	<style type="text/css">
		body{margin: 0;padding: 0;color: white;text-align: center;}
		.header{width: 90%;
			height: 50px;
			background-color:red;
			margin: 0 auto; }
		.container{
			width: 90%;
			height: 500px;
			margin: 0 auto;
			
		}
		.left{width: 60%;
			height: 500px;
			background-color: blue;
			float: left;}
		.right{width: 40%;
			height: 500px;
			background-color: pink;
			float: right;}
		.footer{
			width: 90%;
			height: 50px;
			background-color: red;
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<div class="header">页面头部</div>
	<div class="container">
		<div class="left">页面左侧</div>
		<div class="right">页面右侧</div>
	</div>
	<div class="footer">页面底部</div>
</body>
</html>