<!DOCTYPE >
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Project小米商城</title>
<link rel="stylesheet" href="css/all.css">
<style>
*{
padding: 0;
margin: 0;
list-style: none;
}
.box a{
text-decoration: none;
}
/* 顶部样式 */
.header-all{
height: 40px;
background-color:rgb(51,51,51) ;
}
.header{
height: 40px;
width: 1226px;
margin: 0 auto;
position: relative;
}
.header a{
line-height: 40px;
color: rgb(176,176,176);
font-size: 12px;
}
.header-left li{
float: left;
}
.header-left-interval{
width: 1px;
height: 15px;
background-color: rgb(59,66,69);
margin:12.5px 8px;
}
.shopping{
float:right;
}
.header-right {
float: right;
width: 260px;
}
.header-right li{
float: left;
}
.shopping-text{
float: right;
}
.shopping a{
display: block;
padding:0 20px 0 15px;
background-color: rgb(66,66,66);
}
.header a:not(.shopping a):hover{
color: white;
}
.shopping:hover a{
color: rgb(255,103,0);
background-color: white;
}
.shopping-box{
width: 300px;
height: 100px;
position: absolute;
z-index: 999;
text-align: center;
right: 0px;
top: 40px;
font-size: 12px;
box-shadow: 0px 20px 30px rgba(0,0,0,.1);
color: rgb(176,176,176);
display: none;
}
.shopping-box p{
display: table-cell;
vertical-align: middle;
}
.shopping:hover .shopping-box{
display:table;
}
/* 顶部样式 */
/* 主体样式 */
.main{
width: 1226px;
margin: 0 auto;
position: relative;
}
/* 主体part1样式 */
.main-part1{
width: 100%;
height: 100px;
margin: 0 auto;
line-height: 100px;
background-color: white;
}
.main-part1 a{
font-size: 16px;
color: rgb(51,51,51);
}
.main-part1-left{
float: left;
}
.main-part1-left img{
width: 56px;
height: 56px;
margin-top: 22px;
}
.main-part1-middle{
float: left;
margin-left: 178px;
}
.main-part1-middle li:not(.xiaomiphone-box-interval,.redmiphone-box-interval,.xiaomi-tablet-computer-box-interval){
float: left;
margin: 0 10px;
}
.main-part1-right{
float:right;
}
.main-part1-middle a:hover{
color: rgb(255,103,0);
}
.xiaomiphone-box{/* 主体part1小米手机弹盒样式 */
height: 230px;
background-color:white;
position: absolute;
display: none;
line-height: 20px;
left: 0px;
border-top: 1px rgb(224,224,224) solid;
box-shadow: 0 1px 0px rgba(0,0,0,.3);
z-index: 999999;
}
.xiaomiphone-box li{
float: left;
}
.xiaomiphone-box img{
width: 150px;
padding-top: 35px;
padding-bottom: 20px;
padding: 35px 10px 20px 10px;
}
.xiaomiphone-box p{
text-align: center;
}
.xiaomiphone-box .name{
font-size: 12px;
color: rgb(51,51,51);
}
.xiaomiphone-box .money{
font-size: 12px;
color:rgb(255,103,0);
}
.xiaomiphone:hover .xiaomiphone-box{
display: block;
}
.xiaomiphone-box-interval{
width: 1.5px;
height: 100px;
background-color:rgb(224,224,224) ;
margin: 35px 6px 0px 6px;
}/* 主体part1小米手机弹盒样式 */
.redmiphone-box{/* 主体part1红米手机弹盒样式 */
height: 230px;
background-color:white;
position: absolute;
display: none;
line-height: 20px;
left: 0px;
border-top: 1px rgb(224,224,224) solid;
box-shadow: 0 1px 0px rgba(0,0,0,.3);
z-index: 999999;
}
.redmiphone-box li{
float: left;
}
.redmiphone-box img{
width: 150px;
padding-top: 35px;
padding-bottom: 20px;
padding: 35px 10px 20px 10px;
}
.redmiphone-box p{
text-align: center;
}
.redmiphone-box .name{
font-size: 12px;
color: rgb(51,51,51);
}
.redmiphone-box .money{
font-size: 12px;
color:rgb(255,103,0);
}
.redmiphone:hover .redmiphone-box{
display: block;
}
.redmiphone-box-interval{
width: 1.5px;
height: 100px;
background-color:rgb(224,224,224) ;
margin: 35px 6px 0px 6px;
}/* 主体part1红米手机弹盒样式 */
.xiaomi-tablet-computer-box{/* 主体part1小米平板弹盒样式 */
width: 1226px;
height: 230px;
background-color:white;
position: absolute;
display: none;
line-height: 20px;
left: 0px;
border-top: 1px rgb(224,224,224) solid;
box-shadow: 0 1px 0px rgba(0,0,0,.3);
z-index: 999999;
}
.xiaomi-tablet-computer-box li{
float: left;
}
.xiaomi-tablet-computer-box img{
width: 150px;
padding-top: 35px;
padding-bottom: 20px;
padding: 35px 10px 20px 10px;
}
.xiaomi-tablet-computer-box p{
text-align: center;
}
.xiaomi-tablet-computer-box .name{
font-size: 12px;
color: rgb(51,51,51);
}
.xiaomi-tablet-computer-box .money{
font-size: 12px;
color:rgb(255,103,0);
}
.xiaomi-tablet-computer:hover .xiaomi-tablet-computer-box{
display: block;
}
.xiaomi-tablet-computer-box-interval{
width: 1.5px;
height: 100px;
background-color:rgb(224,224,224) ;
margin: 35px 6px 0px 6px;
}/* 主体part1小米平板弹盒样式 */
/* 主体part1样式 */
/* 主体part2样式 */
.main-part2-left{/* 主体part2左边样式 */
width: 233.5px;
height: 420px;
padding: 20px 0;
background-color: rgb(90,90,97);
float: left;
/* display: table; */
}
.main-part2-left .topic a{
display:table-cell;
width: 213.5px;
height: 42px;
padding-left:30px ;
font-size: 16px;
color: white;
vertical-align: middle;
position:relative;
z-index: 99999;
}
.main-part2-left .topic i{
float: right;
padding-right:30px ;
}
.main-part2-left .topic a:not(.photo-box a):hover{
background-color: rgb(255,103,0);
}/* 主体part2左边样式 */
/* 主体part2右边样式 */
.main-part2-right{
position: relative;
width: 1226px;
height: 460px;
}
.main-part2-right .photo{
position: absolute;
right: 0;
top: 0;
}
.main-part2-right img{
width: 992.5px;
height: 460px;
/* float: right; */
/* position: absolute; */
}
.main-part2-right-photo li:nth-child(1){
z-index: 1;
}
.main-part2-right-point{
z-index: 99;
position: absolute;
bottom: 20px;
}
.main-part2-right .pointer{
z-index: 9999;
position: absolute;
bottom: 20px;
right: 20px;
}
.main-part2-right .pointer a{
float: left;
width:10px ;
height: 10px;
background-color: rgba(255,255,255,.6);
border-radius: 50%;
margin: 0 4px;
background-clip: content-box;/* 将背景颜色值设置到内容区,边框和内边距不再有背景颜色 */
border: 2px transparent solid;
}
.main-part2-right .pointer a.active,
.main-part2-right .pointer a:hover{
background-color: #fff;
border:2px rgba(255,255,255,.6) solid ;
}/* 主体part2右边样式 */
/* 左边手机弹盒样式*/
.phone-box{
width:992.5px;
height: 460px;
}
.phone-box li{
float: left;
}
.photo-box{
width: 972.5px;
height: 440px;
background-color:white;
position: absolute;
z-index: 99999999;
padding: 10px;
right:0 ;
top:100px;
box-shadow: 0px 1px 5px rgba(0,0,0,.3);
display: none;
}
.photo-box li{
float: left;
width: 240px;
height: 72px;
margin-top: 5px;
}
.photo-box img{
padding: 5px;
float: left;
}
.photo-box a{
color: black;
}
.photo-box span{
display: block;
padding: 20px;
font-size: 14px;
color: black;
}
.topic:hover .photo-box{
display: block;
}
.photo-box a:hover span{
/* background-color: white; */
color: rgb(255,137,41);
}/* 左边手机弹盒 */
/* 主体part3样式 */
.main-part3{
width: 1226px;
height: 170px;
margin-top:20px ;
position: relative;
/* background-color: rgb(95,87,80); */
}
.main-part3-left{
width: 233.5px;
height: 170px;
float: left;
background-color: rgb(95,87,80);
}
.main-part3-left a{
width: 74.5px;
height: 63px;
float: left;
border: 1px rgb(102,94,87) solid;
color: rgb(165,169,161);
text-align: center;
font-size: 14px;
padding-top:20px ;
display: block;
/* z-index: 99999; */
}
.main-part3-left i{
padding-bottom: 3px;
}
.main-part3-left a:hover{
color: white;
}
.main-part3-right{
width: 992.5px;
height:170px ;
float:right ;
}
.main-part3-right li{
/* width: 100px; */
float: left;
margin-left: 14.5px;
}
.main-part3-right img{
height: 100%;
}/* 主体part3样式 */
/* 主体样式 */
</style>
</head>
<body>
<div class="box"><!-- 外部框架 -->
<div class="header-all"><!-- 顶部总体 -->
<div class="header"><!-- 顶部 -->
<ul class="header-left"><!-- 顶部左边 -->
<li class="header-left-part"><a href="javascript:;">小米商城</a></li>
<li class="header-left-interval"></li>
<li class="header-left-part"><a href="javascript:;">MIUI</a></li>
<li class="header-left-interval"></li>
<li class="header-left-part"><a href="javascript:;">loT</a></li>
<li class="header-left-interval"></li>
<li class="header-left-part"><a href="javascript:;">云服务</a></li>
<li class="header-left-interval"></li>
<li class="header-left-part"><a href="javascript:;">天星数科</a></li>
<li class="header-left-interval"></li>
<li class="header-left-part"><a href="javascript:;">有品</a></li>
<li class="header-left-interval"></li>
<li class="header-left-part"><a href="javascript:;">小爱开放平台</a></li>
<li class="header-left-interval"></li>
<li class="header-left-part"><a href="javascript:;">企业团购</a></li>
<li class="header-left-interval"></li>
<li class="header-left-part"><a href="javascript:;">资质证照</a></li>
<li class="header-left-interval"></li>
<li class="header-left-part"><a href="javascript:;">协议规则</a></li>
<li class="header-left-interval"></li>
<li class="header-left-part"><a href="javascript:;">下载app</a></li>
<li class="header-left-interval"></li>
<li class="header-left-part"><a href="javascript:;">智能生活</a></li>
<li class="header-left-interval"></li>
<li class="header-left-part"><a href="javascript:;">Select Location</a></li>
</ul><!-- 顶部左边 -->
<div class="header-right"><!-- 顶部右边 -->
<ul class="header-right-part">
<li><a href="javascript:;">登录</a></li>
<li class="header-left-interval"></li>
<li><a href="javascript:;">注册</a></li>
<li class="header-left-interval"></li>
<li><a href="javascript:;">消息通知</a></li>
</ul>
<ul class="shopping">
<li class="shopping-text"><a href="javascript:;"><i class="fas"></i> 购物车 (0)</a></li>
<li class="shopping-box"><p>购物车中还没有商品,赶紧选购吧!</p></li>
</ul>
</div><!-- 顶部右边 -->
</div><!-- 顶部 -->
</div><!-- 顶部总体 -->
<div class="main"><!-- 主体部分 -->
<div class="main-part1"><!-- 主体part1 -->
<div class="main-part1-left"><!-- 主体part1左边部分 -->
<a href="javasript:;"><img src="C:\Users\西哥\Desktop\likepicture\小米官网项目图片/微信图片_20211204102815.png" alt="xioami.logo"></a>
</div><!-- 主体part1左边部分 -->
<div class="main-part1-middle"><!-- 主体part1中间部分 -->
<ul>
<li class="xiaomiphone">
<a href="javascript:;">Xiaomi手机</a>
<div class="xiaomiphone-box"><!-- 小米手机弹盒 -->
<ul>
<li>
<a href="javascript:;">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8cad77bda138fd94eadbc2ddfced7c56.png?thumb=1&w=200&h=138&f=webp&q=90"/>
<p class="name">Xiaomi Civy</p>
<p class="money">2599元起</p>
</a>
</li>
<li class="xiaomiphone-box-interval"></li>
<li>
<a href="javascript:;">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/087c52d253d9301dff7743d6bf2d0330.png?thumb=1&w=200&h=138&f=webp&q=90"/>
<p class="name">Xiaomi MIX 4</p>
<p class="money">4199元起</p>
</a>
</li>
<li class="xiaomiphone-box-interval"></li>
<li>
<a href="javascript:;">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/85e44ea2405ff8414148bbde7446b137.png?thumb=1&w=200&h=138&f=webp&q=90"/>
<p class="name">Xiaomi MIX FOLD</p>
<p class="money">7199元起</p>
</a>
</li>
<li class="xiaomiphone-box-interval"></li>
<li>
<a href="javascript:;">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1a359e9346e3c6ee8c9d8389e3fd9458.png?thumb=1&w=200&h=138&f=webp&q=90"/>
<p class="name">Xiaomi MIX Ultra</p>
<p class="money">5499元起</p>
</a>
</li>
<li class="xiaomiphone-box-interval"></li>
<li>
<a href="javascript:;">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a1c45eadcedeb27b1cafca0359422da9.png?thumb=1&w=200&h=138&f=webp&q=90"/>
<p class="name">Xiaomi 11 Pro</p>
<p class="money">3999元起</p>
</a>
</li>
<li class="xiaomiphone-box-interval"></li>
<li>
<a href="javascript:;">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/56e3379b5422cb06e5c8a0c546445606.png?thumb=1&w=200&h=138&f=webp&q=90"/>
<p class="name">Xiaomi 11 青春版</p>
<p class="money">1999元起</p>
</a>
</li>
</ul>
</div><!-- 小米手机弹盒 -->
</li>
<li class="redmiphone">
<a href="javascript:;">Redmi 红米</a>
<div class="redmiphone-box"><!-- 红米手机弹盒 -->
<ul>
<li>
<a href="javascript:;">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7e78629420a392da6fd3e34dae9fac5d.png?thumb=1&w=200&h=138&f=webp&q=90"/>
<p class="name">Redmi Note 11 Pro系列</p>
<p class="money">1799元起</p>
</a>
</li>
<li class="redmiphone-box-interval"></li>
<li>
<a href="javascript:;">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/25149bd95f33f9814aa4c4983c0d9b71.png?thumb=1&w=200&h=138&f=webp&q=90"/>
<p class="name">Redmi Note 11 5G</p>
<p class="money">1199元起</p>
</a>
</li>
<li class="redmiphone-box-interval"></li>
<li>
<a href="javascript:;">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a785b54d06c72ff63e64d0fa51ee02f5.png?thumb=1&w=200&h=138&f=webp&q=90"/>
<p class="name">Redmi Note 11 4G</p>
<p class="money">999元起</p>
</a>
</li>
<li class="redmiphone-box-interval"></li>
<li>
<a href="javascript:;">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e3c5d99c28700a3c45ea65eebbea0a04.png?thumb=1&w=200&h=138&f=webp&q=90"/>
<p class="name">Redmi Note 10 Pro</p>
<p class="money">1499元起</p>
</a>
</li>
<li class="redmiphone-box-interval"></li>
<li>
<a href="javascript:;">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/88bb84ff06f0ab467b859aeed36b817a.png?thumb=1&w=200&h=138&f=webp&q=90"/>
<p class="name">Redmi Note 11 5G</p>
<p class="money">1099元起</p>
</a>
</li>
<li class="redmiphone-box-interval"></li>
<li>
<a href="javascript:;">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/acd0f27496ccdf81ef42124c35e8bfc4.png?thumb=1&w=200&h=138&f=webp&q=90"/>
<p class="name">K40 游戏增强版</p>
<p class="money">1999元起</p>
</a>
</li>
</ul>
</div><!-- 红米手机弹盒 -->
</li>
<li><a href="javascript:;">电视</a></li>
<li><a href="javascript:;">笔记本</a></li>
<li class="xiaomi-tablet-computer">
<a href="javascript:;">平板</a>
<div class="xiaomi-tablet-computer-box"><!-- 小米平板弹盒 -->
<ul>
<li>
<a href="javascript:;">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/33de34a4caf2834a1828dc51203dc922.png?thumb=1&w=200&h=138&f=webp&q=90"/>
<p class="name">小米平板5</p>
<p class="money">1999元起</p>
</a>
</li>
<li class="xiaomi-tablet-computer-box-interval"></li>
<li>
<a href="javascript:;">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/aad55902a2cc64bf0306b004adb14ef7.png?thumb=1&w=200&h=138&f=webp&q=90"/>
<p class="name">小米平板5 Pro</p>
<p class="money">2499元起</p>
</a>
</li>
</ul>
</div><!-- 小米平板弹盒 -->
</li>
<li><a href="javascript:;">家电</a></li>
<li><a href="javascript:;">路由器</a></li>
<li><a href="javascript:;">服务</a></li>
<li><a href="javascript:;">社区</a></li>
</ul>
</div><!-- 主体part1中间部分 -->
<div class="main-part1-right"><!-- 主体part1右边部分 -->
<form>
<input style="width:250px;height: 50px;font-size: 14px;color: rgb(149,149,149);margin-top: 6px;" name="sourse" value=" 手机"/>
<button style="width: 50px;height: 50px;margin:0 0 0 -6px;" submit"><i class="fas"></i></button>
</form>
</div><!-- 主体part1右边部分 -->
</div><!-- 主体part1 -->
<div class="main-part2"><!-- 主体part2 -->
<ul class="main-part2-left"><!-- 主体part2左边部分 -->
<li class="topic">
<a href="javascript:;">手机<i class="fas"></i></a>
<div class="photo-box"><!-- 手机弹盒 -->
<ul>
<li>
<a href="javascript:;">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a95d59ec8c9c6ae7061f314eb4901e7c.png?thumb=1&w=50&h=50&f=webp&q=90">
<span>Note 11 Pro系列</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90">
<span>Xiaomi MIX FOLD</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0e5aa3cab478f5eeba1c7d4cf25cba9a.png?thumb=1&w=50&h=50&f=webp&q=90">
<span>K40 Pro 系列</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/958d5b4cf1f6a755b97b797f4cec67ed.png?thumb=1&w=50&h=50&f=webp&q=90">
<span>黑鲨4S</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e2c570b7cd666114a7d351a1dd10a527.png?thumb=1&w=50&h=50&f=webp&q=90">
<span>Note 11 4G</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a1241b5a94ba1739e85f72d46592af0e.png?thumb=1&w=50&h=50&f=webp&q=90">
<span>Xiaomi 11 Ultra</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/79e2935264bf9247aa7512e330112820.png?thumb=1&w=50&h=50&f=webp&q=90">
<span>Note 10 5G</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/947721c8bc4a4ecc3bca17237ee64dea.png?thumb=1&w=50&h=50&f=webp&q=90">
<span>Redmi Note 9 4G</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ca3caca774dc8be0a453c90d1fa58e13.png?thumb=1&w=50&h=50&f=webp&q=90">
<span>Note 11 5G</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6cf44dfe89111cb35e1a2211481ff546.png?thumb=1&w=50&h=50&f=webp&q=90">
<span>Xioami 11 Pro</span>
</a>
</li>
<li><a href="javascript:;">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/56bb7e2d44cef71c3afedaeae3d98927.png?thumb=1&w=50&h=50&f=webp&q=90">
<span>Note 10 Pro</span>
</a></li>
<li>
<a href="javascript:;">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/970c6b287eb89620f5ee8e2b347f6f3d.png?thumb=1&w=50&h=50&f=webp&q=90">
<span>Redmi Note 9 5G</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/92fdd051100722d25323e9bd188befc5.png?thumb=1&w=50&h=50&f=webp&q=90">
<span>Redmi K40</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a51c1afa4db8e47e62fad1f6fa4a8970.png?thumb=1&w=50&h=50&f=webp&q=90">
<span>Xiaomi 11</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1db88cd66ff1a6a3e75116988b7f3e12.jpg?thumb=1&w=50&h=50&f=webp&q=90">
<span>Redmi 9A</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/76378ce289a36fcfa29f704ba90b4155.png?thumb=1&w=50&h=50&f=webp&q=90">
<span>Redmi Note 9 Pro</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f33903e1162959f500360a39896f2306.png?thumb=1&w=50&h=50&f=webp&q=90">
<span>Xiaomi Civi</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=50&h=50&f=webp&q=90">
<span>Xiaomi 10S</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=50&h=50&f=webp&q=90">
<span>Xioami 11 青春</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0cadc8b00dbe3b5615bd6ab657715baf.png?thumb=1&w=50&h=50&f=webp&q=90">
<span>Redmi 9</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fa2bae1f43611e80a8e4877719c76bdb.png?thumb=1&w=50&h=50&f=webp&q=90">
<span>Redmi MIX 4</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab956ee82c24bdd83d21bc212aad3eb5.png?thumb=1&w=50&h=50&f=webp&q=90">
<span>K40 游戏增强版</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b45cbcf2bbe244982b2e865fa5077a52.png?thumb=1&w=50&h=50&f=webp&q=90">
<span>黑鲨 4S Pro</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/77bfd346ad97807237beca297cfe2fba.png?thumb=1&w=50&h=50&f=webp&q=90">
<span>Redmi 8A</span>
</a>
</li>
</ul>
</div><!-- 手机弹盒 -->
</li>
<li class="topic"><a href="javascript:;">电视<i class="fas"></i></a></li>
<li class="topic"><a href="javascript:;">笔记本 平板<i class="fas"></i></a></li>
<li class="topic"><a href="javascript:;">家电<i class="fas"></i></a></li>
<li class="topic"><a href="javascript:;">出行 穿戴<i class="fas"></i></a></li>
<li class="topic"><a href="javascript:;">智能 路由器<i class="fas"></i></a></li>
<li class="topic"><a href="javascript:;">电源 配件<i class="fas"></i></a></li>
<li class="topic"><a href="javascript:;">健康 儿童<i class="fas"></i></a></li>
<li class="topic"><a href="javascript:;">耳机 音箱<i class="fas"></i></a></li>
<li class="topic"><a href="javascript:;">生活 箱包<i class="fas"></i></a></li>
</ul><!-- 主体part2左边部分 -->
<div class="main-part2-right"><!-- 主体part2右边部分 -->
<ul class="main-part2-right-photo"><!-- 切换图片列表 -->
<li class="photo"><a href="javascript:;"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/03163750afcd9567becd616f0ec5a603.jpeg?thumb=1&w=1533&h=575&f=webp&q=90" alt="commodity.logo"></a></li>
<li class="photo"><a href="javascript:;"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/61bef947ca0b863003b3e68336192a3a.jpg?thumb=1&w=1533&h=575&f=webp&q=90" alt="commodity.logo"></a></li>
<li class="photo"><a href="javascript:;"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0ce57203f1618c7554d8a22f92e18446.jpg?w=2452&h=920" alt="commodity.logo"></a></li>
<li class="photo"><a href="javascript:;"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/19f12ce5a1770c2a23188f1055258967.jpg?thumb=1&w=1533&h=575&f=webp&q=90" alt="commodity.logo"></a></li>
<li class="photo"><a href="javascript:;"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/918820682e4a490221cfd92b24c14b86.jpg?thumb=1&w=1533&h=575&f=webp&q=90" alt="commodity.logo"></a></li>
</ul><!-- 切换图片列表 -->
<div class="pointer"><!-- 切换点 -->
<a class="active" href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div><!-- 切换点 -->
</div><!-- 主体part2右边部分 -->
</div><!-- 主体part2 -->
<div class="main-part3"><!-- 主体part3 -->
<ul class="main-part3-left">
<li><a href="javascript:;"><i class="fas"></i><br>保障服务</a></li>
<li><a href="javascript:;"><i class="fas"></i><br>企业团购</a></li>
<li><a href="javascript:;"><i class="fab"></i><br>F码通道</a></li>
<li><a href="javascript:;"><i class="fas"></i><br>米粉卡</a></li>
<li><a href="javascript:;"><i class="fas"></i><br>以旧换新</a></li>
<li><a href="javascript:;"><i class="fas"></i><br>话费充值</a></li>
</ul>
<ul class="main-part3-right">
<li><a href="javascript:;"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d8a6d6d37904e22c72130e3e4ec79b41.jpg?w=632&h=340"/></a></li>
<li><a href="javascript:;"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fce474f4024b96545959ccd45b7e50f3.jpg?w=632&h=340"/></a></li>
<li><a href="javascript:;"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/35b3f906861db9d6472206e6d68318d9.jpeg?w=632&h=340"/></a></li>
</ul>
</div><!-- 主体part3 -->
</div><!-- 主体部分 -->
</div><!-- 外部框架 -->
</body>
</html>