css代码如下:
* {
padding: 0;
margin: 0;
}
.top{
width: 1000px;
height: 25px;
background-color: blue;
margin: 0 auto;
}
.top1{
float: left;
}
.top2{
float: right;
}
ul{
height: 25px;
width: 800px;
margin: 0;
padding: 0;
list-style-type: none;
}
.topright li{
width: 40px;
height: 25px;
float: left;
background-color: pink;
margin: 0px 40px 2px 0px;
box-sizing: border-box;
}
.mid{
width: 1000px;
height: 600px;
flex-direction: column;
margin: 0 auto;
background-color: yellow;
position: relative;
}
.mid1{
widows: 200px;
height: 600px;
float: left;
}
.mid ul>li{
width: 200px;
height: 60px;
background-color: red;
text-align: center;
}
.mid ul>li a:hover{
color: red;
line-height: 60px;
padding-left: 100px;
}
.mid2{
widows: 800px;
height: 600px;
background-color: gray;
position: relative;
display: inline-block;
float: none;
}
.mid2left{
width: 40px;
height: 70px;
background-color: rgb(33, 33, 33);;
display: inline-block;
position: absolute;
top:40%;
right: 500px;
/* left: 10px; */
}
.mid2right{
width: 40px;
height: 70px;
background-color: rgb(33, 33, 33);
display: inline-block;
position: absolute;
top:40%;
left: 100px;
}
.down{
width: 1000px;
height: 170px;
background-color: black;
margin: 0 auto;
display: flex;
}
.a{
width: 225px;
height: 170px;
background-color: green;
margin: 0px 25px 25px 0px;
flex-direction: row;
}
框架:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="./小米.css" rel="stylesheet">
</head>
<body>
<div class="top">
<div class="top1">
<ul class="topright">
<li><a href="#">1111</a></li>
<li><a href="#">2222</a></li>
<li><a href="#">3333</a></li>
<li><a href="#">4444</a></li>
<li><a href="#">5555</a></li>
<li><a href="#">6666</a></li>
</ul>
</div>
<div class="top2">
<input type="text">
</div>
</div>
<div class="mid">
<div class="mid1">
<ul class="culomn">
<li><a href="#">11</a></li>
<li><a>22</a></li>
<li><a>33</a></li>
<li><a>44</a></li>
<li><a>55</a></li>
<li><a>66</a></li>
<li><a>77</a></li>
<li><a>88</a></li>
<li><a>99</a></li>
<li><a>00</a></li>
</ul>
</div>
<div class="mid2">
<div class="mid2left">左</div>
<div class="mid2right">右</div>
</div>
</div>
<div class="down">
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
</div>
</body>
</html>
展示图: