提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

WebHTML前端 模型 布局 十五
2023-09-11 14:20:37 时间 
<!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>

相关文章