DIV+CSS上中下布局案例

最新推荐文章于 2024-05-17 07:36:11 发布

luyunix

最新推荐文章于 2024-05-17 07:36:11 发布

阅读量5.6k

点赞数 6

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

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

版权

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

14 篇文章 0 订阅

订阅专栏

网页源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>上中下DIV+CSS布局案例</title>
		<style type="text/css">
			#container{
				background-color: darkgray;
				text-align: center;
				width: 800px;
				height: 600px;
			}
			#top{
				background-color: antiquewhite;
				width: 780px;
				height: 100px;
			}
			#main{
				background-color: #00FF00;
				width: 780px;
				height: 400px;
			}
			#bottom{
				background-color: aqua;
				width: 780px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<!--需要兼容客户屏幕宽度,布局应该使用固定尺寸-->
		<!--p,h,div属于块状元素,前后会自动换行-->
		<!--div会自动占据整个父容器的宽度-->
		<center>
		<div id="container">
			<center>
			<div id="top">TOP</div>
			<div id="main">MAIN</div>
			<div id="bottom">BOTTOM</div>
			</center>
		</div>
		</center>
	</body>
</html>

页面效果