【web前端(十五)】html_盒模型——版心布局

最新推荐文章于 2024-11-05 21:16:39 发布

原创最新推荐文章于 2024-11-05 21:16:39 发布 · 3.5k 阅读

3 ·

CC 4.0 BY-SA版权

Java 专栏收录该内容

118 篇文章

订阅专栏

本文详细介绍了一种通过CSS实现网页版心布局的方法，包括顶部、横幅、主体和底部区域的设置，强调了宽度、高度及边距的精确控制，使页面设计更加规范和美观。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>版心布局</title>
		<style>
			/*我们可以通过这种方法，
			 去更好的将浏览页面的设计完善一下。*/
			
			/*属性中参数相同的同一级别的选择器，
			 我们可以选择用逗号将其隔开，
			 然后在大括号里书写。*/
			.top,
			.banner,
			.main,
			.footer{
				background-color: #EEE;
				border:1px dotted #555;
			}
			
			.top{
				width: 960px;
				height: 100px;
				/*上、左右、下*/
				margin: 0 auto 5px;
			}
			
			.banner{
				width: 960px;
				height: 200px;				
				/*上、左右、下*/
				margin:5px auto;
			}
			
			.main{
				width: 960px;
				height: 400px;				
				/*上、左右、下*/
				margin:5px auto;
			}
			
			.footer{
				width: 960px;
				height: 50px;			
				/*上、左右、下*/
				margin:5px auto 0;
			}
		</style>
	</head>
	<body>
		<div class="top"></div>
		<div class="banner"></div>
		<div class="main"></div>
		<div class="footer"></div>
	</body>
</html>