一、作品介绍
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>
六、获取代码
内附源码，含6个页面。欢迎留言，欢迎关注。
![[SMARTFORMS] 系统变量的使用](https://csdnimg.cn/release/blog_editor_html/release2.3.7/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=O83A){kind=icon}
