简单布局

最新推荐文章于 2019-07-26 10:35:25 发布

超超.

最新推荐文章于 2019-07-26 10:35:25 发布

阅读量126

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/peichaohang/article/details/85270207

版权

前端专栏收录该内容

39 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>简单布局</title>
	<style type="text/css">
		/*清除默认样式*/
		*{
			margin: 0;
			padding: 0;
		}
		/*设置头部*/
		.header{
			/*设置宽度*/
			width: 1000px;
			/*设置高度*/
			height: 150px;
			/*设置背景颜色*/
			background-color: yellowgreen;
			/*设置居中*/
			margin: 0 auto;
		}

		/*设置主体内部*/
		.content{
			/*设置宽度*/
			width: 1000px;
			/*设置高度*/
			height: 400px;
			/*设置背景颜色*/
			background-color: orange;
			/*设置居中*/
			margin: 10px auto;
		}

		/*设置content中小div的样式*/
		.left{
			width: 200px;
			height: 100%;
			background-color: skyblue;
			/*向左浮动*/
			float: left;
		}
		.center{
			width: 580px;
			height: 100%;
			background-color: yellow;
			/*向左浮动*/
			float: left;
			/*设置水平外边距0*/
			margin: 0 10px;
		}
		.right{
			width: 200px;
			height: 100%;
			background-color: pink;
			/*向左浮动*/
			float: left;
		}

		/*设置页脚*/
		.footer{
			/*设置宽度*/
			width: 1000px;
			/*设置高度*/
			height: 150px;
			/*设置背景颜色*/
			background-color: silver;
			/*设置居中*/
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<!-- 头部div -->
	<div class="header"></div>

	<!-- 主体内容div -->
	<div class="content">
		<!-- 左侧div -->
		<div class="left"></div>
		<!-- 中间div -->
		<div class="center"></div>
		<!-- 右侧div -->
		<div class="right"></div>
	</div>

	<!-- 底部信息div -->
	<div class="footer"></div>
</body>
</html>

超超.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单布局

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;简单布局&lt;/title&gt; &lt;style type="text/css"&gt; /*清除默认样式*/ *{
复制链接

扫一扫