效果图
上代码
<!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>小米商城</title><link rel="shortcut icon" href="/assets/static/image/logo-mi2.png" type="image/x-icon"><style>*{padding: 0;margin: 0;}a{text-decoration: none;}@font-face {font-family: 'iconfont';src: url('font/iconfont.ttf?t=1641648941995') format('truetype');}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}.top-bar{width: 100%;height: 40px;font-size: 12px;background-color: #333;}.container{width: 1326px;height: 40px;margin: 0 auto;}.top-bar .child-l{width: 900px;height: 40px;float: left;}.top-bar .child-r{width: 100px;height: 40px;float: right;}.top-bar .child-info{width: 152px;height: 40px;float: right;}.top-bar a{line-height: 40px;color: #b0b0b0;}.top-bar a:hover{color: #fff;display: inline-block;}.top-bar span{margin: .3em;color: #424242;}.header{width: 100%;height: 100px;}.header img{width: 56px;height: 56px;}.header .header-logo{float: left;width: 56px;height: 56px;margin-top: 22px;}ul,li{list-style:none;}.header-nav{float: left;width: 800px;height: 100px;margin-left: 152px;}.header .nav-list li{float: left; margin: 0 .2em; }.header .nav-list{margin-top: 32px;margin-left: 50px;}.header .nav-list a{color: #b0b0b0;font-size: 16px;display: inline-block;width: 56px;height: 78px;}.header .nav-list a:hover{color: #FF6600;}.header-search{float: right;width: 300px;height: 100px;}.header-search .search-content{width: 240px;height: 50px;margin-top: 22px;}</style></head><body><div class="top-bar"><div class="container"><div class="child-l"><a href="#">小米商城</a><span>|</span><a href="#">MIUI</a><span>|</span><a href="#">loT</a><span>|</span><a href="#">云服务</a><span>|</span><a href="#">天星数科</a><span>|</span><a href="#">有品</a><span>|</span><a href="#">小爱开放平台</a><span>|</span><a href="#">企业团购</a><span>|</span><a href="#">资质证照</a><span>|</span><a href="#">协议规则</a><span>|</span><a href="#">下载app</a><span>|</span><a href="#">智能生活</a><span>|</span><a href="#">SelectLocation</a></div><div class="child-r"><span class="iconfont">󰅹</span><a href="#">购物车 (0)</a></div> <div class="child-info"><a href="#">登录</a><span>|</span><a href="#">注册</a><span>|</span><a href="#">消息通知</a></div></div></div><div class="header"><div class="container"><a href="#" class="header-logo"><img src="/assets/static/image/logo-mi2.png" alt="小米官网"></a><div class="header-nav"><ul class="nav-list"><li><a href="#"><span>Xiaomi手机</span></a></li><li><a href="#"><span>Redmi红米</span></a></li><li><a href="#"><span>电视</span></a></li><li><a href="#"><span>笔记本</span></a></li><li><a href="#"><span>平板</span></a></li><li><a href="#"><span>家电</span></a></li><li><a href="#"><span>路由器</span></a></li><li><a href="#"><span>服务</span></a></li><li><a href="#"><span>社区</span></a></li></ul></div><div class="header-search"><input class="search-content" type="text" placeholder="路由器"></div></div></div></body></html>
