Xiaomi 商城页面布局（部分）
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="./iconfont/font_5091072_tb3aw77nha/iconfont.css"> </head> <header> <nav class="top0"> <div class="top0-words"> <div class="top0-items"> <a href="">小米官网</a> <span class="gap">|</span> <a href="">小米商城</a> <span class="gap">|</span> <a href="">小米澎湃OS</a> <span class="gap">|</span> <a href="">小米汽车</a> <span class="gap">|</span> <a href="">云服务</a> <span class="gap">|</span> <a href="">loT</a> <span class="gap">|</span> <a href="">有品</a> <span class="gap">|</span> <a href="">小爱开放平台</a> <span class="gap">|</span> <a href="">资质证照</a> <span class="gap">|</span> <a href="">协议规则</a> <span class="gap">|</span> <a href="">下载app</a> <span class="gap">|</span> <a href="">Select Location</a> </div> <div class="login"> <a href="">登录</a> <span class="gap">|</span> <a href="">注册</a> <span class="gap">|</span> <a href="">消息通知</a> <div class="shopping"> <svg class="shopping-cart" aria-hidden="true"> <use xlink:href="#icon-gouwuchekong"></use> </svg> <a href="" class="shop-a">购物车</a> <div class="sub-content">购物车中还没有商品，赶紧选购吧！</div> </div> </div> </div> </nav> </header> <body> <aside class="side-right"> <div class="side-div"> <span class="iconfont1"></span> <p class="side-text">手机APP</p> </div> <div class="side-div"> <span class="iconfont1"></span> <p class="side-text">个人中心</p> </div> <div class="side-div"> <span class="iconfont1"></span> <p class="side-text">售后服务</p> </div> <div class="side-div"> <span class="iconfont1"></span> <p class="side-text">人工客服</p> </div> <div class="side-div"> <span class="iconfont1"></span> <p class="side-text">购物车</p> </div> </aside> <div class="top1"> <div class="container"> <svg class="mi-logo" aria-hidden="true"> <use xlink:href="#icon-icon-xiaomiguishu"></use> </svg> <div class="top1-center"> <span class="top1-name">Xiaomi手机</span> <span class="top1-name">REDMI手机</span> <span class="top1-name">电视</span> <span class="top1-name">笔记本</span> <span class="top1-name">平板</span> <span class="top1-name">家电</span> <span class="top1-name">路由器</span> <span class="top1-name">服务中心</span> <span class="top1-name">社区</span> </div> <form class="top1-search" action="#" method="get" > <input class="search" type="text" id="search" placeholder="热水器"> <svg class="icon-search" aria-hidden="true"> <use xlink:href="#icon-sousuo"></use> </svg> </form> </div> </div> <div class="center"> <div class="center1"> <img src="./imgs/center.png" class="center1-img"> <ul class="center1-left"> <li>手机 <svg class="icon-ul1" aria-hidden="true"><use xlink:href="#icon-dayuhao"></use></svg></li> <li>电视 <svg class="icon-ul1" aria-hidden="true"><use xlink:href="#icon-dayuhao"></use></svg></li> <li>家电 <svg class="icon-ul1" aria-hidden="true"><use xlink:href="#icon-dayuhao"></use></svg></li> <li>笔记本 平板 显示器 <svg class="icon-ul1" aria-hidden="true"><use xlink:href="#icon-dayuhao"></use></svg></li> <li>出行 穿搭 <svg class="icon-ul1" aria-hidden="true"><use xlink:href="#icon-dayuhao"></use></svg></li> <li>耳机 音箱 <svg class="icon-ul1" aria-hidden="true"><use xlink:href="#icon-dayuhao"></use></svg></li> <li>健康 儿童 <svg class="icon-ul1" aria-hidden="true"><use xlink:href="#icon-dayuhao"></use></svg></li> <li>生活 箱包 <svg class="icon-ul1" aria-hidden="true"><use xlink:href="#icon-dayuhao"></use></svg></li> <li>智能 路由器 <svg class="icon-ul1" aria-hidden="true"><use xlink:href="#icon-dayuhao"></use></svg></li> <li>电源 配件 <svg class="icon-ul1" aria-hidden="true"><use xlink:href="#icon-dayuhao"></use></svg></li> </ul> <div class="img1-jt"> <svg class="img1-jiantou" aria-hidden="true"><use xlink:href="#icon-xiaoyuhao"></use></svg> <svg class="img1-jiantou" aria-hidden="true"><use xlink:href="#icon-dayuhao"></use></svg> </div> </div> </div> <div class="foot"> <div class="foot1"> <div class="footleft"> <ul class="fl-ul"> <li> <span class="iconfont icon-shizhong"></span> <p>保障服务</p> </li> <li> <span class="iconfont icon-qiyetuangou-01"></span> <p>企业团购</p> </li> <li> <span class="iconfont icon-Fmatongdao"></span> <p>F码通道</p> </li> <li> <span class="iconfont icon-mifenka"></span> <p>米粉卡</p> </li> <li> <span class="iconfont icon-jinqianzhuanhuan"></span> <p>以旧换新</p> </li> <li> <span class="iconfont icon-huafeichongzhi"></span> <p>话费充值</p> </li> </ul> </div> <div class="ftcenter1"> <img class="f1" src="./imgs/f1.png"> <img class="f1" src="./imgs/f2.png"> <img class="f1" src="./imgs/f3.png"> </div> </div> </div> <script src="./iconfont/font_5090622_8uwmhtih5w9/iconfont.js"></script> </body> </html>CSS部分：
*{ margin: 0; padding: 0; } @font-face { font-family: 'iconfont1'; src: url('./iconfont/font_5091011_d1kysc1n4jh/iconfont.woff2') format('woff2'), url('./iconfont/font_5091011_d1kysc1n4jh/iconfont.woff') format('woff'), url('./iconfont/font_5091011_d1kysc1n4jh/iconfont.ttf') format('truetype'); } .iconfont1 { font-family: "iconfont1" !important; font-size: 30px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin: 5px; } .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } a{ text-decoration: none; font-size: 12px; color: #b0b0b0; margin-left: 8px; margin-right: 8px; } .top0{ padding: 0; margin: 0; height: 40px; background-color: #333; } .top0-words{ width: 1226px; margin: 0 auto; display: flex; justify-content: space-between; height: 40px; line-height: 40px; } .top0-items{ display: flex; } .login{ display: flex; } .shopping{ position: relative; display: flex; height: 40px; margin-left: 5px; background-color: #424242; cursor: pointer; transition: all 0.6s; } .shopping:hover{ background-color: white; } .shop-a{ line-height: 40px; padding-right: 1px; text-align: center; } .shopping-cart{ width: 40px; padding-left: 5px; padding-top: 7px; padding-bottom: 7px; } .sub-content{ position: absolute; top: 40px; right: 0; width: 316px; height: 80px; background-color:white; text-align: center; color: black; display: none; cursor:default; box-shadow: 0 0 10px 0 rgba(0,0,0,.3) ; z-index: 2; } .shopping:hover .sub-content{ display: inline-block; } .gap{ color: #424242; margin: 0.3px; } .top1{ position: relative; padding: 0; display: flex; justify-content: space-between; align-items: center; width: 1226px; margin: 0 auto; } .top1 > .container{ position: absolute; top: -20px; margin: 0; padding: 0; display: flex; flex: 1; justify-content: space-between; align-items: center; width: 1226px; margin: 0 auto; } .mi-logo{ display: flex; width: 55px; padding:0; } .top1-center{ padding: 30px; cursor: pointer; transition: all 0.6s; } .top1-name{ margin-left: 20px; color: #424242; } .search{ width: 245px; height: 50px; border: 1px solid lightgray; } .search::placeholder{ padding-left: 15px; line-height: 50px; } .icon-search{ width: 30px; height: 30px; border: 1px solid lightgray; position: absolute; padding: 10px; } .center{ position: relative; display: flex; width: 1226px; margin: 0 auto; } .center1{ display: flex; width: 1226px; margin: 0 auto; position: absolute; top: 100px; } .center1-img{ position: absolute; width: 1226px; height: 460px; z-index: 1; cursor: pointer; } ul{ list-style-type: none; } .center1-left{ width: 234px; display: grid; grid-template-rows: repeat(10,42px); position: absolute; z-index: 2; padding: 20px; padding-left: 30px; line-height: 42px; background-color:rgba(105,101,101,.6); cursor: pointer; } .center1-left li{ display: flex; justify-content: space-between; align-items: center; color: #fff; } .icon-ul1{ width: 16px; height: 16px; z-index: 2; padding: 14px; color: #fff; } .img1-jt{ width: 942px; display: flex; justify-content: space-between; z-index: 2; padding-left: 285px; padding-top: 190px; } .img1-jiantou{ width: 41px; height: 69px; } .side-right{ position: fixed; right: 0; bottom: 100px; display: grid; grid-template-rows: repeat(5,90px); width: 90px; color:#b0b0b0; z-index: 2; background-color: #fff; } .side-div{ border: 1px solid #f5f5f5; color: #757575; text-align: center; font-size: 14px; cursor: pointer; padding: 15px; } .foot1{ width: 1226px; margin: 0 auto; position: relative; top: 570px; display: flex; } .fl-ul{ background-color: #5f5750; color: #fff; display: grid; grid-template-rows: repeat(2,80px); grid-template-columns: repeat(3,95px); width: 284px; } .fl-ul li{ border: 1px solid #a19d9d; font-size: 12px; text-align: center; line-height: 27px; padding-top: 5px; } .f1{ display: flex; height: 160px; } .ftcenter1{ width: 1094px; display: flex; justify-content: space-between; margin-left: 15px; } .footleft{ display: flex; }