1、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../download/font_4160017_19senzoyymj/iconfont.css">
<style>
*{
margin: 0;
padding: 0;
}
.bg{
width: 1000px;
height: 600px;
background-color:rgb(253, 253, 253);
display: flex;
flex-wrap: wrap;
margin: 0 auto;
padding: 10px;
}
.top{
width: 1000px;
height: 100px;
display: flex;
justify-content: space-between;
}
div .mi{
width: 80px;
height: 70px;
background-color:rgb(231, 93, 13);
font-size: 45px;
border-radius: 45%;
color:white;
}
div .center{
display: flex;
width: 700px;
height: 70px;
/* background-color: aquamarine; */
justify-content: center;
align-items: center;
}
.center li{
display: inline-block;
/* background-color: aliceblue; */
list-style: none;
}
.center li:hover{
color: orange;
}
.sousuo{
width: 300px;
height: 70px;
/* background-color: bisque; */
position: relative;
}
.sousuo input[type="text"]{
width: 200px;
height: 50px;
position: absolute;
right: 0;
/* position: relative; */
}
.sousuo .iconfont{
font-size: 50px;
position: absolute;
right: 0;
}
.sousuo span{
width: 50px;
height: 50px;
border-width: 1px;
border-style: solid;
border-color: black;
}
.sousuo span:hover{
background-color: orange;
}
.left{
width: 200px;
height: 500px;
background-color: rgb(135, 138, 137);
display: flex;
align-content: space-between;
}
.left li{
position: relative;
display: inline-block;
width: 200px;
height: 50px;
/* background-color: aliceblue; */
list-style: none;
text-align:left;
text-indent: 2em;
line-height: 50px;
}
.left li:hover{
background-color: orange;
}
.left .iconfont{
position: absolute;
right: 10px;
}
.right{
width: 800px;
height: 500px;
background-color: rgb(233, 233, 233);
position: relative;
}
.right .iconfont:nth-of-type(1){
font-size: 50px;
position: absolute;
top: 200px;
}
.right span:nth-of-type(1){
width: 50px;
height: 50px;
}
.right span:nth-of-type(1):hover{
background-color:rgb(158, 159, 160);
}
.right .iconfont:nth-of-type(2){
font-size: 50px;
position: absolute;
top: 200px;
right: 0;
}
.right span:nth-of-type(2){
width: 50px;
height: 50px;
}
.right span:nth-of-type(2):hover{
background-color:rgb(158, 159, 160);
}
.right span:nth-of-type(3){
position: absolute;
bottom: 30px;
right: 140px;
}
/* .right span:nth-of-type(3):hover{
background-color:lightsteelblue;
} */
.right span:nth-of-type(4){
position: absolute;
bottom: 30px;
right: 120px;
}
.right span:nth-of-type(5){
position: absolute;
bottom: 30px;
right: 100px;
}
</style>
</head>
<body>
<div class="bg">
<div class="top">
<div class="mi">MI</div>
<div class="center">
<ul>
<li>Xiaomi手机</li>
<li>Redmi手机</li>
<li>电视</li>
<li>笔记本</li>
<li>平板</li>
<li>家电</li>
<li>路由器</li>
<li>服务中心</li>
<li>社区</li>
</ul>
</div >
<div class="sousuo"><input type="text">
<span class="iconfont icon-sousuo"></span>
</div>
</div>
<div class="left">
<ul>
<li class="goods">手机
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li class="goods">电视
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li class="goods">家电
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li class="goods">笔记本 平板
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li class="goods">出行 穿戴
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li class="goods">耳机 音响
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li class="goods">健康 儿童
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li class="goods">生活 箱包
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li class="goods">智能 路由器
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li class="goods">电源 配件
<span class="iconfont icon-arrow-right-bold"></span>
</li>
</ul>
</div>
<div class="right">
<span class="iconfont icon-arrow-left-bold"></span>
<span class="iconfont icon-arrow-right-bold"></span>
<span class="iconfont icon-shixinxiaoyuanquan"></span>
<span class="iconfont icon-shixinxiaoyuanquan"></span>
<span class="iconfont icon-shixinxiaoyuanquan"></span>
</div>
</div>
</body>
</html>
2、运行页面