网站布局（单列、两列、多列）

最新推荐文章于 2021-06-07 17:29:55 发布

sysyphus

最新推荐文章于 2021-06-07 17:29:55 发布

阅读量1.1k

点赞数 3

分类专栏： Self-taught 文章标签： html

本文链接：https://blog.csdn.net/iityc/article/details/105565449

版权

本文介绍了网页布局的常见方法，包括单列等宽布局、两列布局（左侧固定、右侧自适应、左右宽度固定）以及多列布局，通过浮动、绝对定位和外边距等技术实现。还特别提到了QQ空间实战布局和水平对齐内容的处理方式。

摘要由CSDN通过智能技术生成

一：单列布局

等宽布局（头部、主题、底部等宽）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>单列布局1-头主尾等宽</title>
	<style>
		.container {
   
			max-width: 960px; /*设置最大宽度为固定值*/
			margin: 0 auto;  /*设置内部子块元素左右居中*/
		}
		.header {
   
			height: 50px;  /*只需设置高度,宽度继承父元素*/
			background-color: #21FF80;
		}
		.main {
   
			height: 600px;  /*只需设置高度,宽度继承父元素*/
			background-color: #80007F;
		}
		.footer {
   
			height: 50px;  /*只需设置高度,宽度继承父元素*/
			background-color: #21FF06;
		}
	</style>
</head>
<body>
	<h4>基本思路:</h4>
	<p>1.头部,主体,尾部全部放在一个容器内统一设置</p>
	<p>2.子块只须设置高度即可</p>
	<!-- DOM结构 -->
	<div class="container">
		<div class="header">头部</div>
		<div class="main">主体</div>
		<div class="footer">尾部</div>
	</div>
</body>
</html>

```
单列宽度自适应布局
```


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>单列布局2-头尾自适应主体固宽</title>
	<style>
		.container {
   
			max-width: 960px; /*设置最大宽度为固定值*/
			margin: 0 auto;  /*设置内部子块元素左右居中*/
		}
		.header {
   
			height: 50px;  /*只需设置高度,宽度继承父元素*/
			background-color: #21FF80;
		}
		.main {
   
			height: 600px;  /*只需设置高度,宽度继承父元素*/
			background-color: #80007F;
		}
		.footer {
   
			height: 50px;  /*只需设置高度,宽度继承父元素*/
			background-color: #21FF06;
		}
	</style>
</head>
<body>
	<h4>基本思路:</h4>
	<p>1.头部,尾部单独放在一个容器内,仅设置height高度</p>
	<p>2.头部,尾部内容区仍与主体等宽</p>
	<p>3.主体单独放在一个容器内,并设置左右自动margin: auto</p>
	<h4>CSS样式无需修改,只需调整一下DOM结构即可</h4>
	<!-- DOM结构 -->
	
		<div class="header">
			<div class="container">头部</div>
		</div>
		<div class="main">
			<div class="container">主体</div>
		</div>
		<div class="footer">
			<div class="container">尾部</div>
		</div>
</body>
</html>

二：两列布局

两列_左侧固定_右侧自适应


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>两列布局1:左侧固定,右主体自适应</title>
</head>
<style>
	.left {
   
		width: 200px;
		height: 600px;
		background-color: skyblue;
		float: left;
	}
	.main {
   
		height: 600px;
		background-color: cyan; 
		margin-left: 200px;
	}
</style>
<body>
	<h4>基本思路