【无标题】小米官网布局设计框架

清野.702

已于 2024-05-14 21:44:32 修改

阅读量83

点赞数 1

文章标签： css 前端

于 2024-05-10 18:56:31 首次发布

本文链接：https://blog.csdn.net/2302_79888558/article/details/138677680

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>布局</title>
		<link rel="stylesheet" href="css/new_file.css" />
	</head>
	<body>
		<div class="box1">
			<div class="sbox1"></div>
			<div class="sbox2"></div>
		</div>
		<div class="box2">
			<div class="sbox3"></div>
			<div class="sbox4"></div>
			<div class="sbox5"></div>
		</div>
		<div class="box3">
			<div class="sbox6"></div>
			<div class="sbox7"></div>
		</div>
		<div class="box4">
			<div class="sbox8"></div>
			<div class="sbox9"></div>
			<div class="sboxa"></div>
			<div class="sboxb"></div>
		</div>
	</body>
</html>

css文件

*{
	margin: 0;
	padding: 0;
}
.box1{
	width: 100%;
	height: 25px;
	border: 1px solid black;
}
.sbox1{
	width: 500px;
	height: 100%;
	border: 1px solid red;
	float: left;
	margin-left: 50px;
	background-color: blue;
}
.sbox2{
	width: 200px;
	height: 100%;
	border: 1px solid red;
	float: right;
	margin-right: 50px;
	background-color: blue;
}
.box2{
	width: 900px;
	height: 25px;
	border: 1px solid black;
	margin: 25px auto 0;
}
.sbox3{
	width: 20px;
	height: 100%;
	float: left;
	border: 1px solid red;
	background-color: crimson;
}
.sbox4{
	width: 400px;
	height: 100%;
	margin: auto;
	border: 1px solid red;
	background-color: crimson;
}
.sbox5{
	width: 150px;
	height: 100%;
	float: right;
	border: 1px solid red;
	margin-top: -27px;
	background-color: crimson;
}
.box3{
	width: 900px;
	height: 300px;
	border: 1px solid black;
	margin: 25px auto 0;
}
.sbox6{
	width: 200px;
	height: 100%;
	float: left;
	border: 1px solid red;
	background-color: aqua;
}
.sbox7{
	width: 697px;
	height: 100%;
	float: right;
	border: 1px solid red;
	background-color: beige;
}
.box4{
	width: 900px;
	height: 100px;
	border: 1px solid black;
	margin: 10px auto 0;
}
.sbox8{
	width: 160px;
	height: 100%;
	border: 1px solid red;
	float: left;
	background-color: black;
}
.sbox9{
	width: 240px;
	height: 100%;
	border: 1px solid red;
	float: left;
	background-color: aquamarine;
	margin-left: 15px;
}
.sboxa{
	width: 215px;
	height: 100%;
	border: 1px solid red;
	float: right;
	background-color: azure;
	margin-left: 15px;
}
.sboxb{
	width: 235px;
	height: 100%;
	border: 1px solid red;
	float: right;
	background-color: bisque;
	margin-left: 15px;
}