HTML+CSS+JS制作高仿小米官网网站（内附源码，含6个页面）

一、作品介绍

HTML+CSS+JS制作一个高仿小米官网网站，包含首页、商品详情页、确认订单页、订单支付页、收货地址管理页、新增收获地址页等6个静态页面。其中每个页面都包含一个导航栏、一个主要区域和一个底部区域。

二、页面结构

1. 顶部导航栏

包含Logo、主导航菜单（手机、电视、笔记本等分类）、搜索框、用户中心、购物车

2. 轮播横幅

大型轮播图展示区，展示最新产品促销信息和活动广告

3. 快速分类导航

横向排列的产品快速入口，包含'手机''电视''笔记本''平板''穿戴''家电'等主要品类

4. 闪购区域

展示限时特惠商品，包含倒计时显示和商品价格信息

5. 商品推荐区

网格式布局，展示热门商品，每个商品卡片包含产品图片、名称、简介、价格等信息

6. 内容专区

分类展示不同品类产品，左侧大图+右侧多个小图的组合展示方式

7. 侧边工具栏

固定在页面右侧，包含'在线客服''返回顶部'等功能按钮

8. 页脚

包含售后服务、联系方式、商城介绍、关注我们等信息板块

三、作品演示

四、代码目录

五、首页代码

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>仿小米官网 - 首页</title><link type="text/css" href="css/family.css" rel="stylesheet" /><link type="text/css" href="css/all.min.css" rel="stylesheet" /></head><body><div class="water-mark water-mark-left">公众号【<span class="gzh-tips">木番薯科技</span>】，<span class="ym-tips">获取源码</span></div><div class="water-mark water-mark-right">公众号【<span class="gzh-tips">木番薯科技</span>】，<span class="ym-tips">获取源码</span></div><div class="min-h-screen bg-gray-100"><header class="fixed top-0 left-0 right-0 z-50 bg-white shadow-md"><nav class="container mx-auto px-4"><div class="flex items-center justify-between h-16"><div class="flex items-center"><a href="#" class="text-2xl font-['Pacifico'] text-custom">logo</a><div class="ml-10 flex space-x-8"><a href="#" class="text-gray-700 hover:text-custom">手机</a><a href="#" class="text-gray-700 hover:text-custom">电视</a><a href="#" class="text-gray-700 hover:text-custom">笔记本</a><a href="#" class="text-gray-700 hover:text-custom">平板</a><a href="#" class="text-gray-700 hover:text-custom">智能穿戴</a><a href="#" class="text-gray-700 hover:text-custom">家电</a></div></div><div class="flex items-center space-x-6"><div class="relative"><input type="text" placeholder="搜索商品" class="w-64 px-4 py-2 rounded-full bg-gray-100 focus:outline-none focus:ring-2 focus:ring-custom text-sm"/><button class="absolute right-3 top-2.5 text-gray-400"><i class="fas fa-search"></i></button></div><a href="#" class="text-gray-700 hover:text-custom"><i class="far fa-user"></i></a><a href="#" class="text-gray-700 hover:text-custom"><i class="fas fa-shopping-cart"></i></a></div></div></nav></header><main class="pt-16"><div class="glide"><div class="glide__track" data-glide-el="track"><ul class="glide__slides"><li class="glide__slide"><img src="./images/b1.jpg" alt="手机促销" class="w-full h-[600px] object-cover"/></li><li class="glide__slide"><img src="./images/b2.jpg" alt="笔记本促销" class="w-full h-[600px] object-cover"/></li><li class="glide__slide"><img src="./images/b3.jpg" alt="电视促销" class="w-full h-[600px] object-cover"/></li></ul></div><div class="glide__bullets" data-glide-el="controls[nav]"><button class="glide__bullet" data-glide-dir="=0"></button><button class="glide__bullet" data-glide-dir="=1"></button><button class="glide__bullet" data-glide-dir="=2"></button></div></div><div class="container mx-auto px-4 py-8"><div class="grid grid-cols-6 gap-6"><a href="#" class="flex flex-col items-center p-4 bg-white rounded-lg hover:shadow-lg transition-shadow"><img src="./images/c1.jpg" alt="手机" class="w-20 h-20 object-cover mb-2"/><span class="text-gray-700">手机</span></a><a href="#" class="flex flex-col items-center p-4 bg-white rounded-lg hover:shadow-lg transition-shadow"><img src="./images/c2.jpg" alt="电视" class="w-20 h-20 object-cover mb-2"/><span class="text-gray-700">电视</span></a><a href="#" class="flex flex-col items-center p-4 bg-white rounded-lg hover:shadow-lg transition-shadow"><img src="./images/c3.jpg" alt="笔记本" class="w-20 h-20 object-cover mb-2"/><span class="text-gray-700">笔记本</span></a><a href="#" class="flex flex-col items-center p-4 bg-white rounded-lg hover:shadow-lg transition-shadow"><img src="./images/c4.jpg" alt="平板" class="w-20 h-20 object-cover mb-2"/><span class="text-gray-700">平板</span></a><a href="#" class="flex flex-col items-center p-4 bg-white rounded-lg hover:shadow-lg transition-shadow"><img src="./images/c5.jpg" alt="穿戴" class="w-20 h-20 object-cover mb-2"/><span class="text-gray-700">穿戴</span></a><a href="#" class="flex flex-col items-center p-4 bg-white rounded-lg hover:shadow-lg transition-shadow"><img src="./images/c6.jpg" alt="家电" class="w-20 h-20 object-cover mb-2"/><span class="text-gray-700">家电</span></a></div><div class="mt-12"><div class="flex items-center justify-between mb-6"><h2 class="text-2xl font-bold">限时闪购</h2><div class="flex items-center space-x-2 text-lg"><span class="text-custom">距结束还剩：</span><span id="countdown" class="font-mono"></span></div></div><div class="grid grid-cols-4 gap-6"><a href="./product-details.html"><div class="bg-white rounded-lg p-4 hover:shadow-lg transition-shadow"><img src="./images/g1.jpg" alt="手机特惠" class="w-full h-64 object-cover mb-4"/><h3 class="text-lg font-semibold mb-2">全新旗舰手机</h3><p class="text-gray-600 mb-2">骁龙8 Gen 3 | 徕卡光学</p><p class="text-custom text-xl font-bold">¥4999</p></div></a><div class="bg-white rounded-lg p-4 hover:shadow-lg transition-shadow"><img src="./images/g2.jpg" alt="耳机特惠" class="w-full h-64 object-cover mb-4"/><h3 class="text-lg font-semibold mb-2">无线降噪耳机</h3><p class="text-gray-600 mb-2">主动降噪 | 40小时续航</p><p class="text-custom text-xl font-bold">¥699</p></div><div class="bg-white rounded-lg p-4 hover:shadow-lg transition-shadow"><img src="./images/g3.jpg" alt="手表特惠" class="w-full h-64 object-cover mb-4"/><h3 class="text-lg font-semibold mb-2">智能手表Pro</h3><p class="text-gray-600 mb-2">血氧监测 | 14天续航</p><p class="text-custom text-xl font-bold">¥999</p></div><div class="bg-white rounded-lg p-4 hover:shadow-lg transition-shadow"><img src="./images/g4.jpg" alt="平板特惠" class="w-full h-64 object-cover mb-4"/><h3 class="text-lg font-semibold mb-2">平板电脑2024款</h3><p class="text-gray-600 mb-2">120Hz高刷 | 磁吸充电</p><p class="text-custom text-xl font-bold">¥2999</p></div></div></div><div class="mt-12"><h2 class="text-2xl font-bold mb-6">精选推荐</h2><div class="grid grid-cols-5 gap-6"><div class="bg-white rounded-lg p-4 hover:shadow-lg transition-shadow"><img src="./images/j1.jpg" alt="笔记本推荐" class="w-full h-48 object-cover mb-4"/><h3 class="text-lg font-semibold mb-2">轻薄本Pro</h3><p class="text-gray-600 text-sm mb-2">13代酷睿 | 2.8K高清屏</p><p class="text-custom text-xl font-bold">¥5999</p></div><div class="bg-white rounded-lg p-4 hover:shadow-lg transition-shadow"><img src="./images/j2.jpg" alt="电视推荐" class="w-full h-48 object-cover mb-4"/><h3 class="text-lg font-semibold mb-2">全面屏电视</h3><p class="text-gray-600 text-sm mb-2">量子点 | 4K HDR</p><p class="text-custom text-xl font-bold">¥3999</p></div><div class="bg-white rounded-lg p-4 hover:shadow-lg transition-shadow"><img src="./images/j3.jpg" alt="扫地机器人推荐" class="w-full h-48 object-cover mb-4"/><h3 class="text-lg font-semibold mb-2">扫拖一体机器人</h3><p class="text-gray-600 text-sm mb-2">激光导航 | 自动集尘</p><p class="text-custom text-xl font-bold">¥2499</p></div><div class="bg-white rounded-lg p-4 hover:shadow-lg transition-shadow"><img src="./images/j4.jpg" alt="空净推荐" class="w-full h-48 object-cover mb-4"/><h3 class="text-lg font-semibold mb-2">智能空气净化器</h3><p class="text-gray-600 text-sm mb-2">除醛除菌 | 静音设计</p><p class="text-custom text-xl font-bold">¥1499</p></div><div class="bg-white rounded-lg p-4 hover:shadow-lg transition-shadow"><img src="./images/j5.jpg" alt="音箱推荐" class="w-full h-48 object-cover mb-4"/><h3 class="text-lg font-semibold mb-2">智能音箱</h3><p class="text-gray-600 text-sm mb-2">AI语音 | 环绕音效</p><p class="text-custom text-xl font-bold">¥399</p></div></div></div><div class="mt-12"><h2 class="text-2xl font-bold mb-6">智能生活</h2><div class="grid grid-cols-2 gap-6"><div class="relative overflow-hidden rounded-lg"><img src="./images/z1.jpg" alt="智能家居" class="w-full h-[400px] object-cover"/><div class="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black/60 to-transparent text-white"><h3 class="text-2xl font-bold mb-2">智能家居</h3><p class="mb-4">打造智能互联生活</p><a href="#" class="!rounded-button inline-block px-6 py-2 bg-white text-custom">了解更多</a></div></div><div class="grid grid-cols-2 gap-6"><div class="bg-white rounded-lg p-4 hover:shadow-lg transition-shadow"><img src="./images/z2.jpg" alt="智能门铃" class="w-full h-48 object-cover mb-4"/><h3 class="text-lg font-semibold">智能门铃</h3><p class="text-custom mt-2">¥299</p></div><div class="bg-white rounded-lg p-4 hover:shadow-lg transition-shadow"><img src="./images/z3.jpg" alt="智能灯泡" class="w-full h-48 object-cover mb-4"/><h3 class="text-lg font-semibold">智能灯泡</h3><p class="text-custom mt-2">¥59</p></div><div class="bg-white rounded-lg p-4 hover:shadow-lg transition-shadow"><img src="./images/z4.jpg" alt="智能摄像头" class="w-full h-48 object-cover mb-4"/><h3 class="text-lg font-semibold">智能摄像头</h3><p class="text-custom mt-2">¥199</p></div><div class="bg-white rounded-lg p-4 hover:shadow-lg transition-shadow"><img src="./images/z5.jpg" alt="智能门锁" class="w-full h-48 object-cover mb-4"/><h3 class="text-lg font-semibold">智能门锁</h3><p class="text-custom mt-2">¥999</p></div></div></div></div></div></main><div class="fixed right-6 bottom-6 flex flex-col space-y-4"><button class="!rounded-button w-12 h-12 bg-white shadow-lg flex items-center justify-center text-gray-600 hover:text-custom"><i class="fas fa-headset"></i></button><button id="backToTop" class="!rounded-button w-12 h-12 bg-white shadow-lg flex items-center justify-center text-gray-600 hover:text-custom"><i class="fas fa-arrow-up"></i></button></div><footer class="bg-white mt-12 py-12"><div class="container mx-auto px-4"><div class="grid grid-cols-5 gap-8 mb-8"><div><h3 class="font-bold mb-4">帮助中心</h3><ul class="space-y-2"><li><a href="#" class="text-gray-600 hover:text-custom">账户管理</a></li><li><a href="#" class="text-gray-600 hover:text-custom">购物指南</a></li><li><a href="#" class="text-gray-600 hover:text-custom">订单操作</a></li></ul></div><div><h3 class="font-bold mb-4">服务支持</h3><ul class="space-y-2"><li><a href="#" class="text-gray-600 hover:text-custom">售后政策</a></li><li><a href="#" class="text-gray-600 hover:text-custom">自助服务</a></li><li><a href="#" class="text-gray-600 hover:text-custom">相关下载</a></li></ul></div><div><h3 class="font-bold mb-4">线下门店</h3><ul class="space-y-2"><li><a href="#" class="text-gray-600 hover:text-custom">授权体验店</a></li><li><a href="#" class="text-gray-600 hover:text-custom">服务网点</a></li><li><a href="#" class="text-gray-600 hover:text-custom">零售门店</a></li></ul></div><div><h3 class="font-bold mb-4">关于我们</h3><ul class="space-y-2"><li><a href="#" class="text-gray-600 hover:text-custom">了解我们</a></li><li><a href="#" class="text-gray-600 hover:text-custom">加入我们</a></li><li><a href="#" class="text-gray-600 hover:text-custom">联系我们</a></li></ul></div><div><h3 class="font-bold mb-4">关注我们</h3><div class="flex space-x-4"><a href="#" class="text-gray-600 hover:text-custom text-xl"><i class="fab fa-weixin"></i></a><a href="#" class="text-gray-600 hover:text-custom text-xl"><i class="fab fa-weibo"></i></a><a href="#" class="text-gray-600 hover:text-custom text-xl"><i class="fab fa-qq"></i></a></div></div></div><div class="border-t pt-8 text-center text-gray-500"><p>Copyright © 2024 logo商城. All rights reserved.</p></div></div></footer></div></body>
</html>