小米商城html+css+js全代码
2024-06-03 20:27:52
差不多完成页面就是这样的，这里只展出两页
一共需要这些文件，自己建完就行
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"><spanclass="fop">15天免费换货</span< /li> <li><img src="./img/礼物 活动.png"><span class="fop">满69包邮</span< /li> <li><imgsrc="./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-axisif (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;}
小米商城html+css+js全代码相关推荐
- Eclipse.自动提示--编写HTML/CSS/JS/JSP代码时自动提示的解决办法
最近在做一个javaweb的项目,在eclipse中编写jsp代码时没有代码提示这个梗让人很头疼,之前一直写Java代码或者在Dreamweaver中写HTML代码时自动提示代码用起来特别爽,这突然间 ...
- HTML+CSS+JS 表白代码
文章目录 案例一 爱你到天昏地暗 案例二 带有音乐的表白代码 案例三 带有图片旋转的表白 案例源码 案例一 爱你到天昏地暗 <html> <style type="text ...
- Yii --EClientScript 扩展，css,js文件代码压缩合并加载
扩展插件下载地址,解压后复制到/protected/vendor/ https://github.com/muayyad-alsadi/yii-EClientScript main配置文件配置插件,c ...
- html+css+js表白代码，实现打字动画、动态爱心、图片旋转木马特效、下雪特效
给男朋友准备的520礼物,他觉得太尴尬了,于是我特地把这个项目开源,让大家一起感受一下男票的尴尬,哈哈哈哈哈哈我好恶趣味. 话不多说上代码: 一.动态爱心+打字动画 html部分: <!doct ...
- js获得相同css的第几个,vue,css,js用户代码片段（vs code）
前言:并不是什么高深算法逻辑之类的,只是一些普通常用的代码片段,设置到vs code里面,减少工作时间成本,还有其他常用的代码块,欢迎评论给我建议. 设置用户代码片段方法 点这里 1.单行文字超出隐藏 ...
- 轮播图制作，详细步骤及 HTML+CSS+JS 完整代码
1.轮播图的结构 <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
- HTML+css+js相关代码（记事本）
注释: css /**/ html <!--> ctrl+f :查找 html meta: 空标签,表示网页的关键词,跳转网页 style:添加自定义风格,css样式表 link : ...
- html+css+js爱心代码
是李峋那个爱心代码的伊拉克战损版本(废 直接拿去粘贴到记事本里面把后缀改成html就好了 <!DOCTYPE html> <html><head><title ...
- vsCode Beautify插件，可格式化css,js,less代码（霸霸看了都说好）
1.vscode拓展商店搜索插件名 2.配置settings.json文件 设置–>插件–>Beautify config->settings.json "editor.f ...
- html代码js正则,过滤所有HTML代码和CSS,JS
过滤所有HTML代码和CSS,JS 复制代码 代码如下: Function RemoveHTML(strHTML) '过滤HTML代码的函数包括过滤CSS和JS StrHtml = Replac ...
最新文章
- Charles之过滤信息
- wandb（wb）（weights and biases）: 深度学习轻量级可视化工具入门教程
- android 判断文件是否存在_每日一课 | Python检查文件是否存在
- HTTPS协议在Tomcat中启用的配置
- 修改android.jar教程,Android修改jar包文件
- PNG免抠古风纹理背景太漂亮了，直接应用的才是好素材
- 计算机技术在酒店管理专业的应用与探索,计算机信息化在高职酒店管理专业教学中的应用.doc...
- 将本地项目上传到gitLab操作
- 用c语言编写五子棋用vs写,c语言写的五子棋人与人对战
- Ext JS 6学习文档-第8章-主题和响应式设计
- php999换算人民币计算器,将cm换算为px (厘米换算为像素)
- 实验五 集线器和交换机的区别
- NLP实践——Few-shot事件抽取《Building an Event Extractor with Only a Few Examples》
- 布线时排阻（IC）管脚交换步骤
- Ardupilot源码框架
- Chrome如何安装第三方扩展插件(crx)
- Varargs（可变个数形参）
- 华为公司 代码编码规范
- Redis基本事务的操作
- hive3.x异常- return code 1 from org.apache.hadoop.hive.ql.exec.mr.MapredLocalTask