DIV+CSS上中下左中右布局案例

最新推荐文章于 2022-12-15 14:33:01 发布

luyunix

最新推荐文章于 2022-12-15 14:33:01 发布

阅读量2.7k

点赞数

分类专栏： HTML，CSS，JS的学习文章标签： html css

本文链接：https://blog.csdn.net/weixin_37311400/article/details/78734079

版权

HTML，CSS，JS的学习专栏收录该内容

14 篇文章 0 订阅

订阅专栏

网页源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>上中下左中右DIV+CSS布局案例</title>
		<style type="text/css">
			#container{
				background-color: aqua;
				width: 1000px;
				height: 600px;
			}
			#top{
				background-color: blue;
				width: 1000px;
				height: 100px;
			}
			#bottom{
				background-color: #000000;
				width: 1000px;
				height: 100px;
			}
			#left{
				background-color: antiquewhite;
				width: 100px;
				height: 400px;
				float: left;/*漂浮属性,让块状元素不换行*/
			}
			#main{
				background-color: aquamarine;
				width: 800px;
				height: 400px;
			}
			#right{
				background-color: #FF0000;
				width: 100px;
				height: 400px;
				float: right;
			}
		</style>
	</head>
	<body>
		<center>
			<div id="container">
				<div id="top">TOP</div>
				<div id="medium">
					<div id="left">LEFT</div>
					<div id="right">RIGHT</div>
					<div id="main">MAIN</div>
				</div>
				<div id="bottom">BOTTOM</div>
			</div>
		</center>
	</body>
</html>

页面效果