html和CSS创建盒子模型

最新推荐文章于 2024-10-10 22:10:24 发布

liu jiaxian

最新推荐文章于 2024-10-10 22:10:24 发布

阅读量188

点赞数 3

分类专栏：前端文章标签： html css 前端

本文链接：https://blog.csdn.net/qq_45737800/article/details/140518228

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

html和CSS创建盒子模型

实现以下效果
在这里插入图片描述
HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>布局</title>
	<link rel="stylesheet" href="css.css"></head>
<body>
	<div id="t1">
		<div id="div1">
			<div id="leftDiv"></div>
			<div id="rightDiv">
				<div id="upDiv1"></div>
				<div id="upDiv2"></div>
			</div>
		</div>
		<div id="div4">
			<div id="m1"></div>
			<div id="m2">
				<div id="mm1">
					<div id="blueDiv">
						<div id="blue1"></div>
						<div id="blue2"></div>
						<div id="blue3"></div>
					</div>
					<div id="purpleDiv"></div>
				</div>
				<div id="mm2"></div>
			</div>

		</div>
		<div id="bottomDiv"></div>
		<div></body>
		</html>

CSS文件

#t1{
	width: 970px;
	heigth: 600px;
	margin-left: 100px;
}
#div1{
	width: 970px;
	height: 103px;
}
#leftDiv{
	float: left;
	width: 277px;
	height: 103px;
	background-color: #DC143C;
}
#rightDiv{
	float:left;
	width: 679px;
	height: 103px;
	margin-left: 14px;
}
#upDiv1{
	width: 137px;
	height: 49px;
	margin-left: 542px;
	margin-bottom: 8px;
	background-color: #7FFF00;
}
#upDiv2{
	width: 669px;
	height: 46px;
	margin-left: 10px;
	background-color: #7FFF00;
}
#div4{
	margin-top:10px;
	width: 970px;
	height: 435px;
}
#m1{
	float:left;
	width: 310px;
	height: 435px;
	background-color: #FFD700;
}
#m2{
	float:left;
	width: 660px;
	height: 435px;
}
#blueDiv{
	float:left;
	width: 450px;
	height: 400px;
}
#blue1{
	width: 450px;
	height: 240px;
	background-color: #1E90FF;
}
#blue2{
	width: 450px;
	height: 110px;
	margin-top: 10px;
	margin-bottom: 10px;
	background-color: #1E90FF;
}
#blue3{
	width: 450px;
	height: 30px;
	background-color: #1E90FF;
}
#purpleDiv{
	float:left;
	width: 190px;
	height: 400px;
	margin-left: 10px;
	background-color: #FF00FF;
}
#mm1{
	margin-left:10px;
	width: 650px;
	height: 400px;
}
#mm2{
	width: 650px;
	height: 25px;
	margin-left:10px;
	margin-top:10px;
	background-color: #228B22;
}

#bottomDiv{
	width: 970px;
	height: 35px;
	margin-top: 10px;
	background-color: #ff00ff;
}