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

最新推荐文章于 2024-05-17 07:28:12 发布

_浮舍_

最新推荐文章于 2024-05-17 07:28:12 发布

阅读量3.4k

点赞数 1

分类专栏： Java

本文链接：https://blog.csdn.net/LED_of_Java/article/details/98871082

版权

Java 专栏收录该内容

118 篇文章 0 订阅

订阅专栏

<!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>

_浮舍_

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
【web前端(十五)】html_盒模型——版心布局

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>版心布局</title> <style> /*我们可以通过这种方法，去更好的将浏览页面的设计完善一下。*/ /*属性中参数相同的同一级别的选择器， ...
复制链接

扫一扫