一、HTML+CSS实现小米官网首页
仿写小米官网的页面，熬了两个晚上终于把这个页面做好了，原创不易，欢迎大家点赞和评论，
二、主要内容：
三、学习目标：
四、项目准备：
- 下载图片
- 下载iconfont
- 初始化css文件
五、页面结构如下：
六、效果图如下：
七、部分源代码如下（如需要全部的源代码评论区留言，原创不易，记得点赞和收藏哦）。
HTML部分源代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="index_style.css"> <script type="text/javascript" src="index.js"></script> <title>小米商城-首页</title> </head> <body> <!-- 头部部分开始 --> <div class="header"> <!-- 头部大的背景部分 --> <div class="header_top"></div> <!-- 头部中间部分的列表 --> <div class="header_middle"> <div class="w"> <ul> <li><a href="#">小米商城</a></li> <li><a href="#">MIUI</a></li> <li><a href="#">IOT</a></li> <li><a href="#">云服务</a></li> <li><a href="#">金融</a></li> <li><a href="#">有品</a></li> <li><a href="#">小爱开放平台</a></li> <li><a href="#">企业团购</a></li> <li><a href="#">资质证照</a></li> <li><a href="#">协议规则</a></li> <li><a href="#">下载APP</a></li> <li><a href="#">智能生活</a></li> <li><a href="#">Select Location</a></li> <li class="right"><a href="register.html">登录</a></li> <li><a href="login.html">注册</a></li> <li><a href="message.html">消息通知</a></li> <li class="shopping"><a href="shopping.html">购物车(0)</a></li> </ul> </div> </div> <!-- 头部logo部分 --> <div class="top_logo w"> <a href="#" class="logo"></a> <ul class="list"> <li><a href="#">小米手机</a></li> <li><a href="#">Redmi红米</a></li> <li><a href="#">电视</a></li> <li><a href="#">笔记本</a></li> <li><a href="#">家电</a></li> <li><a href="#">路由器</a></li> <li><a href="#">智能硬件</a></li> <li><a href="#">服务</a></li> <li><a href="#">社区</a></li> </ul> <a href="#" class="search_btn"></a> <div class="search"> <input type="search" value="出行" class="search-text"> </div> </div> <!-- 头部app部分 --> <div class="top_app w"> <!-- 轮播图效果 start --> <div id="box_autoplay"> <div class="box_autoplay_list"> <ul> <li><img src="images/app_banner.webp.jpg" style="width: 1226px; height: 460px;" /></li> <li><img src="images/app_banner.webp2.jpg" style="width: 1226px; height: 460px;" /></li> <li><img src="images/app_banner.webp3.webp.jpg" style="width: 1226px; height: 470px;"/></li> <li><img src="images/app_banner.webp4.webp.jpg" style="width: 1226px; height: 470px;" /></li> </ul> </div> </div> <!-- 轮播图效果 end --> <div class="app_list"> <ul> <li><a href="#">手机 电话卡</a></li> <li><a href="#">电视 盒子</a></li> <li><a href="#">笔记本 显示器</a></li> <li><a href="#">家电 插线板</a></li> <li><a href="#">出行 穿戴</a></li> <li><a href="#">智能 路由器</a></li> <li><a href="#">电源 配件</a></li> <li><a href="#">健康 儿童</a></li> <li><a href="#">耳机 音箱</a></li> <li><a href="#">生活 箱包</a></li> </ul> </div> </div> <div class="app_bottom w"> <div class="first"> <ul> <li><a href="#"><img src="images/app_btn1.png" alt="">小米秒杀</a></li> <li><a href="#"><img src="images/app_btn2.png" alt="">企业团购</a></li> <li class="first3"><a href="#"><img src="images/app_btn3.png" alt="">F码通道</a></li> <li class="first4"><a href="#"><img src="images/app_btn4.png" alt="">米粉卡</a></li> <li class="first5"><a href="#"><img src="images/app_btn5.png" alt="">以旧换新</a></li> <li class="first6"><a href="#"><img src="images/app_btn6.png" alt="">话费充值</a></li> </ul><a href="#"></a> </div> <ul> <li><a href="#"><img src="images/app_bottom1.jpg" alt=""></a></li> <li><a href="#"><img src="images/app_bottom2.jpg" alt=""></a></li> <li><a href="#"><img src="images/app_bottom3.jpg" alt=""></a></li> </ul> </div> </div> <!-- 头部部分结束 -->
HTML+CSS实现小米官网首页（二）https://developer.aliyun.com/article/1382511
