小米商城html+css+js全代码
小米商城全代码，供参考，互相学习
·
差不多完成页面就是这样的，这里只展出两页
一共需要这些文件，自己建完就行
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="css/index.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Xiaomi</title>
</head>
<body>
<a name="top"></a>
<!-- 右下侧广告 -->
<!-- top start -->
<div class="top-bar">
<div class="container">
<div class="container-nav">
<a href="#" class="nav-1">小米商城</a>
<span class="sep">|</span>
<a href="#" class="nav-1">MIUI</a>
<span class="sep">|</span>
<a href="#" class="nav-1">loT</a>
<span class="sep">|</span>
<a href="#" class="nav-1">云服务</a>
<span class="sep">|</span>
<a href="#" class="nav-1">天星数科</a>
<span class="sep">|</span>
<a href="#" class="nav-1">有品</a>
<span class="sep">|</span>
<a href="#" class="nav-1">小爱开放平台</a>
<span class="sep">|</span>
<a href="#" class="nav-1">企业团购</a>
<span class="sep">|</span>
<a href="#" class="nav-1">资质证照</a>
<span class="sep">|</span>
<a href="#" class="nav-1">协议规则</a>
<span class="sep">|</span>
<a href="#" class="nav-1 down">下载app</a>
<div class="download-app">
<img src="./img/download.png" alt="">
<p>小米商城app</p>
</div>
<div class="sj"></div>
<span class="sep">|</span>
<a href="#" class="nav-1">智能生活</a>
<span class="sep">|</span>
<a href="#" class="nav-1">Select Location</a>
<span class="sep">|</span>
</div>
<div class="gwc">
<img src="./img/购物车.png" alt="">
<span>购物车(0)</span>
<div class="gwc-list">
购物车中还没有商品，赶紧选购吧！
</div>
</div>
<div class="container-right">
<a href="#" class="nav-1">登录</a>
<span class="sep">|</span>
<a href="#" class="nav-1">注册</a>
<span class="sep">|</span>
<a href="#" class="nav-1" style="margin-right: 20px;">消息通知</a>
</div>
</div>
</div>
<!-- top-end -->
<!-- middle start -->
<div class="middle-content">
<div class="header-logo">
<div class="logo">
<img src="./img/mi.png" alt="">
</div>
<div class="header-nav">
<ul>
<li class="header-nav-li">Xiaomi手机</li>
<div class="header-item">
<div class="header-item-content">
<img src="./img/head.webp" alt="">
<p>Xiaomi Civi</p>
<p>2599元起</p>
</div>
<div class="shu"></div>
<div class="header-item-content">
<img src="./img/head.webp" alt="">
<p>Xiaomi Civi</p>
<p>2599元起</p>
</div>
<div class="shu"></div>
<div class="header-item-content">
<img src="./img/head.webp" alt="">
<p>Xiaomi Civi</p>
<p>2599元起</p>
</div>
<div class="shu"></div>
<div class="header-item-content">
<img src="./img/head.webp" alt="">
<p>Xiaomi Civi</p>
<p>2599元起</p>
</div>
<div class="shu"></div>
<div class="header-item-content">
<img src="./img/head.webp" alt="">
<p>Xiaomi Civi</p>
<p>2599元起</p>
</div>
<div class="shu"></div>
<div class="header-item-content">
<img src="./img/head.webp" alt="">
<p>Xiaomi Civi</p>
<p>2599元起</p>
</div>
</div>
<li class="header-nav-li">Redmi手机</li>
<div class="header-item">
<div class="header-item-content">
<img src="./img/head.webp" alt="">
<p>Xiaomi Civi</p>
<p>2599元起</p>
</div>
<div class="shu"></div>
<div class="header-item-content">
<img src="./img/head.webp" alt="">
<p>Xiaomi Civi</p>
<p>2599元起</p>
</div>
<div class="shu"></div>
<div class="header-item-content">
<img src="./img/head.webp" alt="">
<p>Xiaomi Civi</p>
<p>2599元起</p>
</div>
<div class="shu"></div>
<div class="header-item-content">
<img src="./img/head.webp" alt="">
<p>Xiaomi Civi</p>
<p>2599元起</p>
</div>
<div class="shu"></div>
<div class="header-item-content">
<img src="./img/head.webp" alt="">
<p>Xiaomi Civi</p>
<p>2599元起</p>
</div>
<div class="shu"></div>
<div class="header-item-content">
<img src="./img/head.webp" alt="">
<p>Xiaomi Civi</p>
<p>2599元起</p>
</div>
</div>
<li class="header-nav-li">电视</li>
<div class="header-item">
<div class="header-item-content">
<img src="./img/head.webp" alt="">
<p>Xiaomi Civi</p>
<p>2599元起</p>
</div>
<div class="shu"></div>
<div class="header-item-content">
<img src="./img/head.webp" alt="">
<p>Xiaomi Civi</p>
<p>2599元起</p>
</div>
<div class="shu"></div>
<div class="header-item-content">
<img src="./img/head.webp" alt="">
<p>Xiaomi Civi</p>
<p>2599元起</p>
</div>
<div class="shu"></div>
<div class="header-item-content">
<img src="./img/head.webp" alt="">
<p>Xiaomi Civi</p>
<p>2599元起</p>
</div>
<div class="shu"></div>
<div class="header-item-content">
<img src="./img/head.webp" alt="">
<p>Xiaomi Civi</p>
<p>2599元起</p>
</div>
<div class="shu"></div>
<div class="header-item-content">
<img src="./img/head.webp" alt="">
<p>Xiaomi Civi</p>
<p>2599元起</p>
</div>
</div>
<li class="header-nav-li">笔记本</li>
<div class="header-item">
<div class="header-item-content">
<img src="./img/head.webp" alt="">
<p>Xiaomi Civi</p>
<p>2599元起</p>
</div>
<div class="shu"></div>
<div class="header-item-content">
<img src="./img/head.webp" alt="">
<p>Xiaomi Civi</p>
<p>2599元起</p>
</div>
<div class="shu"></div>
<div class="header-item-content">
<img src="./img/head.webp" alt="">
<p>Xiaomi Civi</p>
<p>2599元起</p>
</div>
<div class="shu"></div>
<div class="header-item-content">
<img src="./img/head.webp" alt="">
<p>Xiaomi Civi</p>
<p>2599元起</p>
</div>
<div class="shu"></div>
<div class="header-item-content">
<img src="./img/head.webp" alt="">
<p>Xiaomi Civi</p>
<p>2599元起</p>
</div>
<div class="shu"></div>
<div class="header-item-content">
<img src="./img/head.webp" alt="">
<p>Xiaomi Civi</p>
<p>2599元起</p>
</div>
</div>
<li class="header-nav-li">平板</li>
<div class="header-item">
<div class="header-item-content">
<img src="./img/head.webp" alt="">
<p>Xiaomi Civi</p>
<p>2599元起</p>
</div>
<div class="shu"></div>
<div class="header-item-content">
<img src="./img/head.webp" alt="">
<p>Xiaomi Civi</p>
<p>2599元起</p>
</div>
<div class="shu"></div>
<div class="header-item-content">
<img src="./img/head.webp" alt="">
<p>Xiaomi Civi</p>
<p>2599元起</p>
</div>
<div class="shu"></div>
<div class="header-item-content">
<img src="./img/head.webp" alt="">
<p>Xiaomi Civi</p>
<p>2599元起</p>
</div>
<div class="shu"></div>
<div class="header-item-content">
<img src="./img/head.webp" alt="">
<p>Xiaomi Civi</p>
<p>2599元起</p>
</div>
<div class="shu"></div>
<div class="header-item-content">
<img src="./img/head.webp" alt="">
<p>Xiaomi Civi</p>
<p>2599元起</p>
</div>
</div>
<li class="header-nav-li">家电</li>
<div class="header-item">
<div class="header-item-content">
<img src="./img/head.webp" alt="">
<p>Xiaomi Civi</p>
<p>2599元起</p>
</div>
<div class="shu"></div>
<div class="header-item-content">
<img src="./img/head.webp" alt="">
<p>Xiaomi Civi</p>
<p>2599元起</p>
</div>
<div class="shu"></div>
<div class="header-item-content">
<img src="./img/head.webp" alt="">
<p>Xiaomi Civi</p>
<p>2599元起</p>
</div>
<div class="shu"></div>
<div class="header-item-content">
<img src="./img/head.webp" alt="">
<p>Xiaomi Civi</p>
<p>2599元起</p>
</div>
<div class="shu"></div>
<div class="header-item-content">
<img src="./img/head.webp" alt="">
<p>Xiaomi Civi</p>
<p>2599元起</p>
</div>
<div class="shu"></div>
<div class="header-item-content">
<img src="./img/head.webp" alt="">
<p>Xiaomi Civi</p>
<p>2599元起</p>
</div>
</div>
<li class="header-nav-li">路由器</li>
<div class="header-item">
<div class="header-item-content">
<img src="./img/head.webp" alt="">
<p>Xiaomi Civi</p>
<p>2599元起</p>
</div>
<div class="shu"></div>
<div class="header-item-content">
<img src="./img/head.webp" alt="">
<p>Xiaomi Civi</p>
<p>2599元起</p>
</div>
<div class="shu"></div>
<div class="header-item-content">
<img src="./img/head.webp" alt="">
<p>Xiaomi Civi</p>
<p>2599元起</p>
</div>
<div class="shu"></div>
<div class="header-item-content">
<img src="./img/head.webp" alt="">
<p>Xiaomi Civi</p>
<p>2599元起</p>
</div>
<div class="shu"></div>
<div class="header-item-content">
<img src="./img/head.webp" alt="">
<p>Xiaomi Civi</p>
<p>2599元起</p>
</div>
<div class="shu"></div>
<div class="header-item-content">
<img src="./img/head.webp" alt="">
<p>Xiaomi Civi</p>
<p>2599元起</p>
</div>
</div>
<li class="header-nav-li">智能硬件</li>
<div class="header-item">
<div class="header-item-content">
<img src="./img/head.webp" alt="">
<p>Xiaomi Civi</p>
<p>2599元起</p>
</div>
<div class="shu"></div>
<div class="header-item-content">
<img src="./img/head.webp" alt="">
<p>Xiaomi Civi</p>
<p>2599元起</p>
</div>
<div class="shu"></div>
<div class="header-item-content">
<img src="./img/head.webp" alt="">
<p>Xiaomi Civi</p>
<p>2599元起</p>
</div>
<div class="shu"></div>
<div class="header-item-content">
<img src="./img/head.webp" alt="">
<p>Xiaomi Civi</p>
<p>2599元起</p>
</div>
<div class="shu"></div>
<div class="header-item-content">
<img src="./img/head.webp" alt="">
<p>Xiaomi Civi</p>
<p>2599元起</p>
</div>
<div class="shu"></div>
<div class="header-item-content">
<img src="./img/head.webp" alt="">
<p>Xiaomi Civi</p>
<p>2599元起</p>
</div>
</div>
<li class="header-nav-li">服务</li>
<li class="header-nav-li">社区</li>
</ul>
<div class="header-right">
<input type="text" placeholder="笔记本" class="text-search">
<div class="search">
<img src="./img/搜索.png" alt="">
</div>
<div class="list-1">
<div>全部商品</div>
<div>手机</div>
<div>耳机</div>
<div>洗衣机</div>
<div>红米</div>
<div>充电宝</div>
<div>空调</div>
</div>
</div>
</div>
</div>
<div class="middle-item">
<div class="banner-left">
<ul class="banner-left-ul">
<li>手机
<div class="banner-left-box">
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
</div>
</li>
<li>电视
<div class="banner-left-box">
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
</div>
</li>
<li>笔记本 平板
<div class="banner-left-box">
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
</div>
</li>
<li>家电
<div class="banner-left-box">
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
</div>
</li>
<li>出行 穿戴
<div class="banner-left-box">
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
</div>
</li>
<li>智能 路由器
<div class="banner-left-box">
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
</div>
</li>
<li>电源 配件
<div class="banner-left-box">
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
</div>
</li>
<li>健康 儿童
<div class="banner-left-box">
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
</div>
</li>
<li>耳机 音箱
<div class="banner-left-box">
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
</div>
</li>
<li>生活 箱包
<div class="banner-left-box">
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
<div class="banner-left-img">
<img src="./img/dahai.jpg" alt="" srcset="">
<p>Xiaomi Civi</p>
</div>
</div>
</li>
</ul>
</div>
<img src="./img/1.jpg" alt="" class="banner-img">
<img src="./img/2.jpg" alt="" class="banner-img">
<img src="./img/3.jpg" alt="" class="banner-img">
<img src="./img/4.jpg" alt="" class="banner-img">
<img src="./img/5.jpg" alt="" class="banner-img">
</div>
<div class="middle-b-item">
<div class="channel">
<div class="channel-list">
<img src="./img/时间.png" alt="">
<p>保障服务</p>
</div>
<div class="channel-list">
<img src="./img/企业.png" alt="">
<p>企业团购</p>
</div>
<div class="channel-list">
<img src="./img/F码.png" alt="">
<p>F码通道</p>
</div>
<div class="channel-list">
<img src="./img/米粉卡.png" alt="">
<p>米粉卡</p>
</div>
<div class="channel-list">
<img src="./img/以旧换新.png" alt="">
<p>以旧换新</p>
</div>
<div class="channel-list">
<img src="./img/话费充值.png" alt="">
<p>话费充值</p>
</div>
</div>
<img src="./img/6.jpg" alt="" srcset="" class="middle-b-item-img">
<img src="./img/7.jpg" alt="" srcset="" class="middle-b-item-img">
<img src="./img/8.jpg" alt="" srcset="" class="middle-b-item-img">
</div>
</div>
<!-- bottom start -->
<div class="main-page">
<div class="main-page1">
<img src="./img/f334fbd05d5681bb838fefd1c815d88c.webp.jpg" alt="">
<div class="main-title1">
<span class="phone">手机</span><img src="./img/向右3-fill.png" alt=""> <span class="more-phone">查看更多</span>
</div>
<div class="main-phonepage">
<img class="zd page-all" src="./img/c583f2edc613f1be20fa415910b13ce3.webp.jpg" alt="">
<div class="main-phonepageright">
<div class="page1 page2 page-all">
<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
<h4 class="tit">黑鲨4S</h4>
<p class="tit1">磁动力升降肩键</p>
<span class="tit2">2699元起</span>
</div>
<div class="page1 page2 page-all">
<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
<h4 class="tit">黑鲨4S</h4>
<p class="tit1">磁动力升降肩键</p>
<span class="tit2">2699元起</span>
</div>
<div class="page1 page2 page-all">
<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
<h4 class="tit">黑鲨4S</h4>
<p class="tit1">磁动力升降肩键</p>
<span class="tit2">2699元起</span>
</div>
<div class="page1 page2 page-all">
<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
<h4 class="tit">黑鲨4S</h4>
<p class="tit1">磁动力升降肩键</p>
<span class="tit2">2699元起</span>
</div>
<div class="page1 page-all">
<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
<h4 class="tit">黑鲨4S</h4>
<p class="tit1">磁动力升降肩键</p>
<span class="tit2">2699元起</span>
</div>
<div class="page1 page-all">
<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
<h4 class="tit">黑鲨4S</h4>
<p class="tit1">磁动力升降肩键</p>
<span class="tit2">2699元起</span>
</div>
<div class="page1 page-all">
<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
<h4 class="tit">黑鲨4S</h4>
<p class="tit1">磁动力升降肩键</p>
<span class="tit2">2699元起</span>
</div>
<div class="page1 page-all">
<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
<h4 class="tit">黑鲨4S</h4>
<p class="tit1">磁动力升降肩键</p>
<span class="tit2">2699元起</span>
</div>
</div>
</div>
<div class="main-title1">
<span class="phone">家电</span> <span class="more-phone">热门</span><span class="more-phone">电视影音</span>
</div>
<div class="page1 page2 page-all">
<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
<h4 class="tit">黑鲨4S</h4>
<p class="tit1">磁动力升降肩键</p>
<span class="tit2">2699元起</span>
</div>
<div class="page1 page2 page-all">
<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
<h4 class="tit">黑鲨4S</h4>
<p class="tit1">磁动力升降肩键</p>
<span class="tit2">2699元起</span>
</div>
<div class="page1 page2 page-all">
<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
<h4 class="tit">黑鲨4S</h4>
<p class="tit1">磁动力升降肩键</p>
<span class="tit2">2699元起</span>
</div>
<div class="page1 page2 page-all">
<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
<h4 class="tit">黑鲨4S</h4>
<p class="tit1">磁动力升降肩键</p>
<span class="tit2">2699元起</span>
</div>
<div class="page1 page-all" style="margin-top: 0;padding-top: 0px;">
<img src="./img/ca83e0294e7d725690b0576a1a4681e2.webp.jpg" alt="">
</div>
<div class="page1" style="background-color:#f5f5f5;padding-top: 0;">
<div class="kaoxiang">
<p class="kaoxiang1">米家烤箱<br>
<span class="kaoxiang2">299元</span>
</p>
<img src="./img/1612c93ad4756215774a0dbec7a81bb2.webp.jpg" alt="">
</div>
<div class="gengduo">
<p class="kaoxiang1">浏览更多<br>
<span class="kaoxiang2">热门</span>
</p>
<img src="./img/向右2.png" alt="">
</div>
</div>
<div class="page1 page-all">
<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
<h4 class="tit">黑鲨4S</h4>
<p class="tit1">磁动力升降肩键</p>
<span class="tit2">2699元起</span>
</div>
<div class="page1 page-all">
<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
<h4 class="tit">黑鲨4S</h4>
<p class="tit1">磁动力升降肩键</p>
<span class="tit2">2699元起</span>
</div>
<div class="page1 page-all">
<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
<h4 class="tit">黑鲨4S</h4>
<p class="tit1">磁动力升降肩键</p>
<span class="tit2">2699元起</span>
</div>
<div class="page1 page-all" style="margin-top: 10;padding-top: 0px;">
<img src="./img/3d47879ec183e25a36e67e0219636e60.webp.jpg" alt="">
</div>
<div class="main-title1">
<span class="phone">智能</span> <span class="more-phone">热门</span><span class="more-phone">安防</span><span class="more-phone">出行</span>
</div>
<div style="clear: both;"></div>
<div class="page1 page2 page-all">
<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
<h4 class="tit">黑鲨4S</h4>
<p class="tit1">磁动力升降肩键</p>
<span class="tit2">2699元起</span>
</div>
<div class="page1 page2 page-all">
<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
<h4 class="tit">黑鲨4S</h4>
<p class="tit1">磁动力升降肩键</p>
<span class="tit2">2699元起</span>
</div>
<div class="page1 page2 page-all">
<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
<h4 class="tit">黑鲨4S</h4>
<p class="tit1">磁动力升降肩键</p>
<span class="tit2">2699元起</span>
</div>
<div class="page1 page2 page-all">
<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
<h4 class="tit">黑鲨4S</h4>
<p class="tit1">磁动力升降肩键</p>
<span class="tit2">2699元起</span>
</div>
<div class="page1 page-all" style="margin-top: 0;padding-top: 0px;">
<img src="./img/807f30dc8d3aafcaf4ce34d1556a6f5a.webp.jpg" alt="">
</div>
<div class="page1" style="background-color:#f5f5f5;padding-top: 0;">
<div class="kaoxiang">
<p class="kaoxiang1">米家烤箱<br>
<span class="kaoxiang2">299元</span>
</p>
<img src="./img/1d26e13ea435223957d230ff7ca741af.webp.jpg" alt="">
</div>
<div class="gengduo">
<p class="kaoxiang1">浏览更多<br>
<span class="kaoxiang2">热门</span>
</p>
<img src="./img/向右2.png" alt="">
</div>
</div>
<div class="page1 page-all">
<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
<h4 class="tit">黑鲨4S</h4>
<p class="tit1">磁动力升降肩键</p>
<span class="tit2">2699元起</span>
</div>
<div class="page1 page-all">
<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
<h4 class="tit">黑鲨4S</h4>
<p class="tit1">磁动力升降肩键</p>
<span class="tit2">2699元起</span>
</div>
<div class="page1 page-all">
<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
<h4 class="tit">黑鲨4S</h4>
<p class="tit1">磁动力升降肩键</p>
<span class="tit2">2699元起</span>
</div>
<div class="page1 page-all" style="margin-top: 10;padding-top: 0px;">
<img src="./img/ec383d223d9f38f442268df684c526f6.webp.jpg" alt="">
</div>
<img src="./img/d16933cff56865943bb6e8906efd9824.webp.jpg" alt="" style="margin-top:40px">
<div class="main-title1">
<span class="phone">搭配</span> <span class="more-phone">热门</span><span class="more-phone">耳机音箱</span>
</div>
<div style="clear: both;"></div>
<div class="page1 page2 page-all">
<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
<h4 class="tit">黑鲨4S</h4>
<p class="tit1">磁动力升降肩键</p>
<span class="tit2">2699元起</span>
</div>
<div class="page1 page2 page-all">
<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
<h4 class="tit">黑鲨4S</h4>
<p class="tit1">磁动力升降肩键</p>
<span class="tit2">2699元起</span>
</div>
<div class="page1 page2 page-all">
<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
<h4 class="tit">黑鲨4S</h4>
<p class="tit1">磁动力升降肩键</p>
<span class="tit2">2699元起</span>
</div>
<div class="page1 page2 page-all">
<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
<h4 class="tit">黑鲨4S</h4>
<p class="tit1">磁动力升降肩键</p>
<span class="tit2">2699元起</span>
</div>
<div class="page1 page-all" style="margin-top: 0;padding-top: 0px;">
<img src="./img/8bfc6ce0d4438dbb1623a7d1834413fb.webp.jpg" alt="">
</div>
<div class="page1" style="background-color:#f5f5f5;padding-top: 0;">
<div class="kaoxiang">
<p class="kaoxiang1">米家烤箱<br>
<span class="kaoxiang2">299元</span>
</p>
<img src="./img/1d26e13ea435223957d230ff7ca741af.webp.jpg" alt="">
</div>
<div class="gengduo">
<p class="kaoxiang1">浏览更多<br>
<span class="kaoxiang2">热门</span>
</p>
<img src="./img/向右2.png" alt="">
</div>
</div>
<div class="page1 page-all">
<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
<h4 class="tit">黑鲨4S</h4>
<p class="tit1">磁动力升降肩键</p>
<span class="tit2">2699元起</span>
</div>
<div class="page1 page-all">
<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
<h4 class="tit">黑鲨4S</h4>
<p class="tit1">磁动力升降肩键</p>
<span class="tit2">2699元起</span>
</div>
<div class="page1 page-all">
<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
<h4 class="tit">黑鲨4S</h4>
<p class="tit1">磁动力升降肩键</p>
<span class="tit2">2699元起</span>
</div>
<div class="page1 page-all" style="margin-top: 10;padding-top: 0px;">
<img src="./img/601e51657711e0bafc1e394b7a0db08a.webp.jpg" alt="">
</div>
<div class="main-title1">
<span class="phone">周边</span> <span class="more-phone">热门</span><span class="more-phone">出行</span><span class="more-phone">出行</span>
</div>
<div style="clear: both;"></div>
<div class="page1 page2 page-all">
<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
<h4 class="tit">黑鲨4S</h4>
<p class="tit1">磁动力升降肩键</p>
<span class="tit2">2699元起</span>
</div>
<div class="page1 page2 page-all">
<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
<h4 class="tit">黑鲨4S</h4>
<p class="tit1">磁动力升降肩键</p>
<span class="tit2">2699元起</span>
</div>
<div class="page1 page2 page-all">
<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
<h4 class="tit">黑鲨4S</h4>
<p class="tit1">磁动力升降肩键</p>
<span class="tit2">2699元起</span>
</div>
<div class="page1 page2 page-all">
<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
<h4 class="tit">黑鲨4S</h4>
<p class="tit1">磁动力升降肩键</p>
<span class="tit2">2699元起</span>
</div>
<div class="page1 page-all" style="margin-top: 0;padding-top: 0px;">
<img src="./img/ca0940f052227d235e7de5678d106c89.webp.jpg" alt="">
</div>
<div class="page1" style="background-color:#f5f5f5;padding-top: 0;">
<div class="kaoxiang">
<p class="kaoxiang1">米家烤箱<br>
<span class="kaoxiang2">299元</span>
</p>
<img src="./img/1d26e13ea435223957d230ff7ca741af.webp.jpg" alt="">
</div>
<div class="gengduo">
<p class="kaoxiang1">浏览更多<br>
<span class="kaoxiang2">热门</span>
</p>
<img src="./img/向右2.png" alt="">
</div>
</div>
<div class="page1 page-all">
<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
<h4 class="tit">黑鲨4S</h4>
<p class="tit1">磁动力升降肩键</p>
<span class="tit2">2699元起</span>
</div>
<div class="page1 page-all">
<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
<h4 class="tit">黑鲨4S</h4>
<p class="tit1">磁动力升降肩键</p>
<span class="tit2">2699元起</span>
</div>
<div class="page1 page-all">
<img src="./img/7290b681343512c60e3a845379f3335f.webp.jpg" alt="">
<h4 class="tit">黑鲨4S</h4>
<p class="tit1">磁动力升降肩键</p>
<span class="tit2">2699元起</span>
</div>
<div class="page1 page-all" style="margin-top: 10;padding-top: 0px;">
<img src="./img/0497ba8520dc4aca9d55e6b841d42331.webp.jpg" alt="">
</div>
<img src="./img/88e35cffc82cd98cd53172460067af17.webp.jpg" alt="" style="margin-top:40px">
<div class="main-title1">
<span class="phone">视频</span><img src="./img/向右3-fill.png" alt=""> <span class="more-phone">查看更多</span>
</div>
<div class="shipin page-all">
<img src="./img/e74c4ff741bcdfc5b28a48a43e4edc6d.webp.jpg" alt="">
<p>2021年春季新品发布会第一场</p>
</div>
<div class="shipin page-all">
<img src="./img/e74c4ff741bcdfc5b28a48a43e4edc6d.webp.jpg" alt="">
<p>2021年春季新品发布会第一场</p>
</div>
<div class="shipin page-all">
<img src="./img/e74c4ff741bcdfc5b28a48a43e4edc6d.webp.jpg" alt="">
<p>2021年春季新品发布会第一场</p>
</div>
<div class="shipin page-all">
<img src="./img/e74c4ff741bcdfc5b28a48a43e4edc6d.webp.jpg" alt="">
<p>2021年春季新品发布会第一场</p>
</div>
<div style="clear: both;"></div>
</div>
<div class="footer-n">
<div class="footer-nn">
<div class="footer-s">
<ul>
<li><img src="./img/HTSCIT_设置1.png"><span class="fop">维修服务</span></li>
<li><img src="./img/七天无理由退换.png"><span class="fop">七天无理由退货</span< /li> <li><img src="./img/15天无理由退货.png"><span
class="fop">15天免费换货</span< /li> <li><img src="./img/礼物 活动.png"><span class="fop">满69包邮</span< /li> <li><img
src="./img/位置.png"><span class="fop">520余家售后网点</span< /li> </ul> <div style="clear: both;">
</div>
<hr>
<dl>
<dt>帮助中心</dt>
<dd>账号管理</dd>
<dd>购物指南</dd>
<dd>订单操作</dd>
</dl>
<dl>
<dt>服务支持</dt>
<dd>售后政策</dd>
<dd>自助服务</dd>
<dd>相关下载</dd>
</dl>
<dl>
<dt>线下门店</dt>
<dd>小米之家</dd>
<dd>服务网点</dd>
<dd>授权体验店/专区</dd>
</dl>
<dl>
<dt>关于小米</dt>
<dd>了解小米</dd>
<dd>加入小米</dd>
<dd>投资者关系</dd>
<dd>企业社会责任</dd>
<dd>廉洁举报</dd>
</dl>
<dl>
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>官方微信</dd>
<dd>联系我们</dd>
<dd>公益基金会</dd>
</dl>
<dl>
<dt>特色服务</dt>
<dd>F码通道</dd>
<dd>礼物码</dd>
<dd>防伪查询</dd>
</dl>
<div class="footer-r">
<h2>400-100-5678</h2>
<p>8:00-18:00(仅收市话费)</p>
<div class="rgkf">
<span>人工客服</span>
</div>
<p>关注小米</p>
</div>
</div>
</div>
</div>
</div>
<!--bottom end -->
<!-- 右下侧广告 -->
<div class="advertising">
<div class="advertising-app">
<img src="./img/app.png" alt="" class="tpp">
<img src="./img/app-0.png" alt="" class="tpp1">
<p>手机APP</p>
</div>
<div class="advertising-app">
<img src="./img/app1.png" alt="" class="tpp">
<img src="./img/app-1.png" alt="" class="tpp1">
<p>个人中心</p>
</div>
<div class="advertising-app">
<img src="./img/app2.png" alt="" class="tpp">
<img src="./img/app-2.png" alt="" class="tpp1">
<p>售后服务</p>
</div>
<div class="advertising-app">
<img src="./img/app3.png" alt="" class="tpp">
<img src="./img/app-3.png" alt="" class="tpp1">
<p>人工客服</p>
</div>
<div class="advertising-app">
<img src="./img/app4.png" alt="" class="tpp">
<img src="./img/app-4.png" alt="" class="tpp1">
<p>购物车</p>
</div>
<div class="advertising-app">
<a href="javascript:returnTop();" class="cd-top">
<img src="./img/app5.png" alt="" class="tpp">
<p>返回顶部</p>
</a>
</div>
</div>
<!-- footer-start -->
<div class="footer-site">
<div class="site-info">
<img src="./img/mi.png" alt="" class="mimi">
<p>小米商城 | MIUI | 米家 | 米聊 | 多看 | 游戏 | 政企服务 | 小米天猫店 | 小米集团隐私政策 | 小米公司儿童信息保护规则 | 小米商城隐私政策 | 小米商城用户协议 | 问题反馈 |
Select Location
<br>北京互联网法院法律服务工作站 | 中国消费者协会 | 北京市消费者协会
</p>
<p>© mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2020]0276-042号</p>
<p>© mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2020]0276-042号</p>
<p>增值电信业务许可证 网络食品经营备案 京食药网食备202010048 食品经营许可证</p>
<p>违法和不良信息举报电话：171-5104-4404 知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
<p><img src="./img/truste.png" alt=""><img src="./img/v-logo-2.png" alt=""><img src="./img/icon3.png"><img src="./img/ba10428a4f9495ac310fd0b5e0cf8370.png"
alt=""><img src="./img/7d56be2921dd52757177a72f83247f46.png" alt=""></p>
</div>
<p class="beautiful-life"><img src="./img/slogan2020.png" alt=""></p>
</div>
<!-- footer-end -->
<!-- 返回顶部 -->
<script type="text/javascript" src="js/index.js">
</script>
</body>
</html>
index.js
var sdelay = 0;
function returnTop() {
window.scrollBy(0, -100); //Only for y vertical-axis
if (document.body.scrollTop > 0) {
sdelay = setTimeout('returnTop()', 50);
}
}index.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
}
body {
background-color: #f5f5f5;
}
.main-page {
width: 100%;
}
.main-page1 {
width: 1226px;
margin: 0 auto;
}
.main-title1 {
height: 58px;
}
.phone {
float: left;
height: 58px;
line-height: 58px;
font-weight: 200;
font-size: 22px;
color: #333333;
}
.more-phone {
float: right;
height: 58px;
line-height: 58px;
color: #424242;
font-size: 16px;
margin-right: 4px;
}
.main-title1>img {
float: right;
margin-top: 18px;
}
.main-phonepage {
height: 614px;
}
.zd {
float: left;
}
.page1 {
width: 234px;
height: 300px;
background-color: white;
float: right;
text-align: center;
padding-top: 10px;
margin-right: 10px;
margin-top: 14px;
}
/* .page1:hover{
box-shadow: 2px 2px 2px 2px #999999;
border-radius: 2px;
} */
.page2 {
margin-top: 0px;
}
.tit {
font-size: 14px;
font-weight: 400;
color: #333;
}
.tit1 {
height: 18px;
font-size: 12px;
color: #b0b0b0;
}
.tit2 {
color: #ff6700;
font-size: 12px;
}
.kaoxiang {
width: 234px;
height: 143px;
background-color: white;
}
.kaoxiang>img {
margin-top: 20px;
}
.kaoxiang1 {
font-size: 14px;
font-weight: 400;
float: left;
margin-top: 50px;
margin-left: 40px;
}
.kaoxiang2 {
font-size: 12px;
color: #333;
margin-left: -14px;
color: #ff6700;
}
.gengduo {
margin-top: 12px;
width: 234px;
height: 143px;
background-color: white;
}
.gengduo>img {
margin-top: 50px;
}
.shipin {
width: 296px;
height: 285px;
background-color: white;
font-size: 14px;
text-align: center;
color: #333;
float: left;
margin-right: 10px;
}
.shipin>p {
margin-top: 30px;
}
.footer-s {
margin-top: 20px;
height: 80px;
background-color: white;
position: relative;
}
.footer-s>ul li {
float: left;
height: 80px;
line-height: 80px;
width: 242.73px;
font-size: 16px;
text-align: center;
}
.footer-s>ul li img {
position: absolute;
/* margin-right: 6px; */
display: inline;
top: 28px;
}
.fop {
margin-left: 30px;
}
.footer-n {
width: 100%;
height: 300px;
font-size: 12px;
background-color: white;
margin-top: 20px;
}
.footer-n dl {
margin-top: 30px;
display: block;
width: 162px;
float: left;
}
.footer-n dt {
font-size: 14px;
height: 50px;
}
.footer-n dd {
height: 25px;
color: #999999;
}
.footer-s dd:hover {
color: #ff6700;
}
.footer-r {
margin-top: 50px;
float: right;
text-align: center;
width: 251px;
border-left: 1px solid #999999;
}
.footer-r h2 {
color: #ff6700;
margin-bottom: 10px;
}
.footer-r p {
margin-top: 10px;
}
.fop:hover {
color: #ff6700;
}
.rgkf {
width: 120px;
height: 30px;
border: 1px solid #ff6700;
text-align: center;
display: inline-block;
padding-top: 5px;
color: #ff6700;
margin-top: 10px;
}
.rgkf:hover {
background-color: #ff6700;
color: white;
}
.footer-nn {
width: 1226px;
margin: 0 auto;
}
.site-info {
margin-top: 30px;
height: 170px;
width: 1226px;
margin: 0 auto;
position: relative;
}
.mimi {
width: 56px;
height: 56px;
position: absolute;
}
.site-info>p {
margin-left: 66px;
font-size: 12px;
color: #b0b0b0;
}
.footer-site {
background-color: white;
}
.site-info p img {
width: 83px;
}
.beautiful-life {
text-align: center;
padding-bottom: 30px;
}
/* top */
.top-bar {
width: 100%;
height: 40px;
background-color: #333333;
color: #b0b0b0;
font-size: 12px;
}
.container {
width: 1226px;
height: 40px;
margin: 0 auto;
}
.container-nav {
float: left;
height: 40px;
line-height: 40px;
position: relative;
}
.nav-1 {
text-decoration: none;
color: #b0b0b0;
display: inline-block;
}
.nav-1:hover {
color: white;
}
.sep {
margin: 4px;
color: #424242;
}
.container-right {
float: right;
height: 40px;
line-height: 40px;
}
.gwc {
float: right;
width: 120px;
height: 40px;
background-color: #424242;
position: relative;
}
.gwc>img {
margin-top: 10px;
margin-left: 20px;
}
.gwc>span {
display: block;
margin-top: -22px;
margin-left: 45px;
}
.gwc-list {
width: 300px;
height: 100px;
top: 40px;
right: 0px;
background-color: white;
color: black;
position: absolute;
text-align: center;
padding-top: 43px;
display: none;
z-index: 10;
}
.gwc:hover .gwc-list {
display: block;
}
.sj {
width: 0;
height: 0;
border: 8px solid transparent;
border-bottom-color: #fff;
position: absolute;
right: 200px;
top: 24px;
display: none;
}
.download-app {
position: absolute;
top: 40px;
left: 50%;
margin-left: 150px;
width: 124px;
height: 0px;
background-color: #fff;
box-shadow: 0 1px 5px #aaa;
text-align: center;
font-size: 12px;
color: #333;
overflow: hidden;
transition: all .3s linear;
z-index: 10;
}
.download-app>img {
width: 90px;
height: 90px;
}
.down:hover+.download-app {
height: 148px;
padding-top: 10px;
}
.down:hover~.sj {
display: block;
}
.middle-content {
width: 100%;
height: 760px;
background-color: white;
position: relative;
}
.header-logo {
height: 100px;
width: 1226px;
margin: 0 auto;
}
.logo {
width: 62px;
height: 56px;
margin-top: 22px;
float: left;
}
.logo>img {
width: 56px;
height: 56px;
}
.header-nav {
float: left;
padding-left: 150px;
}
.header-nav-li {
float: left;
height: 100px;
line-height: 100px;
padding: 0 10px;
cursor: pointer;
}
.header-nav-li:hover {
color: #ff6700;
}
.header-item {
position: absolute;
width: 100%;
height: 0px;
top: 100px;
left: 0;
padding-left: 300px;
overflow: hidden;
transition: height .2s linear;
z-index: 12;
background-color: white;
}
.header-nav-li:hover+.header-item {
height: 190px;
border-top: 1px solid #999999;
}
.header-item-content {
font-size: 12px;
width: 210px;
height: 190px;
padding-top: 20px;
text-align: center;
float: left;
}
.shu {
margin-top: 20px;
width: 2px;
height: 75px;
float: left;
border: 1px solid #999999;
}
.header-item-content p:nth-child(3) {
color: #ff6700;
}
.header-right {
box-sizing: border-box;
display: flex;
position: relative;
margin-top: 25px;
left: 20px;
}
.text-search {
width: 245px;
height: 50px;
outline: none;
border: 1px solid #e0e0e0;
border-right: none;
padding: 0 10px;
transition: all .3s;
}
.search {
padding: 10px;
width: 50px;
border: 1px solid #e0e0e0;
display: flex;
justify-content: center;
align-items: center;
transition: all .3s;
}
.search>img {
width: 50px;
}
.header-right:hover .text-search,
.header-right:hover .search {
border-color: #b0b0b0;
}
.search:hover {
background-color: #ff6700;
border-color: #ff6700 !important;
}
.search:hover img {
color: #fff !important;
}
.text-search:focus,
.text-search:focus+.search {
border-color: #ff6700;
}
.list-1 {
width: 240px;
border: 1px solid #ff6700;
position: absolute;
top: 49px;
display: none;
z-index: 12;
background-color: white;
}
.list-1 div {
height: 30px;
line-height: 30px;
font-size: 14px;
padding-left: 20px;
}
.text-search:focus~.list-1 {
display: block;
}
.middle-item {
width: 1226px;
height: 460px;
margin: 0 auto;
position: relative;
}
.banner-left {
width: 234px;
height: 460px;
position: absolute;
z-index: 10;
}
.banner-left::before {
content: "";
width: 234px;
height: 460px;
position: absolute;
background-color: #999999;
opacity: .7;
}
.banner-left-ul {
width: 1226px;
height: 460px;
list-style: none;
color: white;
font-size: 14px;
position: relative;
padding-top: 20px;
box-sizing: border-box;
background-size: 100% 100%;
animation: myb 10s infinite;
}
.banner-left-ul li {
height: 42px;
line-height: 42px;
padding-left: 20px;
z-index: 10;
}
.banner-left-box {
width: 992px;
height: 460px;
background-color: white;
position: absolute;
left: 234px;
top: 0px;
}
.banner-left-box {
display: none;
}
.banner-left-img {
width: 248px;
height: 75px;
color: black;
float: left;
}
.banner-left-img>img {
float: left;
padding-top: 20px;
padding-left: 20px;
}
.banner-left-img>p {
float: left;
line-height: 75px;
padding-left: 20px;
}
.banner-left-ul li:hover {
background-color: #ff6700;
}
.banner-left-ul li:hover .banner-left-box {
display: block;
}
.banner-img {
height: 460px;
position: absolute;
}
@keyframes myb {
20% {
background-image: url(./img/1.jpg);
}
40% {
background-image: url(./img/2.jpg);
}
60% {
background-image: url(./img/3.jpg);
}
80% {
background-image: url(./img/4.jpg);
}
100% {
background-image: url(./img/5.jpg);
}
}
.middle-b-item {
width: 1226px;
margin: 0 auto;
margin-top: 14px;
}
.channel {
width: 234px;
height: 170px;
background-color: #5F5750;
color: #333333;
padding: 12px;
float: left;
}
.channel-list {
width: 70px;
height: 63.6px;
float: left;
font-size: 12px;
color: #ffffff;
text-align: center;
padding-top: 18px;
position: relative;
margin-top: 2px;
}
.channel-list>img {
width: 24px;
height: 24px;
}
.channel-list::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
height: 60px;
width: 1px;
background-color: #665e57;
}
.channel-list::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 60px;
height: 1px;
background-color: #665e57;
}
.middle-b-item-img {
width: 316px;
height: 170px;
margin-left: 14px;
float: left;
border-radius: 2px;
}
.middle-b-item-img:hover {
box-shadow: 2px 2px 3px #b0b0b0;
}
.page-all:hover {
box-shadow: 2px 2px 3px #b0b0b0;
}
.kaoxiang:hover,
.gengduo:hover {
box-shadow: 2px 2px 3px #b0b0b0;
}
.banner-left-img:hover>p {
color: #ff6700;
}
.advertising {
position: fixed;
bottom: 70px;
right: 0;
z-index: 99;
color: #333;
}
.advertising-app {
position: relative;
width: 82px;
height: 90px;
margin-top: -1px;
background-color: #fff;
border: 1px solid #f5f5f5;
text-align: center;
font-size: 13px;
padding-top: 20px;
cursor: pointer;
}
.tpp {
width: 30px;
height: 30px;
}
.tpp1 {
width: 30px;
height: 30px;
position: absolute;
right: 25px;
display: none;
}
.advertising-app:hover .tpp1 {
display: inline-block;
}
.advertising-app:hover p {
color: #ff6700;
}
.cd-top {
text-decoration: none;
color: #000000;
}
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
54
0- 0
已为社区贡献1条内容
所有评论(0)