效果图：
HTML代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="index.css"><link rel="stylesheet" href="../素材/font_4488562_j154ryih3xs/iconfont.css">
</head><body><div class="header"><div class="content"><div class="header-left"><a rel="nofollow" href="//www.mi.com/" >小米官网</a><span class="sep">|</span><a rel="nofollow" href="//www.mi.com/shop" >小米商城</a><span class="sep">|</span><a rel="nofollow" href="//hyperos.mi.com/" target="_blank">小米澎湃OS</a><span class="sep">|</span><a rel="nofollow" href="//iot.mi.com" target="_blank">IoT</a><span class="sep">|</span><a rel="nofollow" href="//i.mi.com/" target="_blank">云服务</a><span class="sep">|</span><a rel="nofollow" href="//airstar.com/home" target="_blank">天星数科</a><span class="sep">|</span><a rel="nofollow" href="//youpin.mi.com/" target="_blank">有品</a><span class="sep">|</span><a rel="nofollow" href="//xiaoai.mi.com/" target="_blank">小爱开放平台</a><span class="sep">|</span><a rel="nofollow" href="//www.mi.com/aptitude/list/?id=88" target="_blank">资质证照</a><span class="sep">|</span><a rel="nofollow" href="//www.mi.com/aptitude/list/" target="_blank">协议规则</a><span class="sep">|</span><a rel="nofollow" href="//www.mi.com/appdownload/" target="_blank">下载app</a><span class="sep">|</span><a rel="nofollow" href="#">Select Location</a></div><div class="header-right"><a href="#">登录</a><span class="sep">|</span><a href="#">注册</a><span class="sep">|</span><a href="#">消息通知</a><span class="shopping"><a href="#"><span class="iconfont icon-gouwuche"></span>购物车</a></span></div></div></div><div class="top-nav"><div class="content"><div class="top-nav-left"></div><div class="top-nav-mid"><ul><li><a href="#">xiaomi手机</a></li><li><a href="#">xiaom手机</a></li><li><a href="#">手机</a></li><li><a href="#">小手机</a></li><li><a href="#">手机</a></li><li><a href="#">手机</a></li><li><a href="#">xia手机</a></li><li><a href="#">xiaomi手机</a></li><li><a href="#">手机</a></li></ul></div><div class="top-nav-right"><form action="#"><input type="text"><span class="iconfont icon-icon-test2"></span></form></div></div></div><div class="xia"><div class="content"><div class="left"><ul><li><a rel="nofollow" href="#">手机</a></li><li><a rel="nofollow" href="#">电视</a></li><li><a rel="nofollow" href="#">家电</a></li><li><a rel="nofollow" href="#">笔记本平板</a></li><li><a rel="nofollow" href="#">出行穿戴</a></li><li><a rel="nofollow" href="#">耳机音响</a></li><li><a rel="nofollow" href="#">健康儿童</a></li><li><a rel="nofollow" href="#">生活箱包</a></li><li><a rel="nofollow" href="#">智能路由器</a></li><li><a rel="nofollow" href="#">电源配件</a></li></ul></div><div class="right"><div class="zb"><span class="iconfont icon-zuo"></div><div class="yb"><span class="iconfont icon-you"></div><div class="xb"><ul><li><a rel="nofollow" href="#"> </a></li><li><a rel="nofollow" href="#"> </a></li><li><a rel="nofollow" href="#"> </a></li><li><a rel="nofollow" href="#"> </a></li><li><a rel="nofollow" href="#"> </a></li><li><a rel="nofollow" href="#"> </a></li></ul></div></div></div></div> <div class="buttom"><div class="content"><div class="aaa"><ul><li><a rel="nofollow" href="#"><span class="iconfont icon-icon-test1"></span>保障范围</a></li><li><a rel="nofollow" href="#"><span class="iconfont icon-qiyetuangou-copy"></span>企业团购</a></li><li><a rel="nofollow" href="#"><span class="iconfont icon-Fnum"></span>F码通道</a></li><li><a rel="nofollow" href="#"><span class="iconfont icon-mifenka"></span>米粉卡</a></li><li><a rel="nofollow" href="#"><span class="iconfont icon-yijiuhuanxin"></span>以旧换新</a></li><li><a rel="nofollow" href="#"><span class="iconfont icon-huafeichongzhi"></span>话费充值</a></li></ul></div><div class="zhaopian"><ul><li><a rel="nofollow" href="#"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6b67117bc92924fb2ff0e7ad2be86084.png?w=632&h=340" alt=""></a></li><li><a rel="nofollow" href="#"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8dede2520f8dfff9c9b690af498cafe8.jpg?w=632&h=340" alt=""></a></li><li><a rel="nofollow" href="#"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1ac77590368ff636d0b4f6a988133f55.png?w=632&h=340" alt=""></a></li></ul></div></div></div></div><div class="you"><a rel="nofollow" href="#"><span class="iconfont icon-shoujiapp"></span></a><a rel="nofollow" href="#"><span class="iconfont icon-gerenzhongxin"></span></a><a rel="nofollow" href="#"><span class="iconfont icon-shouhoufuwu"></span></a><a rel="nofollow" href="#"><span class="iconfont icon-rengongkefu"></span></a><a rel="nofollow" href="#"><span class="iconfont icon-gouwuche"></span></a></div></body></html>css代码
* {margin: 0;padding: 0;box-sizing: border-box;
}li {list-style: none;
}a {text-decoration: none;
}.content {width: 1226px;margin: 0 auto;
}/* header开始 */
.header {height: 40px;background-color: #333;color: #B0B0B0;font-size: 12px;
}.header .content {display: flex;justify-content: space-between;
}.header-left {width: 790px;
}.header-right {width: 230px;
}.header .content a {font-size: 12px;color: #B0B0B0;line-height: 40px;}.header .sep {margin: 0 3.6px;
}.header .shopping {margin-left: 20px;
}/* header结束 *//* top-nav */
.top-nav {height: 100px;overflow: hidden;
}.top-nav .content {display: flex;justify-content: space-between;
}.top-nav-left {width: 56px;height: 56px;background: url("https://cdn.cnbj1.fds.api.mi-img.com/mi.com-assets/shop/img/logo-mi2.png") no-repeat;background-size: 56px;margin-top: 20px;}.top-nav-mid ul {display: flex;justify-content: space-between;width: 700px;height: 100px;line-height: 100px;}.top-nav-mid ul a {color: #333;
}.top-nav-right {padding-top: 25px;width: 296px;height: 100px;line-height: 100px;
}.top-nav-right form {position: relative;width: 296px;height: 50px;}.top-nav-right input {position: absolute;left: 0;top: 0;width: 245px;height: 50px;vertical-align: middle;outline: none;
}.top-nav-right span {display: inline-block;position: absolute;right: 0;top: 0;width: 52px;height: 50px;line-height: 50px;border: 1px solid black;text-align: center;font-size: 24px;
}
/* xia */
.xia{width: 1226px;height: 460px;background: url("../素材/3.jpg") no-repeat;background-size: 1226px 460px;margin: 0 auto;}
.xia .content{position: relative;
}
.xia .content .left ul{width: 234px;height: 460px;display: block;font-size: 14px;font-weight: 400;line-height: 21px;padding: 20px 0px;}
.xia .content .left ul li{display: list-item;text-align: left;
}
.xia ul li a{width: 234px;height: 42px;display: block;height: 42px;line-height: 42px;position: relative;padding-left: 30px;float: left;
}
a{font-size: 12px;/* 去除默认样式加继承父元素 */text-decoration: none;color: inherit;
}
.xia .content .zb{left: 234px;top: 230px;position: absolute;
}
.xia .content .yb{right:0px;top: 230px;position: absolute;
}
.xia .content .xb{box-sizing:inherit;right:30px;bottom: 20px;position: absolute;
}
.xia .content .xb ul{display: flex;flex-direction: row;/* flex-direction: column-reverse; */
}
.xia .content .xb a{width: 10px;height: 10px;
}
.xia .content .xb ul li{list-style: disc;
}
.xia .content .xb ul li::marker {font-size: 15px;
}/* xia *//* bottom */
.buttom{margin-top: 15px;
}
.buttom .content .aaa{background-color: rgb(95, 87, 80);float: left;line-height: 21px;font-size: 12px;
}.buttom .content .aaa ul{width: 234px;height: 170px;line-height: 18px;text-align: center;
}.buttom .content .aaa ul li{display: list-item;float: left;width: 70px;height: 82px;padding: 0px 3px;position: relative;text-align: center;
}
.buttom .content .aaa li a{width: 70px;height: 64px;color: #ffff;display: block;font-size: 12px;line-height: 18px;padding-top: 18px;text-align: center;
}
.buttom .zhaopian{width: 978px;height: 170px;float: right;
}
.buttom .zhaopian ul{width: 978px;height: 170px;padding: 0;margin: 0;
}
.buttom .zhaopian ul li{float: left;margin-left: 15px;
}
.buttom .zhaopian ul li:nth-child(1) {margin-left: 0px;
}
.buttom .zhaopian ul li a{display: block;box-sizing: border-box;
}
.buttom .zhaopian ul li a img{height: 170px;width: 315px;text-align: left;position: relative;
}
/* bottom *//* you */
.you{color: rgb(51, 51, 51);display: flex;position:fixed;right: 57px;bottom: 40px;z-index: 99;line-height: 21px;z-index: 99;flex-direction: column;flex-direction: row-reverse;flex-direction: column-reverse;
}
.you a{display: block;font-size: 14px;text-align: center;height: 42px;width: 27px;text-decoration-style: solid;position: relative;
}
![[OAuth2]authorization_request_not_found](https://img-blog.csdnimg.cn/direct/f091c11293c742f6a47a3cc00fbb09da.png)
