<!-- 小米首屏 -->
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入图标字体库 -->
<link rel="stylesheet" href="./fontawesome/css/all.css">
<!-- 引入重置样式表 -->
<link rel="stylesheet" href="./CSS/reset.css">
<!-- 引入公共样式表 -->
<link rel="stylesheet" href="./CSS/base.css">
<title>
小米商城 - Xiaomi 11 Ultra、Redmi K40 Pro、MIX FOLD，小米电视官方网站
</title>
<!-- 引入当前页面的样式表 -->
<link rel="stylesheet" href="./CSS/XiaoMi.css">
<!--
设置网站的图标（在标题栏和收藏栏）
-网站图片一般都存储在网站的根目录下，名字一般都叫做 favicon.ico
-->
<link rel="icon" href="./img/favicon.ico">
</head>
<body>
<!-- 顶部导航条 -->
<!-- 顶部导航条外部容器 -->
<div class="topbar-wrapper">
<!-- 创建内部容器 -->
<div class="topbar w clearfix ">
<!-- 左侧导航条 -->
<ul class="service">
<li><a href="javascript:;">小米商城</a></li>
<li class="line">|</li>
<li><a href="javascript:;">MIUI</a></li>
<li class="line">|</li>
<li><a href="javascript:;">loT</a></li>
<li class="line">|</li>
<li><a href="javascript:;">云服务</a></li>
<li class="line">|</li>
<li><a href="javascript:;">金融</a></li>
<li class="line">|</li>
<li><a href="javascript:;">小米有品</a></li>
<li class="line">|</li>
<li><a href="javascript:;">小爱开放平台</a></li>
<li class="line">|</li>
<li><a href="javascript:;">企业团购</a></li>
<li class="line">|</li>
<li><a href="javascript:;">资质证照</a></li>
<li class="line">|</li>
<li><a href="javascript:;">协议规则</a></li>
<li class="line">|</li>
<li class="app-wrapper">
<a class="app" href="javascript:;">
下载app
<!-- 添加弹出层 -->
<div class="qrcode">
<img src="./img/download.png" alt="">
<span>小米商城APP</span>
</div>
</a>
</li>
<li class="line">|</li>
<li><a href="javascript:;">Select Location</a></li>
</ul>
<!-- 购物车 -->
<!-- 购物车 -->
<ul class="shop-cart">
<li><a href="javascript:;">
<i class="fas fa-shopping-cart"></i>
购物车（0）
</a></li>
<!-- 添加下拉框 -->
<div class="Shopping-list">
<span>购物车中还没有商品，赶紧选购吧！</span>
</div>
</ul>
<!-- 用户登录注册 -->
<ul class="user-info">
<li><a href="javascript">登录</a></li>
<li class="line">|</li>
<li><a href="javascript">注册</a></li>
<li class="line">|</li>
<li><a href="javascript">消息通知</a></li>
</ul>
</div>
</div>
<!-- 创建头部外部容器 -->
<div class="header-wrapper">
<div class="header w clearfix">
<!-- 创建Logo -->
<h1 class="logo" title="小米官网">
小米官网
<a href="" class="home"></a>
<a href="/" class="mi"></a>
</h1>
<!-- 创建一个中间导航条的容器 -->
<div class="nav-wrapper">
<!-- 创建导航条 -->
<ul class="nav clearfix ">
<li class="all-goods-wrapper ">
<a href="#" class="all-goods">全部商品分类</a>
<!-- 创建左侧的导航菜单 -->
<ul class="left-menu">
<li>
<a href="#">手机 电话卡
<i class="fas fa-angle-right"></i>
</a>
</li>
<li>
<a href="#">电视 盒子
<i class="fas fa-angle-right"></i>
</a>
</li>
<li>
<a href="#">笔记本 平板
<i class="fas fa-angle-right"></i>
</a>
</li>
<li>
<a href="#">家电 插线板
<i class="fas fa-angle-right"></i>
</a>
</li>
<li>
<a href="#">出行 穿戴
<i class="fas fa-angle-right"></i>
</a>
</li>
<li>
<a href="#">智能 路由器
<i class="fas fa-angle-right"></i>
</a>
</li>
<li>
<a href="#">电源 配件
<i class="fas fa-angle-right"></i>
</a>
</li>
<li>
<a href="#">健康 儿童
<i class="fas fa-angle-right"></i>
</a>
</li>
<li>
<a href="#">耳机 音箱
<i class="fas fa-angle-right"></i>
</a>
</li>
<li>
<a href="#">生活 箱包
<i class="fas fa-angle-right"></i>
</a>
</li>
</ul>
</li>
<li class="show-goods"><a href="#">小米手机</a></li>
<li class="show-goods"><a href="#">Redmi 红米</a></li>
<li class="show-goods"><a href="#">电视</a></li>
<li class="show-goods"><a href="#">笔记本</a></li>
<li class="show-goods"><a href="#">家电</a></li>
<li class="show-goods"><a href="#">路由器</a></li>
<li class="show-goods"><a href="#">智能硬件</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">社区</a></li>
<!-- 创建一个弹出层 -->
<div class="goods-info"></div>
</ul>
</div>
<!-- 创建搜索框容器 -->
<div class="search-wrapper">
<form class="search" action="../../套图/">
<input class="search-inp" type="text">
<button class="search-btn">
<i class="fas fa-search"></i>
</button>
</form>
</div>
</div>
</div>
<!-- 创建banner的容器 -->
网页模板-仿小米纯HTML-单页-需二次开发-适合学习.zip （57个子文件） 
pure-html-css-xiaomi-home-page-master CSS 
normalize.css 6KB reset.css 1KB XiaoMi.css 12KB XiaoMi.min.css 5KB
demo.html 520B base.css 717B XiaoMi.html 15KB img boxr7.webp 23KB
2.jpg 92KB NOTE.webp 28KB
download.png 3KB mi-home.png 388B banner4.jpg 271KB 1.jpg 91KB mi-logo.png 1KB boxr6.webp 27KB boxr2.webp 16KB banner3.jpg 322KB boxl1.webp 22KB icon-slides.png 1KB boxr5.webp 43KB boxr1.webp 21KB favicon.ico 4KB banner1.jpg 348KB banner5.jpg 240KB favicon (1).ico 4KB boxr8.webp 19KB boxr3.webp 31KB boxr4.webp 39KB 3.jpg 69KB banner2.jpg 65KB fontawesome webfonts fa-brands-400.ttf 178KB fa-solid-900.ttf 379KB fa-brands-400.woff2 103KB fa-regular-400.woff2 23KB fa-v4compatibility.ttf 10KB fa-v4compatibility.woff2 5KB fa-regular-400.ttf 59KB fa-solid-900.woff2 151KB css v4-font-face.css 2KB fontawesome.min.css 79KB v4-font-face.min.css 2KB brands.css 22KB v4-shims.min.css 26KB fontawesome.css 110KB brands.min.css 17KB v4-shims.css 40KB v5-font-face.min.css 794B solid.min.css 558B solid.css 611B all.css 135KB v5-font-face.css 871B regular.min.css 566B regular.css 619B all.min.css 98KB svg-with-js.css 21KB svg-with-js.min.css 16KB资源评论
