小米官网架构

妧徽
已于 2024-05-14 22:36:54 修改
阅读量370
点赞数 8
CC 4.0 BY-SA版权
文章标签：前端 css
于 2024-05-14 22:36:09 首次发布
本文链接：https://blog.csdn.net/woiyuan/article/details/138873299
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>小米官网</title>
		<style>
			*{
				margin: 0%;
				padding: 0%;
			}
			.wai1{
				width: 100%;
				height: 1500px;
				background-color: #ffffff;
				padding: 0px;
			}
			.wai2{
				width: 100%;
				height: 7500px;
				background-color: #f3f3f3;
				padding: 0px;
			}
			.wai3{
				width: 100%;
				height: 600px;
				background-color: #ffffff;
				padding: 0px;
			}
			.wai4{
				width: 100%;
				height: 400px;
				background-color: #f3f3f3;
				padding: 0px;
			}
			.box1{
				width: 100%;
				height: 30px;
				border: 1px solid black;
				background-color: #6b6b6b;
				.clearfix::after,.clearfix::before{
					content: "";
					display: table;
				}
				.clearfix::after{
					clear:both;
				}
			}
			.box2{
				height: 95%;
				width: 1300px;
				border:  1px solid red;
				margin: auto;
			}
			.box3{
				height: 95%;
				width: 700px;
				border: 1px solid blue;
				float: left;
			}
			.box4{
				height: 95%;
				width: 300px;
				border: 1px solid blue;
				float: right;
			}
			.box10{
				height: 75px;
				width: 1300px;
				border: 1px solid black;
				margin: auto;
				margin-top: 10px;
				.clearfix::after,.clearfix::before{
					content: "";
					display: table;
				}
				.clearfix::after{
					clear:both;
				}
			}
			.box11{
				height: 60px;
				width: 100px;
				border: 1px solid red;
				margin: 7px 20px;
				float: left;
			}
			.box12{
				height: 55px;
				width: 700px;
				border: 1px solid red;
				margin: auto;
				margin-top: 10px;
			}
			.box13{
				height: 40px;
				width: 250px;
				border: 1px solid red;
				float: right;
				margin: -45px 20px 0px 0px;
			}
			.box20{
				height: 700px;
				width: 1250px;
				border: 1px solid black;
				margin: auto;
				margin-top: 20px;
				.clearfix::after,.clearfix::before{
					content: "";
					display: table;
				}
				.clearfix::after{
					clear:both;
				}
			}
			.box21{
				height: 100%;
				width: 20%;
				border: 1px solid red;
				float: left;
			}
			.box22{
				height: 100%;
				width: 80%;
				border: 1px solid blue;
				float: right;
				margin-top: -701px;
			}
			.box30{
				height: 150px;
				width: 1250px;
				border: 1px solid black;
				margin: auto;
				margin-top: 30px;
			}
			.box31{
				height: 94%;
				width: 20%;
				border: 1px solid red;
				float: left;
				margin: 0.2%;
			}
			.box32{
				height: 140px;
				width: 310px;
				border: 1px solid red;
				float: right;
				margin: 5px 8px;
				
			}
			.box33{
				height: 70px;
				width: 80px;
				border: 1px solid blue;
				float: left;
			}
			.box40{
				height: 500px;
				width: 1250px;
				border: black 1px solid;
				margin: auto;
				margin-top: 40px;
			}
			.box41{
				height: 50px;
				width:300px ;
				border: red 1px solid;
				margin: 10px 5px;
			}
			.box42{
				height: 430px;
				width: 1250px;
				border: red 1px solid;
				.clearfix::after,.clearfix::before{
					content: "";
					display: table;
				}
				.clearfix::after{
					clear:both;
				}
			}
			.box43{
				height: 420px;
				width: 228px;
				border: blue 1px solid;
				margin: 5px 10px;
				float: left;
			}
			.box50{
				height: 100px;
				width: 1300px;
				border: black 1px solid;
				margin: auto;
				margin-top: 30px;
			}
			.box60{
				height: 800px;
				width: 1300px;
				border: black 1px solid;
				margin: auto;
				margin-top: 40px;
			}
			.box61{
				height: 70px;
				width: 1300px;
				border: red 1px solid;
				.clearfix::after,.clearfix::before{
					content: "";
					display: table;
				}
				.clearfix::after{
					clear:both;
				}
			}
			.box62{
				height: 50px;
				width: 150px;
				border: blue 1px solid;
				float: left;
				margin: 10px;
			}
			.box63{
				height: 50px;
				width: 150px;
				border: blue 1px solid;
				float: right;
				margin: 10px;
			}
			.box64{
				height: 730px;
				width: 1300px;
				border: red 1px solid ;
			}
			.box65{
				height: 710px;
				width: 300px;
				border: blue 1px solid;
				margin: 10px;
				float: left;
			}
			.box66{
				height: 710px;
				width: 950px;
				border: blue 1px solid;
				float: right;
				margin: 10px;
				.clearfix::after,.clearfix::before{
					content: "";
					display: table;
				}
				.clearfix::after{
					clear:both;
				}
			}
			.box67{
				height: 345px;
				width: 225px;
				border: #55007f 1px solid;
				float: left;
				margin: 5px;
			}
			.box70{
				height: 800px;
				width: 1300px;
				border: black 1px solid;
				margin: auto;
				margin-top: 50px;
			}
			.box71{
				height: 70px;
				width: 1300px;
				border: red 1px solid;
			}
			.box72{
				height: 50px;
				width: 400px;
				border: red 1px solid;
				float: right;
				margin: 10px;
			}
			.box73{
				height:730px ;
				width: 1300px;
				border: red 1px solid;
				.clearfix::after,.clearfix::before{
					content: "";
					display: table;
				}
				.clearfix::after{
					clear:both;
				}
			}
			.box74{
				height: 350px;
				width:245px ;
				border: blue 1px solid;
				margin: 6px 7px 5px 5px;
				float: left;
			}
			.box75{
				height:170px ;
				width: 235px;
				border: blueviolet 1px solid;
				margin: 3px;
			}
			.box80{
				height: 400px;
				width: 1300px;
				margin: auto;
				border: black 1px solid;
				margin-top: 50px;
				.clearfix::after,.clearfix::before{
					content: "";
					display: table;
				}
				.clearfix::after{
					clear:both;
				}
			}
			.box81{
				height: 100px;
				width: 1300px;
				border: blue 1px solid;
				.clearfix::after,.clearfix::before{
					content: "";
					display: table;
				}
				.clearfix::after{
					clear:both;
				}
			}
			.box82{
				height: 80px;
				width: 300px;
				border: red 1px solid;
				float: left;
				margin: 10px;
			}
			.box83{
				height: 50px;
				width: 150px;
				border: red 1px solid;
				float: right;
				margin: 25px ;
			}
			.box84{
				height: 300px;
				width: 1300px;
				border: red 1px solid;
			}
			.box85{
				height: 280px;
				width: 300px;
				border: chartreuse 1px solid;
				float: left;
				margin: 10px 11px;
			}
			.box90{
				height: 300px;
				width: 1300px;
				border: black 1px solid;
				margin: auto;
				margin-top: 50px;
			}
			.box91{
				height: 80px;
				width: 1300px;
				border: red 1px solid ;
				.clearfix::after,.clearfix::before{
					content: "";
					display: table;
				}
				.clearfix::after{
					clear:both;
				}
			}
			.box92{
				height: 60px;
				width: 300px;
				border: blue 1px solid ;
				margin: 10px;
				float: left;
			}
			.box93{
				height: 50px;
				width: 200px;
				border: blue 1px solid;
				margin: 15px;
				float: right;
			}
			.box94{
				height: 220px;
				width: 1300px;
				border: red 1px solid;
				.clearfix::after,.clearfix::before{
					content: "";
					display: table;
				}
				.clearfix::after{
					clear:both;
				}
			}
			.box95{
				height: 200px;
				width: 300px;
				border: blue 1px solid;
				float: left;
				margin: 10px 11px;
			}
			.box100{
				height: 500px;
				width: 1300px;
				border: black 1px solid;
				margin-top: 30px;
				margin: auto;
			}
			.box101{
				height: 150px;
				width: 1300px;
				border: red 1px solid;
			}
			.box102{
				height: 350px;
				width: 1300px;
				border: red 1px solid ;
				.clearfix::after,.clearfix::before{
					content: "";
					display: table;
				}
				.clearfix::after{
					clear:both;
				}
			}
			.box103{
				height: 340px;
				width: 900px;
				border: blue 1px solid;
				margin: 5px 5px;
				float: left;
			}
			.box104{
				height: 340px;
				width: 360px;
				border: chartreuse 1px solid;
				margin: 5px 10px;
				float: right;
			}
			.box110{
				height: 300px;
				width: 1300px;
				border: black 1px solid;
				margin-top: 50px;
				margin: auto;
				.clearfix::after,.clearfix::before{
					content: "";
					display: table;
				}
				.clearfix::after{
					clear:both;
				}
			}
			.box111{
				height: 300px;
				width: 800px;
				border: red 1px solid;
				float: left;
				.clearfix::after,.clearfix::before{
					content: "";
					display: table;
				}
				.clearfix::after{
					clear:both;
				}
			}
			.box112{
				height: 100px;
				width: 100px;
				border: blue 1px solid;
				float: left;
			}
			.box113{
				
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2">
				<div class="box3"></div>
				<div class="box4"></div>
			</div>
		</div>
		<div class="wai1">
			<div class="box10">
				<div class="box11"></div>
				<div class="box12"></div>
				<div class="box13"></div>
			</div>
			<div class="box20">
				<div class="box21"></div>
				<div class="box22"></div>
			</div>
			<div class="box30">
				<div class="box31">
					<div class="box33"></div>
					<div class="box33"></div>
					<div class="box33"></div>
					<div class="box33"></div>
					<div class="box33"></div>
					<div class="box33"></div>
				</div>
				<div class="box32"></div>
				<div class="box32"></div>
				<div class="box32"></div>
			</div>
			<div class="box40">
				<div class="box41"></div>
				<div class="box42">
					<div class="box43"></div>
					<div class="box43"></div>
					<div class="box43"></div>
					<div class="box43"></div>
					<div class="box43"></div>
				</div>
			</div>
			<div class="box50"></div>
		</div>
		<div class="wai2">
			<div class="box60">
				<div class="box61">
					<div class="box62"></div>
					<div class="box63"></div>
				</div>
				<div class="box64">
					<div class="box65"></div>
					<div class="box66">
						<div class="box67"></div>
						<div class="box67"></div>
						<div class="box67"></div>
						<div class="box67"></div>
						<div class="box67"></div>
						<div class="box67"></div>
						<div class="box67"></div>
						<div class="box67"></div>
					</div>
				</div>
			</div>
			<div class="box50"></div>
				<div class="box70">
					<div class="box71">
						<div class="box72"></div>
					</div>
					<div class="box73">
						<div class="box74"></div>
						<div class="box74"></div>
						<div class="box74"></div>
						<div class="box74"></div>
						<div class="box74"></div>
						<div class="box74"></div>
						<div class="box74"></div>
						<div class="box74"></div>
						<div class="box74"></div>
						<div class="box74">
							<div class="box75"></div>
							<div class="box75"></div>
						</div>
					</div>
				</div>
			<div class="box50"></div>
			<div class="box70">
				<div class="box71">
					<div class="box72"></div>
				</div>
				<div class="box73">
					<div class="box74"></div>
					<div class="box74"></div>
					<div class="box74"></div>
					<div class="box74"></div>
					<div class="box74"></div>
					<div class="box74"></div>
					<div class="box74"></div>
					<div class="box74"></div>
					<div class="box74"></div>
					<div class="box74">
						<div class="box75"></div>
						<div class="box75"></div>
					</div>
				</div>
			</div>
			<div class="box50"></div>
			<div class="box70">
				<div class="box71">
					<div class="box72"></div>
				</div>
				<div class="box73">
					<div class="box74"></div>
					<div class="box74"></div>
					<div class="box74"></div>
					<div class="box74"></div>
					<div class="box74"></div>
					<div class="box74"></div>
					<div class="box74"></div>
					<div class="box74"></div>
					<div class="box74"></div>
					<div class="box74">
						<div class="box75"></div>
						<div class="box75"></div>
					</div>
				</div>
			</div>
			<div class="box50"></div>
			<div class="box70">
				<div class="box71">
					<div class="box72"></div>
				</div>
				<div class="box73">
					<div class="box74"></div>
					<div class="box74"></div>
					<div class="box74"></div>
					<div class="box74"></div>
					<div class="box74"></div>
					<div class="box74"></div>
					<div class="box74"></div>
					<div class="box74"></div>
					<div class="box74"></div>
					<div class="box74">
						<div class="box75"></div>
						<div class="box75"></div>
					</div>
				</div>
			</div>
			<div class="box50"></div>
			<div class="box70">
				<div class="box71">
					<div class="box72"></div>
				</div>
				<div class="box73">
					<div class="box74"></div>
					<div class="box74"></div>
					<div class="box74"></div>
					<div class="box74"></div>
					<div class="box74"></div>
					<div class="box74"></div>
					<div class="box74"></div>
					<div class="box74"></div>
					<div class="box74"></div>
					<div class="box74">
						<div class="box75"></div>
						<div class="box75"></div>
					</div>
				</div>
			</div>
			<div class="box50"></div>
			<div class="box80">
				<div class="box81">
					<div class="box82"></div>
					<div class="box83"></div>
				</div>
				<div class="box84"></div>
			</div>
			<div class="box80">
				<div class="box81">
					<div class="box82"></div>
				</div>
				<div class="box84">
					<div class="box85"></div>
					<div class="box85"></div>
					<div class="box85"></div>
					<div class="box85"></div>
				</div>
			</div>
			<div class="box80">
				<div class="box81">
					<div class="box82"></div>
				</div>
				<div class="box84">
					<div class="box85"></div>
					<div class="box85"></div>
					<div class="box85"></div>
					<div class="box85"></div>
				</div>
			</div>
			<div class="box90">
				<div class="box91">
					<div class="box92"></div>
					<div class="box93"></div>
				</div>
				<div class="box94">
					<div class="box95"></div>
					<div class="box95"></div>
					<div class="box95"></div>
					<div class="box95"></div>
				</div>
			</div>
		</div>
		<div class="wai3">
			<div class="box100">
				<div class="box101"></div>
				<div class="box102">
					<div class="box103"></div>
					<div class="box104"></div>
				</div>
			</div>
		</div>
		<div class="wai4">
			<div class="box110">
				<div class="box111">
					<div class="box112"></div>
					<div class="box113"></div>
				</div>
			</div>
		</div>
	</body>
</html>