【常见网页排版布局】

最新推荐文章于 2024-08-09 17:24:43 发布

西西coding

最新推荐文章于 2024-08-09 17:24:43 发布

阅读量2.8k

点赞数 8

分类专栏：前端文章标签： css html

本文链接：https://blog.csdn.net/weixin_38114487/article/details/105721803

版权

前端专栏收录该内容

8 篇文章 1 订阅

订阅专栏

放在盒子里

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			/* 适用于全部元素 */
			*{
				padding: 0;
				margin: 0;
			}
			/* 匹配id为box的 */
			#box{
				width:700px;
				background-color: red;
				/* 自动居中 */
				margin: 0 auto;
			}
			
			#logo{
				height: 100px;
				background-color: #FF0000;
			}
			
			#nav{
				height: 50px;
				background-color: yellow;
			}
			
			#main{
				height: 600px;
			}
			
			#left_main{
				display: inline-block;
				width: 350px;
				height: 600px;
				background-color: blue;
			}
			
			#right_main{
				display: inline-block;
				width: 350px;
				height: 600px;
				/* 浮动 */
				float: right;
				background-color: deeppink;
			}
			
			#foot{
				height: 40px;
				background-color: aqua;
			}
		</style>

	</head>
	<body>
		<div id="box">

			<!-- id值唯一，不能相同 -->
			<div id="logo">

			</div>
			<!-- nav导航 -->
			<div id="nav">

			</div>
			<!-- 广告 -->
			<div id="guanggao">

			</div>
			<!-- 主体 -->
			<div id="main">
				<div id="left_main">

				</div>
				<div id="right_main">

				</div>
			</div>
			<!-- 底部 -->
			<div id="foot">

			</div>

		</div>

	</body>
</html>