css盒模型div嵌套制作网页块状部分案例

最新推荐文章于 2024-10-12 17:31:43 发布

前端hacker97

最新推荐文章于 2024-10-12 17:31:43 发布

阅读量2.1k

点赞数 3

分类专栏： html历史网页历史 web标准 html+css+js css3 文章标签： css padding margin

本文链接：https://blog.csdn.net/qq_24928451/article/details/45293307

版权

html历史网页历史 web标准 html+css+js 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

css3

2 篇文章 0 订阅

订阅专栏

html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/margingpadding.css"/>
	</head>
	<body>
		<div id="top">
			<div id="top_nav"></div>
		</div>
		<div id="body">
			<div id="body_image"></div>
			<div id="body_content">
				<div id="body_no"></div>
				<div id="body_c"></div>
			</div>
		</div>
		<div id="footing">
			<div id="footing_d"></div>
			<div id="footing_nav"></div>
		</div>
	</body>
</html>

css文件

*{
	margin:0px ;
	padding: 0px;
}
#top{
	width: 100%;
	height: 50px;
	background-color:#000000 ;
}
#top_nav{
	width: 75%;
	height: 50px;
	margin: 0px auto;
	background-color:#004488 ;
}
#body{
	margin: 10px auto;
	width: 75%;
	height: 1500px;
	background-color: #00FF77;
}
#body_image{
	margin: 0px;
	width: 100%;
	height: 400px;
	background-color:#FF0000;
}
#body_content{
	margin: 0px;
	width: 100%;
	height: 1100px;
	background-color: antiquewhite;
}
#body_no{
	margin: 0px;
	width: 100%;
	height: 50px;
	background-color:blue;
}
#body_c{
	margin: 0px;
	width: 100%;
	height: 1050px;
	background-color:#00FF77;
}
#footing{
	margin: 0px auto;
	height: 300px;
	width: 75%;
	background-color: brown;
}
#footing_d{
	margin: 0px;
	height: 230px;
	width: 100%;
	background-color: chartreuse;
}
#footing_nav{
	margin: 0px;
	height: 70px;
	width: 100%;
	background-color: black;
}

效果图