小米商城登录页面_Project for mi小米官网首页_index.html(更新)

最新推荐文章于 2023-04-16 23:10:30 发布
最新推荐文章于 2023-04-16 23:10:30 发布
阅读量1.1k 收藏 3
点赞数
文章标签： 小米商城登录页面
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42320493/article/details/113410773
版权

项目仓库地址：

https://github.com/mxg133/WebProject_mi​github.com 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城 - 小米10 Pro、Redmi K30、小米MIX Alpha，小米电视官方网站</title>
    <!-- 引入重置样式表 -->
    <link rel="stylesheet" href="css/reset.css">
    <!-- 引入公共样式表 -->
    <link rel="stylesheet" href="css/base.css">
    <!-- 引入图标字体库 -->
    <link rel="stylesheet" href="fontawesome/css/all.css">
    <!-- 引入当前页面的样式表 -->
    <link rel="stylesheet" href="css/index.css">
</head>

<body style="height: 1000px;">
    <!-- 顶部导航条 -->
    <!-- 顶部导航条外部容器 -->
    <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>
            </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">
            <!-- 创建一个logo -->
            <h1 class="logo" title="小米">
                小米官网
                <a class="home" href="/"></a>
                <a class="mi" href="/"></a>
            </h1>
            <!-- 创建一个中间导航条的容器 -->
            <div class="nav-wrapper">
                <!-- 创建导航条 -->
                <ul class="nav clearfix">
                    <li class="all-goods-wrapper">
                        <a class="all-goods" href="#">全部商品分类</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>
                    <!-- 设置搜索框的容器 -->
                    <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>
                </ul>
            </div>




        </div>
    </div>

    <!-- 创建一个banner的容器 -->
    <div class="banner-wrapper">
        <div class="banner w">
            <ul class="img-list">
                <li>
                    <a href="#">
                        <img src="./img/banner1.jpg" alt="">
                    </a>
                </li>

                <li>
                    <a href="#">
                        <img src="./img/banner2.jpg" alt="">
                    </a>
                </li>

                <li>
                    <a href="#">
                        <img src="./img/banner3.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./img/banner4.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./img/banner5.jpg" alt="">
                    </a>
                </li>
            </ul>

            <div class="pointer">
                <a class="active" href="javascript:;"></a>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
            </div>

            <div class="prev-next">
                <a class="prev" href="javascript:;"></a>
                <a class="next" href="javascript:;"></a>
            </div>
        </div>
    </div>

    <!-- 设置左下角的回到顶部导航条 固定定位的工具条 -->
    <div class="back-top">
        
    </div>

    <!--  -->
</body>

</html>mxg133/WebProject_mi<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城 - 小米10 Pro、Redmi K30、小米MIX Alpha，小米电视官方网站</title>
    <!-- 引入重置样式表 -->
    <link rel="stylesheet" href="css/reset.css">
    <!-- 引入公共样式表 -->
    <link rel="stylesheet" href="css/base.css">
    <!-- 引入图标字体库 -->
    <link rel="stylesheet" href="fontawesome/css/all.css">
    <!-- 引入当前页面的样式表 -->
    <link rel="stylesheet" href="css/index.css">
</head>

<body style="height: 1000px;">
    <!-- 顶部导航条 -->
    <!-- 顶部导航条外部容器 -->
    <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>
            </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">
            <!-- 创建一个logo -->
            <h1 class="logo" title="小米">
                小米官网
                <a class="home" href="/"></a>
                <a class="mi" href="/"></a>
            </h1>
            <!-- 创建一个中间导航条的容器 -->
            <div class="nav-wrapper">
                <!-- 创建导航条 -->
                <ul class="nav clearfix">
                    <li class="all-goods-wrapper">
                        <a class="all-goods" href="#">全部商品分类</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>
                    <!-- 设置搜索框的容器 -->
                    <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>
                </ul>
            </div>




        </div>
    </div>

    <!-- 创建一个banner的容器 -->
    <div class="banner-wrapper">
        <div class="banner w">
            <ul class="img-list">
                <li>
                    <a href="#">
                        <img src="./img/banner1.jpg" alt="">
                    </a>
                </li>

                <li>
                    <a href="#">
                        <img src="./img/banner2.jpg" alt="">
                    </a>
                </li>

                <li>
                    <a href="#">
                        <img src="./img/banner3.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./img/banner4.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./img/banner5.jpg" alt="">
                    </a>
                </li>
            </ul>

            <div class="pointer">
                <a class="active" href="javascript:;"></a>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
            </div>

            <div class="prev-next">
                <a class="prev" href="javascript:;"></a>
                <a class="next" href="javascript:;"></a>
            </div>
        </div>
    </div>

    <!-- 设置左下角的回到顶部导航条 固定定位的工具条 -->
    <div class="back-top">
        
    </div>

    <!--  -->
</body>

</html>

a7caec32d6407382a7a1b20668581f58.png
面试北楚
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML小米商城代码 注册 登入
10-22
小米商城首页 登入 注册 代码
小米商城页面
12-17
小米商城页面
小米的登陆页面
weixin_30849403的博客
04-13 2524
css代码 ： <style type="text/css"> body{ background-color: #EEF3FA; font: "微软雅黑"12px; margin: auto; } ...
web html 网页css 设计参照小米主页的登陆页面
11-19
web html 网页 设计参照小米主页的登陆页面 运用了CSS
HTML仿小米官网登陆
热门推荐
Cool_Q的博客
05-22 1万+
最近上课时做了一个仿小米官网额登陆界面 代码如下 <head> <meta charset="UTF-8"> <title>欢迎登陆</title> <style> * { margin: 0px; padding: 0px; } a { text-decoration: none;...
Mi_Project:用HTML+CSS实现小米商城主页面的搭建
05-10
在本项目“Mi_Project:用HTML+CSS实现小米商城主页面的搭建”中，我们将深入探讨如何使用HTML和CSS这两种基础的网页制作语言来构建一个类似小米商城的网站主页。这个项目是学习前端开发和实践网页布局技巧的一个理想...
project.rar_Project.rar_image segmentation_project_upwardlak_图像处
07-14
项目标题"project.rar_Project.rar_image segmentation_project_upwardlak_图像处"表明这是一个关于图像分割的项目，可能由用户"upwardlak"完成。关键词"image_segmentation"和"图像处理"强调了项目的主题，而...
Web_project.rar_Web_project_web project
09-20
【标题】"Web_project.rar_Web_project_web project" 指的是一个基于Struts2框架构建的Web项目，其中包含了实现系统登录与注册功能的源代码。这个项目旨在展示如何在Web应用程序中集成Struts2和JSON技术，以提供用户...
VS2015安装证书，JavaScript_ProjectSystem.msi，JavaScript_LanguageService.msi
08-06
1. 确保你有完整的VS2015 ISO镜像，可以从Microsoft官方网站下载。 2. 使用解压工具（如WinRAR或7-Zip）打开ISO文件，找到并提取缺失的.msi文件。 3. 如果是证书问题，需要找到相应的证书文件（可能在ISO的根目录或...
cim.rar_CIM_langrenwang_project management_www. 1670. cim_www.21
09-22
this is a dbms project for computer institute management system
CSS+DIV模仿小米登录页面
08-15
没事做，正好这几天在研究CSS+DIV，闲着无聊就模仿着小米的登录页面自己动手写了个（个人还是蛮喜欢那种橙色风格的），供新人参考，以便大家一起学习讨论。
仿小米静态页面登陆注册页面html、js
05-04
仿小米静态首页，登陆页面，注册页面js验证，html、js
模拟小米商城的网页界面
02-19
一个单纯的HTML界面，小米商城主界面的仿作，除了没有后台界面和数据库，基本功能健全
Web小米商城首页和登录页面基于HTML+CSS+JS实现
06-08
通过对完整项目实例的解析与实现，提高开发者项目分析能力以及强化对于HTML5、CSS3与JavaScript的综合应用能力。仿照小米商城首页与登录页面
xiomi_登录注册_展示_小米商城_ajax_
10-02
登录注册
小米商城导航界面
wuxiao18的博客
07-17 677
只写了导航栏这一小小部分 HTML： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/xiaomi.css" /> </head&g...
【小米商城-1 注册功能】
jiaowolaoliu111的博客
10-22 592
注册用户功能实现
用vue实现小米商城登录注册页面
qq_55299191的博客
04-16 3154
代码有些不规范，大多是html＋css实现的，目前是静态页面的实现。vue课堂作业，记录下。
小米登录的HTML源代码,html--登录页面（小米登录）
weixin_39850150的博客
06-03 5199
## 小米登录页面制作>#### 最终呈现效果![](https://box.kancloud.cn/1503e1a89387ff2ffb00b7a138747b15_446x543.png)> #### html代码```账号登录|扫码登录注册小米账号|忘记密码?其他方式登录```>#### css代码```/* ----------元素位置布局---------- */* {...
vs2015安装证书,javascript_projectsystem.msi,javascript_languageservi...
最新发布
09-05
在VS 2015中安装证书、javascript_projectsystem.msi和javascript_languageservice.msi的过程如下： 步骤1：下载证书 首先，我们需要下载一个证书文件。可以通过浏览器搜索`VS 2015安装证书下载`，进入微软官方网站，找到合适的证书下载页面，点击下载证书。 步骤2：安装证书 下载完成后，我们需要将证书安装到计算机中。双击证书文件，在弹出的安装向导中选择安装证书。按照提示完成整个安装过程。 步骤3：下载javascript_projectsystem.msi和javascript_languageservice.msi文件 接下来，我们需要下载这两个文件。可以通过浏览器搜索`VS 2015安装javascript_projectsystem.msi和javascript_languageservice.msi`，进入微软官方网站，找到合适的下载页面，点击下载这两个文件。 步骤4：安装javascript_projectsystem.msi和javascript_languageservice.msi 下载完成后，双击javascript_projectsystem.msi文件进行安装。按照安装向导的提示完成安装过程。同样的，再双击javascript_languageservice.msi文件进行安装，按照提示完成安装过程。 步骤5：重新启动VS 2015 安装完成后，我们需要重新启动VS 2015以使安装生效。关闭当前正在运行的VS 2015窗口，并重新打开应用程序。 通过以上步骤，你就成功地安装了证书、javascript_projectsystem.msi和javascript_languageservice.msi，可以在VS 2015中使用它们了。如果在安装过程中遇到了任何问题，建议检查下载的文件是否正确并遵循安装向导的提示进行操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值