css之盒子模型

最新推荐文章于 2025-04-24 09:15:00 发布

原创最新推荐文章于 2025-04-24 09:15:00 发布 · 219 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

2 篇文章

订阅专栏

本文提供了一个简单的网页布局设计实例，包括顶部导航栏、主体内容区域及底部页脚的设计方案。通过CSS样式设置，实现了不同部分的尺寸和背景色配置。

<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="utf-8">
	<title></title>
	
	<style>
		*{margin:0;padding:0;}
		.top{width:100%; height: 50px; background: #cee8fc}
		.top_content{width: 75%; height: 50px; background: #5ba8ee; margin: 0 auto;}
		.body{width: 75%; height: 950px; background: gray; margin: 0 auto;}
		.banner{width: 100%; height: 350px;background: #d5b9ae; }
		.body_content{width: 100%; height: 600px; background: #fcc;}
		.footer{margin: 0 auto; width: 75%; height:300px background: #ffc;}
	</style>
</head>

	
<body>
	<div class="top">
		<div class="top_content"></div>
	</div>
	<div class="body">
		<div class="banner"></div>
		<div class="body_content"></div>
	</div>
	<div class="footer"></div>
</body>


</html>