web:浮动(蓝紫块) – WAN-P一起制作

web:浮动(蓝紫块)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.tot{
				/* width: 1226px; */
				width: 100%;
				height: 614px;
				margin: 0 auto;
			}
			.left_box{
				width: 234px;
				height: 614px;
				background-color: #800080;
				float: left;
			}
			.right_box{
				width: 992px;
				height: 614px;
				float: left;
			}
			.top_box{
				width: 234px;
				height: 300px;
				margin-left: 14px;
				float: inline-start;
				background-color: #87ceeb;
				float: left;
			}
			.bottom_box{
				float: left;
				width: 234px;
				height: 300px;
				margin-left: 14px;
				margin-top: 14px;
				background-color: #87ceeb;
			}
		</style>
	</head>
	<body>
		<div class="tot">
			<div class="left_box"></div>
			<div class="right_box">
				<div class="top_box"></div>
				<div class="top_box"></div>
				<div class="top_box"></div>
				<div class="top_box"></div>
				<div class="bottom_box"></div>
				<div class="bottom_box"></div>
				<div class="bottom_box"></div>
				<div class="bottom_box"></div>
			</div>
		</div>
	</body>
</html>

留下评论