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;
}
openvela 操作系统专为 AIoT 领域量身定制，以轻量化、标准兼容、安全性和高度可扩展性为核心特点。openvela 以其卓越的技术优势，已成为众多物联网设备和 AI 硬件的技术首选，涵盖了智能手表、运动手环、智能音箱、耳机、智能家居设备以及机器人等多个领域。
更多推荐
7
0- 0
已为社区贡献1条内容
所有评论(0)