<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
position: relative;
width: 1300px;
height: 800px;
background-color: black;
}
.box1 {
position: relative;
width: 1300px;
height: 150px;
background-color: red;
}
.box2 {
position: absolute;
width: 1300px;
height: 650px;
background-color: blue;
top: 150px;
}
.box1-1 {
position: absolute;
width: 1295px;
height: 50px;
background-color: darkgreen;
}
.box1-2 {
position: absolute;
width: 1290px;
height: 100px;
background-color: grey;
top: 50px;
}
.box2-1 {
position: absolute;
width: 1285px;
height: 500px;
background-color: darkgreen;
}
.box2-2 {
position: absolute;
width: 1280px;
height: 150px;
background-color: grey;
top: 500px;
}
.box1-1-1 {
position: absolute;
width: 700px;
height: 50px;
background-color: red;
}
.box1-1-2 {
position: absolute;
width: 200px;
height: 50px;
background-color: red;
right: 110px;
}
.box1-1-3 {
position: absolute;
width: 100px;
height: 50px;
background-color: red;
right: 5px;
}
.box1-2-1 {
position: absolute;
width: 100px;
height: 100px;
background-color: yellow;
}
.box1-2-2 {
position: absolute;
width: 900px;
height: 100px;
background-color: yellow;
left: 150px;
}
.c1-2-2 {
display: flex;
width: 800px;
height: 100px;
flex-wrap: wrap;
justify-content: space-between;
}
li {
list-style: none;
}
.box1-2-3 {
position: absolute;
width: 100px;
height: 50px;
left: 1060px;
top: 30px;
}
.box2-1-1 {
position: absolute;
width: 200px;
height: 500px;
background-color: brown;
}
.c2-1-1 {
width: 200px;
height: 450px;
}
.box2-1-2 {
position: absolute;
width: 1000px;
height: 500px;
background-image: url(../素材/19.png);
left: 200px;
}
.box2-2-1 {
position: absolute;
width: 300px;
height: 150px;
background-color: royalblue;
}
.box2-2-2 {
position: absolute;
width: 950px;
height: 150px;
background-color: royalblue;
left: 320px;
}
.c2-2-1 {
display: flex;
width: 300px;
height: 150px;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-evenly;
}
.l2-2-1 {
width: 80px;
height: 50px;
background-color: blue;
}
.c2-2-2 {
display: flex;
width: 950px;
height: 150px;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-evenly;
}
.l2-2-2 {
width: 300px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
<div class="box1-1">
<div class="box1-1-1"><a href="#">1</a> <span>|</span> <a href="#">2</a> <span>|</span> <a href="#">3</a> <span>|</span> <a href="#">4</a> <span>|</span> <a href="#">5</a> <span>|</span> <a href="#">6</a> <span>|</span> <a href="#">7</a> <span>|</span> <a href="#">8</a> <span>|</span> <a href="#">9</a> <span>|</span> <a href="#">10</a> <span>|</span> <a href="#">11</a> <span>|</span> <a href="#">12</a></div>
<div class="box1-1-2"><a href="#">1</a> <span>|</span> <a href="#">2</a> <span>|</span> <a href="#">3</a></div>
<div class="box1-1-3"><a href="gouwuche"><em>购物车</em></a></div>
</div>
<div class="box1-2">
<div class="box1-2-1"><a href="//www.mi.com">小米官网</a></div>
<div class="box1-2-2"><ul class="c1-2-2"><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">6</a></li><li><a href="#">7</a></li><li><a href="#">8</a></li><li><a href="#">9</a></li></ul></div>
<div class="box1-2-3"><a href="#"><input type="search"></a><a href="#"><input type="submit"></a></div>
</div>
</div>
<div class="box2">
<div class="box2-1">
<div class="box2-1-1"><ul class="c2-1-1"><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">6</a></li><li><a href="#">7</a></li><li><a href="#">8</a></li><li><a href="#">9</a></li><li><a href="#">10</a></li></ul></div>
<div class="box2-1-2"></div>
</div>
<div class="box2-2">
<div class="box2-2-1"><ul class="c2-2-1"><li class="l2-2-1">1</li><li class="l2-2-1">2</li><li class="l2-2-1">3</li><li class="l2-2-1">4</li><li class="l2-2-1">5</li><li class="l2-2-1">6</li></ul></div>
<div class="box2-2-2"><ul class="c2-2-2"><li class="l2-2-2">1</li><li class="l2-2-2">2</li><li class="l2-2-2">3</li></ul></div>
</div>
</div>
</div>
</body>
</html>
