小米静态页面

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>小米商城</title> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } .top1{ width: 100%; height: 32px; background-color: #333333; color: #999999; padding-top: 6px; } .border{color: #42403A;} .top1-right{ position: absolute; top: 0px; right: 0px; background-color: #333333; } .car{ background-color: #414141; } .top2{width: 100%; height: 12px; position: absolute; top: 40px;} input{position: absolute; top: 60px; right: 20%;} .box1{ width: 200px; background-color: #9D9A9A; position: absolute; left: 20px; top: 20%; } .sign{color: #E5E6E6; position: absolute; right: 5px;} img{ position: absolute; left: 20%; top: 80px; } </style> </head> <body> <div class="father"> <div class="top1">小米官网 <span class=border>|</span> 小米商城 <span class=border>|</span> 小米澎湃OS <span class=border>|</span> 小米汽车 <span class=border>|</span> 云服务 <span class=border>|</span> loT <span class=border>|</span> 有品 <span class=border>|</span> 小米开放平台 <span class=border>|</span> 资质证照 <span class=border>|</span> 协议规则 <span class=border>|</span> 下载app <span class=border>|</span> Select Location <div class="top1-right"> 登录 <span class=border>|</span> 注册 <span class=border>|</span> 消息通知 <img src="../多媒体素材/屏幕截图 2025-12-22 234719.png" alt="" width="36px" height="32px"> <span class="car">购物车(0)</span></div> </div> <br> <div class="top2"><img src="../多媒体素材/屏幕截图 2025-12-23 004232.png">Xiaomi手机 REDMI手机 电视 笔记本 平板 家电 路由器 服务中心 社区 </div> <div><input placeholder="热水器"></div> <div class="box1"> <div class="l1"><span >手机</span><span class="sign">&gt;</span></div> <div class="l1"><span >电视</span><span class="sign">&gt;</span></div> <div class="l1"><span >家电</span><span class="sign">&gt;</span></div> <div class="l1"><span >笔记本 平板 显示器</span><span class="sign">&gt;</span></div> <div class="l1"><span >出行 穿戴</span><span class="sign">&gt;</span></div> <div class="l1"><span >耳机 音箱</span><span class="sign">&gt;</span></div> <div class="l1"><span >健康 儿童</span><span class="sign">&gt;</span></div> <div class="l1"><span >生活 箱包</span><span class="sign">&gt;</span></div> <div class="l1"><span >智能 路由器</span><span class="sign">&gt;</span></div> <div class="l1"><span >电源 配件</span><span class="sign">&gt;</span></div> </div> <img src="../多媒体素材/屏幕截图 2025-12-23 010859.png"> </div> </body> </html>