【Web前端HTML+CSS基础——小米官网项目实战】

最新推荐文章于 2024-05-02 14:26:53 发布
最新推荐文章于 2024-05-02 14:26:53 发布
阅读量2.9k 收藏 61
点赞数 16
分类专栏： 前端 文章标签： 前端 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_64993156/article/details/129233075
版权

文章目录

小米官网

小米官网是学习前端实战项目锻炼最多的一个项目，基本上就是学习完HTML和CSS之后就可以开始锻炼自己实战的能力，学习如何搭建自己一个完整的页面实战，对之后的学习打下很好的基础，在这个博客的代码中，我只是涉及到相关的HTML和CSS，图片路径可以自己改并且找一些相关的图片，或者下载我主页的资源。

小米官网的效果图

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

小米官网的HTML代码

<!DOCTYPE html>
<html lang="en">
<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">
    <title>Document</title>
    <link rel="stylesheet" href="./css/banner.css">
    <link rel="stylesheet" href="./css/banner2.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/fonter.css">
    <link rel="stylesheet" href="./css/header.css">
    <link rel="stylesheet" href="./css/main.css">
    <link rel="stylesheet" href="./css/rm.css">
    <link rel="stylesheet" href="./css/topnav.css">
</head>
<body>
     <!-- 顶部导航 开始 -->
     <div class="topnav">
        <div class="container clearfix">
          <ul class="fl topnav-menu">
            <li class="fl"><a href="">小米商城</a></li>
            <li class="fl"><a href="">MIUI</a></li>
            <li class="fl"><a href="">IoT</a></li>
            <li class="fl"><a href="">云服务</a></li>
            <li class="fl"><a href="">天星数科</a></li>
            <li class="fl"><a href="">有品</a></li>
            <li class="fl"><a href="">小爱开放平台</a></li>
            <li class="fl"><a href="">企业团购</a></li>
            <li class="fl"><a href="">资质证照</a></li>
            <li class="fl"><a href="">协议规则</a></li>
            <li class="fl"><a href="">下载app</a></li>
            <li class="fl"><a href="">智能生活</a></li>
            <li class="fl"><a href="">Select Location</a></li>
          </ul>
          <div class="fr">
            <!-- 登录、注册、消息通知 -->
            <ul class="topnav-menu fl">
              <li class="fl"><a href="">登录</a></li>
              <li class="fl"><a href="">注册</a></li>
              <li class="fl"><a href="">消息通知</a></li>
            </ul>
            <!-- 购物车 -->
            <div class="fl topnav-car">
              <a class="topnav-link" href="">
                <i class="iconfont i-car"></i>
                <span>购物车（0）</span>
              </a>
              <div class="topnav-detail">购物车中还没有商品，赶紧选购吧！</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 顶部导航 结束 -->
  
      <!-- 页头 开始 -->
      <div class="header">
        <div class="container clearfix">
          <a href="" class="header-logo fl">
            <h1>小米商城</h1>
          </a>
          <div class="header-menu fl">
            <a class="fl" href="">小米手机</a>
            <a class="fl" href="">红米手机</a>
            <a class="fl" href="">电视</a>
              <a class="fl" href="">笔记本</a>
              <a class="fl" href="">平板</a>
            <a class="fl" href="">家电</a>
            <a class="fl" href="">路由器</a>
            <a class="fl" href="">服务</a>
            <a class="fl" href="">社区</a>++++
            <!-- 二级菜单 -->
            <div class="header-submenu">
              <div class="container clearfix">
                <a href="" class="fl">
                  <div class="header-cover">
                    <img src="./img/product.webp" alt="" />
                  </div>
                  <div class="header-name">Redmi Note 11 5G</div>
                  <div class="header-price">1199元起</div>
                </a>
                <a href="" class="fl">
                  <div class="header-cover">
                    <img src="./img/product.webp" alt="" />
                  </div>
                  <div class="header-name">Redmi Note 11 5G</div>
                  <div class="header-price">1199元起</div>
                </a>
                <a href="" class="fl">
                  <div class="header-cover">
                    <img src="./img/product.webp" alt="" />
                  </div>
                  <div class="header-name">Redmi Note 11 5G</div>
                  <div class="header-price">1199元起</div>
                </a>
                <a href="" class="fl">
                  <div class="header-cover">
                    <img src="./img/product.webp" alt="" />
                  </div>
                  <div class="header-name">Redmi Note 11 5G</div>
                  <div class="header-price">1199元起</div>
                </a>
                <a href="" class="fl">
                  <div class="header-cover">
                    <img src="./img/product.webp" alt="" />
                  </div>
                  <div class="header-name">Redmi Note 11 5G</div>
                  <div class="header-price">1199元起</div>
                </a>
                <a href="" class="fl">
                  <div class="header-cover">
                    <img src="./img/product.webp" alt="" />
                  </div>
                  <div class="header-name">Redmi Note 11 5G</div>
                  <div class="header-price">1199元起</div>
                </a>
              </div>
            </div>
          </div>
          <!-- 搜索区域 -->
          <form class="header-search fr">
            <input class="fl" type="text" placeholder="手机" />
            <button class="header-searchicon fl">
              <i class="iconfont i-fangdajing"></i>
            </button>
            <div class="header-suggest">
              <a href="">全部商品</a>
              <a href="">手机</a>
              <a href="">耳机</a>
              <a href="">小米平板5 Pro</a>
              <a href="">加湿器</a>
              <a href="">笔记本</a>
            </div>
          </form>
        </div>
      </div>
      <!-- 页头 结束 -->
  
      <!-- 横幅 开始 -->
      <div class="banner container">
        <a href="" class="banner-cover">
          <img src="./img/banner.jpeg" alt="" />
        </a>
        <div class="banner-pointer banner-pointer-left">
          <i class="iconfont i-left"></i>
        </div>
        <div class="banner-pointer banner-pointer-right">
          <i class="iconfont i-right"></i>
        </div>
        <div class="banner-dots">
          <span class="fl"></span>
          <span class="banner-dots-selected fl"></span>
          <span class="fl"></span>
        </div>
        <!-- 横幅-菜单 -->
        <ul class="banner-menu">
          <li>
            <div class="banner-menu-item clearfix">
              <span class="fl">手机</span>
              <i class="iconfont i-right fr"></i>
            </div>
            <div class="banner-sub-menu">
              <a href="" class="fl">
                <img src="./img/mobile.webp" alt="" class="fl" />
                <span class="fl">Note 11 Pro 系列</span>
              </a>
              <a href="" class="fl">
                <img src="./img/mobile.webp" alt="" class="fl" />
                <span class="fl">Note 11 Pro 系列</span>
              </a>
              <a href="" class="fl">
                <img src="./img/mobile.webp" alt="" class="fl" />
                <span class="fl">Note 11 Pro 系列</span>
              </a>
              <a href="" class="fl">
                <img src="./img/mobile.webp" alt="" class="fl" />
                <span class="fl">Note 11 Pro 系列</span>
              </a>
              <a href="" class="fl">
                <img src="./img/mobile.webp" alt="" class="fl" />
                <span class="fl">Note 11 Pro 系列</span>
              </a>
              <a href="" class="fl">
                <img src="./img/mobile.webp" alt="" class="fl" />
                <span class="fl">Note 11 Pro 系列</span>
              </a>
              <a href="" class="fl">
                <img src="./img/mobile.webp" alt="" class="fl" />
                <span class="fl">Note 11 Pro 系列</span>
              </a>
              <a href="" class="fl">
                <img src="./img/mobile.webp" alt="" class="fl" />
                <span class="fl">Note 11 Pro 系列</span>
              </a>
              <a href="" class="fl">
                <img src="./img/mobile.webp" alt="" class="fl" />
                <span class="fl">Note 11 Pro 系列</span>
              </a>
              <a href="" class="fl">
                <img src="./img/mobile.webp" alt="" class="fl" />
                <span class="fl">Note 11 Pro 系列</span>
              </a>
              <a href="" class="fl">
                <img src="./img/mobile.webp" alt="" class="fl" />
                <span class="fl">Note 11 Pro 系列</span>
              </a>
              <a href="" class="fl">
                <img src="./img/mobile.webp" alt="" class="fl" />
                <span class="fl">Note 11 Pro 系列</span>
              </a>
              <a href="" class="fl">
                <img src="./img/mobile.webp" alt="" class="fl" />
                <span class="fl">Note 11 Pro 系列</span>
              </a>
              <a href="" class="fl">
                <img src="./img/mobile.webp" alt="" class="fl" />
                <span class="fl">Note 11 Pro 系列</span>
              </a>
              <a href="" class="fl">
                <img src="./img/mobile.webp" alt="" class="fl" />
                <span class="fl">Note 11 Pro 系列</span>
              </a>
              <a href="" class="fl">
                <img src="./img/mobile.webp" alt="" class="fl" />
                <span class="fl">Note 11 Pro 系列</span>
              </a>
              <a href="" class="fl">
                <img src="./img/mobile.webp" alt="" class="fl" />
                <span class="fl">Note 11 Pro 系列</span>
              </a>
              <a href="" class="fl">
                <img src="./img/mobile.webp" alt="" class="fl" />
                <span class="fl">Note 11 Pro 系列</span>
              </a>
              <a href="" class="fl">
                <img src="./img/mobile.webp" alt="" class="fl" />
                <span class="fl">Note 11 Pro 系列</span>
              </a>
              <a href="" class="fl">
                <img src="./img/mobile.webp" alt="" class="fl" />
                <span class="fl">Note 11 Pro 系列</span>
              </a>
              <a href="" class="fl">
                <img src="./img/mobile.webp" alt="" class="fl" />
                <span class="fl">Note 11 Pro 系列</span>
              </a>
              <a href="" class="fl">
                <img src="./img/mobile.webp" alt="" class="fl" />
                <span class="fl">Note 11 Pro 系列</span>
              </a>
              <a href="" class="fl">
                <img src="./img/mobile.webp" alt="" class="fl" />
                <span class="fl">Note 11 Pro 系列</span>
              </a>
              <a href="" class="fl">
                <img src="./img/mobile.webp" alt="" class="fl" />
                <span class="fl">Note 11 Pro 系列</span>
              </a>
            </div>
          </li>
          <li>
            <div class="banner-menu-item clearfix">
              <span class="fl">电视</span>
              <i class="iconfont i-right fr"></i>
            </div>
            <div class="banner-sub-menu">
              <a href="" class="fl">
                <img src="./img/tv.webp" alt="" class="fl" />
                <span class="fl">Redmi 智能电视X65 2022款</span>
              </a>
              <a href="" class="fl">
                <img src="./img/tv.webp" alt="" class="fl" />
                <span class="fl">Redmi 智能电视X65 2022款</span>
              </a>
              <a href="" class="fl">
                <img src="./img/tv.webp" alt="" class="fl" />
                <span class="fl">Redmi 智能电视X65 2022款</span>
              </a>
              <a href="" class="fl">
                <img src="./img/tv.webp" alt="" class="fl" />
                <span class="fl">Redmi 智能电视X65 2022款</span>
              </a>
              <a href="" class="fl">
                <img src="./img/tv.webp" alt="" class="fl" />
                <span class="fl">Redmi 智能电视X65 2022款</span>
              </a>
              <a href="" class="fl">
                <img src="./img/tv.webp" alt="" class="fl" />
                <span class="fl">Redmi 智能电视X65 2022款</span>
              </a>
              <a href="" class="fl">
                <img src="./img/tv.webp" alt="" class="fl" />
                <span class="fl">Redmi 智能电视X65 2022款</span>
              </a>
              <a href="" class="fl">
                <img src="./img/tv.webp" alt="" class="fl" />
                <span class="fl">Redmi 智能电视X65 2022款</span>
              </a>
              <a href="" class="fl">
                <img src="./img/tv.webp" alt="" class="fl" />
                <span class="fl">Redmi 智能电视X65 2022款</span>
              </a>
              <a href="" class="fl">
                <img src="./img/tv.webp" alt="" class="fl" />
                <span class="fl">Redmi 智能电视X65 2022款</span>
              </a>
              <a href="" class="fl">
                <img src="./img/tv.webp" alt="" class="fl" />
                <span class="fl">Redmi 智能电视X65 2022款</span>
              </a>
              <a href="" class="fl">
                <img src="./img/tv.webp" alt="" class="fl" />
                <span class="fl">Redmi 智能电视X65 2022款</span>
              </a>
              <a href="" class="fl">
                <img src="./img/tv.webp" alt="" class="fl" />
                <span class="fl">Redmi 智能电视X65 2022款</span>
              </a>
              <a href="" class="fl">
                <img src="./img/tv.webp" alt="" class="fl" />
                <span class="fl">Redmi 智能电视X65 2022款</span>
              </a>
              <a href="" class="fl">
                <img src="./img/tv.webp" alt="" class="fl" />
                <span class="fl">Redmi 智能电视X65 2022款</span>
              </a>
              <a href="" class="fl">
                <img src="./img/tv.webp" alt="" class="fl" />
                <span class="fl">Redmi 智能电视X65 2022款</span>
              </a>
              <a href="" class="fl">
                <img src="./img/tv.webp" alt="" class="fl" />
                <span class="fl">Redmi 智能电视X65 2022款</span>
              </a>
              <a href="" class="fl">
                <img src="./img/tv.webp" alt="" class="fl" />
                <span class="fl">Redmi 智能电视X65 2022款</span>
              </a>
              <a href="" class="fl">
                <img src="./img/tv.webp" alt="" class="fl" />
                <span class="fl">Redmi 智能电视X65 2022款</span>
              </a>
              <a href="" class="fl">
                <img src="./img/tv.webp" alt="" class="fl" />
                <span class="fl">Redmi 智能电视X65 2022款</span>
              </a>
              <a href="" class="fl">
                <img src="./img/tv.webp" alt="" class="fl" />
                <span class="fl">Redmi 智能电视X65 2022款</span>
              </a>
              <a href="" class="fl">
                <img src="./img/tv.webp" alt="" class="fl" />
                <span class="fl">Redmi 智能电视X65 2022款</span>
              </a>
              <a href="" class="fl">
                <img src="./img/tv.webp" alt="" class="fl" />
                <span class="fl">Redmi 智能电视X65 2022款</span>
              </a>
              <a href="" class="fl">
                <img src="./img/tv.webp" alt="" class="fl" />
                <span class="fl">Redmi 智能电视X65 2022款</span>
              </a>
            </div>
          </li>
          <li>
            <div class="banner-menu-item clearfix">
              <span class="fl">笔记本 平板</span>
              <i class="iconfont i-right fr"></i>
            </div>
            <div class="banner-sub-menu">
              <a href="" class="fl">
                <img src="./img/notebook.webp" alt="" class="fl" />
                <span class="fl">小米笔记本 Pro 14 锐龙版</span>
              </a>
              <a href="" class="fl">
                <img src="./img/notebook.webp" alt="" class="fl" />
                <span class="fl">小米笔记本 Pro 14 锐龙版</span>
              </a>
              <a href="" class="fl">
                <img src="./img/notebook.webp" alt="" class="fl" />
                <span class="fl">小米笔记本 Pro 14 锐龙版</span>
              </a>
              <a href="" class="fl">
                <img src="./img/notebook.webp" alt="" class="fl" />
                <span class="fl">小米笔记本 Pro 14 锐龙版</span>
              </a>
              <a href="" class="fl">
                <img src="./img/notebook.webp" alt="" class="fl" />
                <span class="fl">小米笔记本 Pro 14 锐龙版</span>
              </a>
              <a href="" class="fl">
                <img src="./img/notebook.webp" alt="" class="fl" />
                <span class="fl">小米笔记本 Pro 14 锐龙版</span>
              </a>
              <a href="" class="fl">
                <img src="./img/notebook.webp" alt="" class="fl" />
                <span class="fl">小米笔记本 Pro 14 锐龙版</span>
              </a>
              <a href="" class="fl">
                <img src="./img/notebook.webp" alt="" class="fl" />
                <span class="fl">小米笔记本 Pro 14 锐龙版</span>
              </a>
              <a href="" class="fl">
                <img src="./img/notebook.webp" alt="" class="fl" />
                <span class="fl">小米笔记本 Pro 14 锐龙版</span>
              </a>
              <a href="" class="fl">
                <img src="./img/notebook.webp" alt="" class="fl" />
                <span class="fl">小米笔记本 Pro 14 锐龙版</span>
              </a>
              <a href="" class="fl">
                <img src="./img/notebook.webp" alt="" class="fl" />
                <span class="fl">小米笔记本 Pro 14 锐龙版</span>
              </a>
              <a href="" class="fl">
                <img src="./img/notebook.webp" alt="" class="fl" />
                <span class="fl">小米笔记本 Pro 14 锐龙版</span>
              </a>
              <a href="" class="fl">
                <img src="./img/notebook.webp" alt="" class="fl" />
                <span class="fl">小米笔记本 Pro 14 锐龙版</span>
              </a>
              <a href="" class="fl">
                <img src="./img/notebook.webp" alt="" class="fl" />
                <span class="fl">小米笔记本 Pro 14 锐龙版</span>
              </a>
              <a href="" class="fl">
                <img src="./img/notebook.webp" alt="" class="fl" />
                <span class="fl">小米笔记本 Pro 14 锐龙版</span>
              </a>
              <a href="" class="fl">
                <img src="./img/notebook.webp" alt="" class="fl" />
                <span class="fl">小米笔记本 Pro 14 锐龙版</span>
              </a>
              <a href="" class="fl">
                <img src="./img/notebook.webp" alt="" class="fl" />
                <span class="fl">小米笔记本 Pro 14 锐龙版</span>
              </a>
              <a href="" class="fl">
                <img src="./img/notebook.webp" alt="" class="fl" />
                <span class="fl">小米笔记本 Pro 14 锐龙版</span>
              </a>
              <a href="" class="fl">
                <img src="./img/notebook.webp" alt="" class="fl" />
                <span class="fl">小米笔记本 Pro 14 锐龙版</span>
              </a>
              <a href="" class="fl">
                <img src="./img/notebook.webp" alt="" class="fl" />
                <span class="fl">小米笔记本 Pro 14 锐龙版</span>
              </a>
              <a href="" class="fl">
                <img src="./img/notebook.webp" alt="" class="fl" />
                <span class="fl">小米笔记本 Pro 14 锐龙版</span>
              </a>
              <a href="" class="fl">
                <img src="./img/notebook.webp" alt="" class="fl" />
                <span class="fl">小米笔记本 Pro 14 锐龙版</span>
              </a>
            </div>
          </li>
          <li>
            <div class="banner-menu-item clearfix">
              <span class="fl">家电</span>
              <i class="iconfont i-right fr"></i>
            </div>
            <div class="banner-sub-menu">
              <a href="" class="fl">
                <img src="./img/fridge.webp" alt="" class="fl" />
                <span class="fl">冰箱</span>
              </a>
              <a href="" class="fl">
                <img src="./img/fridge.webp" alt="" class="fl" />
                <span class="fl">冰箱</span>
              </a>
              <a href="" class="fl">
                <img src="./img/fridge.webp" alt="" class="fl" />
                <span class="fl">冰箱</span>
              </a>
              <a href="" class="fl">
                <img src="./img/fridge.webp" alt="" class="fl" />
                <span class="fl">冰箱</span>
              </a>
              <a href="" class="fl">
                <img src="./img/fridge.webp" alt="" class="fl" />
                <span class="fl">冰箱</span>
              </a>
              <a href="" class="fl">
                <img src="./img/fridge.webp" alt="" class="fl" />
                <span class="fl">冰箱</span>
              </a>
              <a href="" class="fl">
                <img src="./img/fridge.webp" alt="" class="fl" />
                <span class="fl">冰箱</span>
              </a>
              <a href="" class="fl">
                <img src="./img/fridge.webp" alt="" class="fl" />
                <span class="fl">冰箱</span>
              </a>
              <a href="" class="fl">
                <img src="./img/fridge.webp" alt="" class="fl" />
                <span class="fl">冰箱</span>
              </a>
              <a href="" class="fl">
                <img src="./img/fridge.webp" alt="" class="fl" />
                <span class="fl">冰箱</span>
              </a>
              <a href="" class="fl">
                <img src="./img/fridge.webp" alt="" class="fl" />
                <span class="fl">冰箱</span>
              </a>
              <a href="" class="fl">
                <img src="./img/fridge.webp" alt="" class="fl" />
                <span class="fl">冰箱</span>
              </a>
              <a href="" class="fl">
                <img src="./img/fridge.webp" alt="" class="fl" />
                <span class="fl">冰箱</span>
              </a>
              <a href="" class="fl">
                <img src="./img/fridge.webp" alt="" class="fl" />
                <span class="fl">冰箱</span>
              </a>
              <a href="" class="fl">
                <img src="./img/fridge.webp" alt="" class="fl" />
                <span class="fl">冰箱</span>
              </a>
              <a href="" class="fl">
                <img src="./img/fridge.webp" alt="" class="fl" />
                <span class="fl">冰箱</span>
              </a>
              <a href="" class="fl">
                <img src="./img/fridge.webp" alt="" class="fl" />
                <span class="fl">冰箱</span>
              </a>
              <a href="" class="fl">
                <img src="./img/fridge.webp" alt="" class="fl" />
                <span class="fl">冰箱</span>
              </a>
              <a href="" class="fl">
                <img src="./img/fridge.webp" alt="" class="fl" />
                <span class="fl">冰箱</span>
              </a>
              <a href="" class="fl">
                <img src="./img/fridge.webp" alt="" class="fl" />
                <span class="fl">冰箱</span>
              </a>
              <a href="" class="fl">
                <img src="./img/fridge.webp" alt="" class="fl" />
                <span class="fl">冰箱</span>
              </a>
              <a href="" class="fl">
                <img src="./img/fridge.webp" alt="" class="fl" />
                <span class="fl">冰箱</span>
              </a>
              <a href="" class="fl">
                <img src="./img/fridge.webp" alt="" class="fl" />
                <span class="fl">冰箱</span>
              </a>
              <a href="" class="fl">
                <img src="./img/fridge.webp" alt="" class="fl" />
                <span class="fl">冰箱</span>
              </a>
            </div>
          </li>
          <li>
            <div class="banner-menu-item clearfix">
              <span class="fl">出行 穿戴</span>
              <i class="iconfont i-right fr"></i>
            </div>
            <div class="banner-sub-menu">
              <a href="" class="fl">
                <img src="./img/watch.webp" alt="" class="fl" />
                <span class="fl">Redmi 手表 2</span>
              </a>
              <a href="" class="fl">
                <img src="./img/watch.webp" alt="" class="fl" />
                <span class="fl">Redmi 手表 2</span>
              </a>
              <a href="" class="fl">
                <img src="./img/watch.webp" alt="" class="fl" />
                <span class="fl">Redmi 手表 2</span>
              </a>
              <a href="" class="fl">
                <img src="./img/watch.webp" alt="" class="fl" />
                <span class="fl">Redmi 手表 2</span>
              </a>
              <a href="" class="fl">
                <img src="./img/watch.webp" alt="" class="fl" />
                <span class="fl">Redmi 手表 2</span>
              </a>
              <a href="" class="fl">
                <img src="./img/watch.webp" alt="" class="fl" />
                <span class="fl">Redmi 手表 2</span>
              </a>
              <a href="" class="fl">
                <img src="./img/watch.webp" alt="" class="fl" />
                <span class="fl">Redmi 手表 2</span>
              </a>
              <a href="" class="fl">
                <img src="./img/watch.webp" alt="" class="fl" />
                <span class="fl">Redmi 手表 2</span>
              </a>
              <a href="" class="fl">
                <img src="./img/watch.webp" alt="" class="fl" />
                <span class="fl">Redmi 手表 2</span>
              </a>
              <a href="" class="fl">
                <img src="./img/watch.webp" alt="" class="fl" />
                <span class="fl">Redmi 手表 2</span>
              </a>
              <a href="" class="fl">
                <img src="./img/watch.webp" alt="" class="fl" />
                <span class="fl">Redmi 手表 2</span>
              </a>
              <a href="" class="fl">
                <img src="./img/watch.webp" alt="" class="fl" />
                <span class="fl">Redmi 手表 2</span>
              </a>
              <a href="" class="fl">
                <img src="./img/watch.webp" alt="" class="fl" />
                <span class="fl">Redmi 手表 2</span>
              </a>
              <a href="" class="fl">
                <img src="./img/watch.webp" alt="" class="fl" />
                <span class="fl">Redmi 手表 2</span>
              </a>
            </div>
          </li>
          <li>
            <div class="banner-menu-item clearfix">
              <span class="fl">智能 路由器</span>
              <i class="iconfont i-right fr"></i>
            </div>
            <div class="banner-sub-menu">
              <a href="" class="fl">
                <img src="./img/ai.webp" alt="" class="fl" />
                <span class="fl">CyberDog</span>
              </a>
              <a href="" class="fl">
                <img src="./img/ai.webp" alt="" class="fl" />
                <span class="fl">CyberDog</span>
              </a>
              <a href="" class="fl">
                <img src="./img/ai.webp" alt="" class="fl" />
                <span class="fl">CyberDog</span>
              </a>
              <a href="" class="fl">
                <img src="./img/ai.webp" alt="" class="fl" />
                <span class="fl">CyberDog</span>
              </a>
              <a href="" class="fl">
                <img src="./img/ai.webp" alt="" class="fl" />
                <span class="fl">CyberDog</span>
              </a>
              <a href="" class="fl">
                <img src="./img/ai.webp" alt="" class="fl" />
                <span class="fl">CyberDog</span>
              </a>
              <a href="" class="fl">
                <img src="./img/ai.webp" alt="" class="fl" />
                <span class="fl">CyberDog</span>
              </a>
              <a href="" class="fl">
                <img src="./img/ai.webp" alt="" class="fl" />
                <span class="fl">CyberDog</span>
              </a>
              <a href="" class="fl">
                <img src="./img/ai.webp" alt="" class="fl" />
                <span class="fl">CyberDog</span>
              </a>
              <a href="" class="fl">
                <img src="./img/ai.webp" alt="" class="fl" />
                <span class="fl">CyberDog</span>
              </a>
              <a href="" class="fl">
                <img src="./img/ai.webp" alt="" class="fl" />
                <span class="fl">CyberDog</span>
              </a>
              <a href="" class="fl">
                <img src="./img/ai.webp" alt="" class="fl" />
                <span class="fl">CyberDog</span>
              </a>
              <a href="" class="fl">
                <img src="./img/ai.webp" alt="" class="fl" />
                <span class="fl">CyberDog</span>
              </a>
              <a href="" class="fl">
                <img src="./img/ai.webp" alt="" class="fl" />
                <span class="fl">CyberDog</span>
              </a>
            </div>
          </li>
          <li>
            <div class="banner-menu-item clearfix">
              <span class="fl">电源 配件</span>
              <i class="iconfont i-right fr"></i>
            </div>
            <div class="banner-sub-menu">
              <a href="" class="fl">
                <img src="./img/power.webp" alt="" class="fl" />
                <span class="fl">移动电源</span>
              </a>
              <a href="" class="fl">
                <img src="./img/power.webp" alt="" class="fl" />
                <span class="fl">移动电源</span>
              </a>
              <a href="" class="fl">
                <img src="./img/power.webp" alt="" class="fl" />
                <span class="fl">移动电源</span>
              </a>
              <a href="" class="fl">
                <img src="./img/power.webp" alt="" class="fl" />
                <span class="fl">移动电源</span>
              </a>
              <a href="" class="fl">
                <img src="./img/power.webp" alt="" class="fl" />
                <span class="fl">移动电源</span>
              </a>
              <a href="" class="fl">
                <img src="./img/power.webp" alt="" class="fl" />
                <span class="fl">移动电源</span>
              </a>
              <a href="" class="fl">
                <img src="./img/power.webp" alt="" class="fl" />
                <span class="fl">移动电源</span>
              </a>
              <a href="" class="fl">
                <img src="./img/power.webp" alt="" class="fl" />
                <span class="fl">移动电源</span>
              </a>
              <a href="" class="fl">
                <img src="./img/power.webp" alt="" class="fl" />
                <span class="fl">移动电源</span>
              </a>
              <a href="" class="fl">
                <img src="./img/power.webp" alt="" class="fl" />
                <span class="fl">移动电源</span>
              </a>
              <a href="" class="fl">
                <img src="./img/power.webp" alt="" class="fl" />
                <span class="fl">移动电源</span>
              </a>
            </div>
          </li>
          <li>
            <div class="banner-menu-item clearfix">
              <span class="fl">健康 儿童</span>
              <i class="iconfont i-right fr"></i>
            </div>
            <div class="banner-sub-menu">
              <a href="" class="fl">
                <img src="./img/health.webp" alt="" class="fl" />
                <span class="fl">米家跑步机</span>
              </a>
              <a href="" class="fl">
                <img src="./img/health.webp" alt="" class="fl" />
                <span class="fl">米家跑步机</span>
              </a>
              <a href="" class="fl">
                <img src="./img/health.webp" alt="" class="fl" />
                <span class="fl">米家跑步机</span>
              </a>
              <a href="" class="fl">
                <img src="./img/health.webp" alt="" class="fl" />
                <span class="fl">米家跑步机</span>
              </a>
              <a href="" class="fl">
                <img src="./img/health.webp" alt="" class="fl" />
                <span class="fl">米家跑步机</span>
              </a>
              <a href="" class="fl">
                <img src="./img/health.webp" alt="" class="fl" />
                <span class="fl">米家跑步机</span>
              </a>
              <a href="" class="fl">
                <img src="./img/health.webp" alt="" class="fl" />
                <span class="fl">米家跑步机</span>
              </a>
              <a href="" class="fl">
                <img src="./img/health.webp" alt="" class="fl" />
                <span class="fl">米家跑步机</span>
              </a>
              <a href="" class="fl">
                <img src="./img/health.webp" alt="" class="fl" />
                <span class="fl">米家跑步机</span>
              </a>
              <a href="" class="fl">
                <img src="./img/health.webp" alt="" class="fl" />
                <span class="fl">米家跑步机</span>
              </a>
              <a href="" class="fl">
                <img src="./img/health.webp" alt="" class="fl" />
                <span class="fl">米家跑步机</span>
              </a>
              <a href="" class="fl">
                <img src="./img/health.webp" alt="" class="fl" />
                <span class="fl">米家跑步机</span>
              </a>
              <a href="" class="fl">
                <img src="./img/health.webp" alt="" class="fl" />
                <span class="fl">米家跑步机</span>
              </a>
              <a href="" class="fl">
                <img src="./img/health.webp" alt="" class="fl" />
                <span class="fl">米家跑步机</span>
              </a>
              <a href="" class="fl">
                <img src="./img/health.webp" alt="" class="fl" />
                <span class="fl">米家跑步机</span>
              </a>
              <a href="" class="fl">
                <img src="./img/health.webp" alt="" class="fl" />
                <span class="fl">米家跑步机</span>
              </a>
            </div>
          </li>
          <li>
            <div class="banner-menu-item clearfix">
              <span class="fl">耳机 音箱</span>
              <i class="iconfont i-right fr"></i>
            </div>
            <div class="banner-sub-menu">
              <a href="" class="fl">
                <img src="./img/earphone.webp" alt="" class="fl" />
                <span class="fl">Redmi Buds 3 青春版</span>
              </a>
              <a href="" class="fl">
                <img src="./img/earphone.webp" alt="" class="fl" />
                <span class="fl">Redmi Buds 3 青春版</span>
              </a>
              <a href="" class="fl">
                <img src="./img/earphone.webp" alt="" class="fl" />
                <span class="fl">Redmi Buds 3 青春版</span>
              </a>
              <a href="" class="fl">
                <img src="./img/earphone.webp" alt="" class="fl" />
                <span class="fl">Redmi Buds 3 青春版</span>
              </a>
              <a href="" class="fl">
                <img src="./img/earphone.webp" alt="" class="fl" />
                <span class="fl">Redmi Buds 3 青春版</span>
              </a>
              <a href="" class="fl">
                <img src="./img/earphone.webp" alt="" class="fl" />
                <span class="fl">Redmi Buds 3 青春版</span>
              </a>
              <a href="" class="fl">
                <img src="./img/earphone.webp" alt="" class="fl" />
                <span class="fl">Redmi Buds 3 青春版</span>
              </a>
              <a href="" class="fl">
                <img src="./img/earphone.webp" alt="" class="fl" />
                <span class="fl">Redmi Buds 3 青春版</span>
              </a>
              <a href="" class="fl">
                <img src="./img/earphone.webp" alt="" class="fl" />
                <span class="fl">Redmi Buds 3 青春版</span>
              </a>
              <a href="" class="fl">
                <img src="./img/earphone.webp" alt="" class="fl" />
                <span class="fl">Redmi Buds 3 青春版</span>
              </a>
              <a href="" class="fl">
                <img src="./img/earphone.webp" alt="" class="fl" />
                <span class="fl">Redmi Buds 3 青春版</span>
              </a>
              <a href="" class="fl">
                <img src="./img/earphone.webp" alt="" class="fl" />
                <span class="fl">Redmi Buds 3 青春版</span>
              </a>
              <a href="" class="fl">
                <img src="./img/earphone.webp" alt="" class="fl" />
                <span class="fl">Redmi Buds 3 青春版</span>
              </a>
              <a href="" class="fl">
                <img src="./img/earphone.webp" alt="" class="fl" />
                <span class="fl">Redmi Buds 3 青春版</span>
              </a>
              <a href="" class="fl">
                <img src="./img/earphone.webp" alt="" class="fl" />
                <span class="fl">Redmi Buds 3 青春版</span>
              </a>
              <a href="" class="fl">
                <img src="./img/earphone.webp" alt="" class="fl" />
                <span class="fl">Redmi Buds 3 青春版</span>
              </a>
              <a href="" class="fl">
                <img src="./img/earphone.webp" alt="" class="fl" />
                <span class="fl">Redmi Buds 3 青春版</span>
              </a>
              <a href="" class="fl">
                <img src="./img/earphone.webp" alt="" class="fl" />
                <span class="fl">Redmi Buds 3 青春版</span>
              </a>
            </div>
          </li>
          <li>
            <div class="banner-menu-item clearfix">
              <span class="fl">生活 箱包</span>
              <i class="iconfont i-right fr"></i>
            </div>
            <div class="banner-sub-menu">
              <a href="" class="fl">
                <img src="./img/bag.webp" alt="" class="fl" />
                <span class="fl">小背包</span>
              </a>
              <a href="" class="fl">
                <img src="./img/bag.webp" alt="" class="fl" />
                <span class="fl">小背包</span>
              </a>
              <a href="" class="fl">
                <img src="./img/bag.webp" alt="" class="fl" />
                <span class="fl">小背包</span>
              </a>
              <a href="" class="fl">
                <img src="./img/bag.webp" alt="" class="fl" />
                <span class="fl">小背包</span>
              </a>
              <a href="" class="fl">
                <img src="./img/bag.webp" alt="" class="fl" />
                <span class="fl">小背包</span>
              </a>
              <a href="" class="fl">
                <img src="./img/bag.webp" alt="" class="fl" />
                <span class="fl">小背包</span>
              </a>
              <a href="" class="fl">
                <img src="./img/bag.webp" alt="" class="fl" />
                <span class="fl">小背包</span>
              </a>
              <a href="" class="fl">
                <img src="./img/bag.webp" alt="" class="fl" />
                <span class="fl">小背包</span>
              </a>
              <a href="" class="fl">
                <img src="./img/bag.webp" alt="" class="fl" />
                <span class="fl">小背包</span>
              </a>
              <a href="" class="fl">
                <img src="./img/bag.webp" alt="" class="fl" />
                <span class="fl">小背包</span>
              </a>
              <a href="" class="fl">
                <img src="./img/bag.webp" alt="" class="fl" />
                <span class="fl">小背包</span>
              </a>
              <a href="" class="fl">
                <img src="./img/bag.webp" alt="" class="fl" />
                <span class="fl">小背包</span>
              </a>
              <a href="" class="fl">
                <img src="./img/bag.webp" alt="" class="fl" />
                <span class="fl">小背包</span>
              </a>
              <a href="" class="fl">
                <img src="./img/bag.webp" alt="" class="fl" />
                <span class="fl">小背包</span>
              </a>
            </div>
          </li>
        </ul>
      </div>
      <!-- 横幅 结束 -->
  
      <!-- 横幅2 开始 -->
      <div class="banner2 container clearfix">
        <div class="banner2-service fl">
          <a href="" class="fl">
            <i class="iconfont i-shijian"></i>
            保障服务
          </a>
          <a href="" class="fl">
            <i class="iconfont i-qiye"></i>
            企业团购
          </a>
          <a href="" class="fl">
            <i class="iconfont i-Fma"></i>
            F码通道
          </a>
          <a href="" class="fl">
            <i class="iconfont i-Sim-Card"></i>
            米粉卡
          </a>
          <a href="" class="fl">
            <i class="iconfont i-yijiuhuanxin"></i>
            以旧换新
          </a>
          <a href="" class="fl">
            <i class="iconfont i-chongzhi"></i>
            话费充值
          </a>
        </div>
        <a href="" class="fl banner2-item">
          <img src="./img/banner1.jpg" alt="" />
        </a>
        <a href="" class="fl banner2-item">
          <img src="./img/banner2.jpg" alt="" />
        </a>
        <a href="" class="fl banner2-item">
          <img src="./img/banner3.jpg" alt="" />
        </a>
      </div>
      <!-- 横幅2 结束 -->
  
      <!-- 主区域 开始 -->
      <div class="main">
        <a href="" class="banner3 container">
          <img src="./img/full-banner.webp" alt="" />
        </a>
  
        <!-- 橱窗 -->
        <div class="sc container">
          <div class="sc-top clearfix">
            <h2 class="sc-title fl">手机</h2>
            <a href="" class="sc-more fr">
              查看更多
              <i class="iconfont i-right"></i>
            </a>
          </div>
          <div class="sc-container clearfix">
            <div class="sc-item-first fl">
              <a href="">
                <img src="./img/mobile-first.webp" alt="" />
              </a>
            </div>
            <div class="sc-item-list fl">
              <a href="" class="sc-item fl">
                <img src="./img/heisha.webp" alt="" />
                <p class="sc-name">黑鲨4S Pro</p>
                <p class="sc-desc">磁动力升降肩键</p>
                <p class="sc-price">4799元起</p>
              </a>
              <a href="" class="sc-item fl">
                <img src="./img/heisha.webp" alt="" />
                <p class="sc-name">黑鲨4S Pro</p>
                <p class="sc-desc">磁动力升降肩键</p>
                <p class="sc-price">4799元起</p>
              </a>
              <a href="" class="sc-item fl">
                <img src="./img/heisha.webp" alt="" />
                <p class="sc-name">黑鲨4S Pro</p>
                <p class="sc-desc">磁动力升降肩键</p>
                <p class="sc-price">4799元起</p>
              </a>
              <a href="" class="sc-item fl">
                <img src="./img/heisha.webp" alt="" />
                <p class="sc-name">黑鲨4S Pro</p>
                <p class="sc-desc">磁动力升降肩键</p>
                <p class="sc-price">4799元起</p>
              </a>
              <a href="" class="sc-item fl">
                <img src="./img/heisha.webp" alt="" />
                <p class="sc-name">黑鲨4S Pro</p>
                <p class="sc-desc">磁动力升降肩键</p>
                <p class="sc-price">4799元起</p>
              </a>
              <a href="" class="sc-item fl">
                <img src="./img/heisha.webp" alt="" />
                <p class="sc-name">黑鲨4S Pro</p>
                <p class="sc-desc">磁动力升降肩键</p>
                <p class="sc-price">4799元起</p>
              </a>
              <a href="" class="sc-item fl">
                <img src="./img/heisha.webp" alt="" />
                <p class="sc-name">黑鲨4S Pro</p>
                <p class="sc-desc">磁动力升降肩键</p>
                <p class="sc-price">4799元起</p>
              </a>
              <a href="" class="sc-item fl">
                <img src="./img/heisha.webp" alt="" />
                <p class="sc-name">黑鲨4S Pro</p>
                <p class="sc-desc">磁动力升降肩键</p>
                <p class="sc-price">4799元起</p>
              </a>
            </div>
          </div>
        </div>
      </div>
      <!-- 主区域 结束 -->
  
      <!-- 页脚区域 开始 -->
      <div class="footer">
        <div class="container">
          <div class="footer-top clearfix">
            <a class="fl" href="">
              <i class="iconfont i-weixiu1"></i>
              预约维修服务
            </a>
            <a class="fl" href="">
              <i class="iconfont i-7tianwuliyoutuihuo"></i>
              7天无理由退货
            </a>
            <a class="fl" href="">
              <i class="iconfont i-tian"></i>
              15天免费换货
            </a>
            <a class="fl" href="">
              <i class="iconfont i-liwu"></i>
              满69包邮
            </a>
            <a class="fl" href="">
              <i class="iconfont i-didian"></i>
              520余家售后网点
            </a>
          </div>
          <div class="footer-bottom clearfix">
            <div class="footer-links fl">
              <h3>帮助中心</h3>
              <a href="">账号管理</a>
              <a href="">购物指南</a>
              <a href="">订单操作</a>
            </div>
            <div class="footer-links fl">
              <h3>服务支持</h3>
              <a href="">售后政策</a>
              <a href="">自助服务</a>
              <a href="">相关下载</a>
            </div>
            <div class="footer-links fl">
              <h3>线下门店</h3>
              <a href="">小米之家</a>
              <a href="">服务网点</a>
              <a href="">授权体验店/专区</a>
            </div>
            <div class="footer-links fl">
              <h3>关于小米</h3>
              <a href="">了解小米</a>
              <a href="">加入小米</a>
              <a href="">投资者关系</a>
              <a href="">企业社会责任</a>
              <a href="">廉洁举报</a>
            </div>
            <div class="footer-links fl">
              <h3>关注我们</h3>
              <a href="">新浪微博</a>
              <a href="">官方微信</a>
              <a href="">联系我们</a>
              <a href="">公益基金会</a>
            </div>
            <div class="footer-links fl">
              <h3>特色服务</h3>
              <a href="">F 码通道</a>
              <a href="">礼物码</a>
              <a href="">防伪查询</a>
            </div>
            <!-- 联系 -->
            <div class="footer-contact fr">
              <p class="footer-phone">400-100-5678</p>
              <p class="footer-phone-desc">8:00-18:00（仅收市话费）</p>
              <a href="" class="footer-support">
                <i class="iconfont i-liaotian"></i>
                人工客服
              </a>
              <p class="footer-subcribe">
                关注小米：
                <i class="iconfont i-xinlang"></i>
                <i class="iconfont i-weixin"></i>
              </p>
            </div>
          </div>
        </div>
      </div>
      <!-- 页脚区域 结束 -->
  
      <!-- 右侧固定菜单 开始 -->
      <div class="rm">
        <a href="" class="rm-item">
          <i class="iconfont i-tel"></i>
          <span class="rm-title">手机APP</span>
          <div class="rm-mention">
            <img src="./img/qrcode.png" alt="" />
            <p>
              扫码领取新
              <br />
              人百元礼包
            </p>
          </div>
        </a>
        <a href="" class="rm-item">
          <i class="iconfont i-yonghu"></i>
          <span class="rm-title">个人中心</span>
        </a>
        <a href="" class="rm-item">
          <i class="iconfont i-weixiu1"></i>
          <span class="rm-title">售后服务</span>
        </a>
        <a href="" class="rm-item">
          <i class="iconfont i-kefu"></i>
          <span class="rm-title">人工客服</span>
        </a>
        <a href="" class="rm-item">
          <i class="iconfont i-car"></i>
          <span class="rm-title">购物车</span>
        </a>
        <a href="javascript:scrollTo(0,0)" class="rm-item rm-to-top">
          <i class="iconfont i-dingbu"></i>
          <span class="rm-title">回到顶部</span>
        </a>
      </div>
      <!-- 右侧固定菜单 结束 -->
</body>
</html>

小米官网的CSS代码——banner

.banner {
    height: 460px;
    position: relative;
  }
  
  .banner-cover img {
    width: 1226px;
    height: 460px;
  }
  .banner-pointer {
    /* 箭头的统一样式 */
    position: absolute;
    width: 40px;
    height: 70px;
    color: #b8c3cb;
    text-align: center;
    line-height: 70px;
    cursor: pointer;
    top: 50%;
    margin-top: -35px;
  }
  .banner-pointer:hover {
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
  }
  .banner-pointer .iconfont {
    font-size: 30px;
  }
  
  .banner-pointer-left {
    left: 234px;
  }
  
  .banner-pointer-right {
    right: 0;
  }
  
  .banner-dots {
    position: absolute;
    right: 30px;
    bottom: 30px;
  }
  .banner-dots span {
    width: 10px;
    height: 10px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    margin: 0 4px;
    cursor: pointer;
  }
  .banner-dots span.banner-dots-selected {
    border-color: rgba(0, 0, 0, 0.4);
    background: rgba(255, 255, 255, 0.3);
  }
  
  /* 横幅-菜单 */
  .banner-menu {
    width: 234px;
    height: 100%;
    background: rgba(105, 101, 101, 0.6);
    position: absolute;
    left: 0;
    top: 0;
    padding: 20px 0;
  }
  .banner-menu-item {
    color: #fff;
    padding: 0 20px 0 30px;
    height: 42px;
    /* outline: 1px solid; */
    line-height: 42px;
    cursor: pointer;
  }
  .banner-menu li:hover .banner-menu-item {
    background: #ff6700;
  }
  .banner-menu li:hover .banner-sub-menu {
    display: block;
  }
  
  /* 子菜单 */
  .banner-sub-menu {
    position: absolute;
    top: 0;
    left: 234px;
    width: 992px;
    height: 100%;
    background: #fff;
    /* outline: 1px solid; */
    border: 1px solid #eee;
    display: none;
  }
  .banner-sub-menu a {
    width: 25%;
    height: 16.666%;
    padding: 0 20px;
  }
  .banner-sub-menu img {
    width: 40px;
    height: 40px;
    margin-top: 17px;
    margin-right: 12px;
  }
  .banner-sub-menu span {
    width: 154px;
    margin-top: 28px;
  
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

小米官网的CSS代码——banner2

.banner2 {
    margin-top: 14px;
    margin-bottom: 26px;
  }
  .banner2-service {
    width: 234px;
    height: 170px;
    /* outline: 1px solid; */
    margin-right: 14px;
  }
  .banner2-item {
    width: 316px;
    height: 170px;
    /* outline: 1px solid; */
    margin-right: 15px;
  }
  .banner2-item img {
    width: 100%;
    height: 100%;
  }
  .banner2-item:last-child {
    margin-right: 0;
  }
  
  .banner2-service {
    background: #5f5750;
    padding: 3px;
    font-size: 12px;
    color: #ccc;
  }
  .banner2-service a:hover {
    color: #fff;
  }
  .banner2-service .iconfont {
    font-size: 26px;
    display: block;
  }
  .banner2-service a {
    width: 76px;
    height: 82px;
    text-align: center;
    padding-top: 10px;
    position: relative;
  }
  .banner2-service a::before {
    content: '';
    position: absolute;
    width: 1px;
    height: 70px;
    background: #665e57;
    left: 0;
    top: 6px;
  }
  .banner2-service a::after {
    content: '';
    position: absolute;
    width: 64px;
    height: 1px;
    background: #665e57;
    left: 6px;
    bottom: 0;
  }
  .banner2-service a:nth-child(3n + 1)::before {
    content: none;
  }
  .banner2-service a:nth-child(n + 4)::after {
    content: none;
  }

小米官网的CSS代码——common



/* 通用的css代码 */
* {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
  }
  *::before,
  *::after {
    box-sizing: border-box;
  }
  a {
    text-decoration: none;
    color: inherit;
  }
  a:hover {
    color: #ff6700;
  }
  html {
    color: #333;
    min-width: 1226px;
    font: 14px/1.5 'Helvetica Neue', Helvetica, Arial, 'Microsoft Yahei',
      'Hiragino Sans GB', 'Heiti SC', 'WenQuanYi Micro Hei', sans-serif;
  }
  
  /* 浮动处理 */
  .fl {
    float: left;
  }
  .fr {
    float: right;
  }
  .clearfix::after {
    content: '';
    display: block;
    clear: both;
  }
  
  /* 通用容器 */
  .container {
    width: 1226px;
    margin-left: auto;
    margin-right: auto;
  }

小米官网的CSS代码——fonter


/* 页脚-顶部 */

.footer-top {
    padding: 27px 0;
    border-bottom: 1px solid #e0e0e0;
    height: 75px;
    color: #616161;
  }
  .footer-top a {
    /* outline: 1px solid; */
    width: 20%;
    font-size: 16px;
    text-align: center;
    height: 20px;
    line-height: 20px;
    border-right: 1px solid #e0e0e0;
  }
  .footer-top .iconfont {
    font-size: 26px;
    vertical-align: -4px;
  }
  .footer-top a:last-child {
    border-right: none;
  }
  
  /* 页脚-底部 */
  .footer-bottom {
    padding: 40px 0;
  }
  .footer-links {
    width: 160px;
    color: #757575;
  }
  .footer-links h3 {
    font-size: 14px;
    font-weight: normal;
    color: #424242;
    margin-bottom: 17px;
  }
  .footer-links a {
    display: block;
    font-size: 12px;
    margin-top: 10px;
  }
  
  /* 页脚-联系 */
  .footer-contact {
    width: 245px;
    text-align: center;
    border-left: 1px solid #e0e0e0;
    font-size: 12px;
  }
  .footer-phone {
    font-size: 22px;
    color: #ff6700;
  }
  .footer-phone-desc {
    color: #616161;
  }
  .footer-support {
    width: 118px;
    border: 1px solid #ff6700;
    color: #ff6700;
    display: block;
    margin: 6px auto;
    height: 30px;
    line-height: 30px;
  }
  .footer-support .iconfont {
    vertical-align: -1px;
    font-size: 14px;
  }
  .footer-support:hover {
    background: #ff6700;
    color: #fff;
  }
  .footer-subcribe {
    color: #616161;
  }
  .footer-subcribe .iconfont {
    font-size: 20px;
    vertical-align: middle;
    cursor: pointer;
  }
  .footer-subcribe .iconfont:hover {
    color: #ff6700;
  }

小米官网的CSS代码——header


.header {
    height: 100px;
    /* background: lightblue; */
    position: relative;
  }
  
  .header-logo h1 {
    display: none;
  }
  .header-logo {
    background: url('../img/logo.png');
    width: 56px;
    height: 56px;
    background-size: 100% 100%;
    margin-top: 22px;
    margin-right: 172px;
  }
  
  .header-menu > a {
    height: 100px;
    line-height: 100px;
    padding: 0 10px;
    font-size: 16px;
  }
  
  .header-submenu {
    position: absolute;
    display: none;
    z-index: 30;
    background: #fff;
    /* background: red; */
    left: 0;
    width: 100%;
    top: 100px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 30px 0;
  }
  .header-cover img {
    width: 160px;
    height: 110px;
  }
  
  .header-submenu a {
    width: 204px;
    text-align: center;
    font-size: 12px;
  }
  
  .header-cover {
    /* background: red; */
    border-right: 1px solid #eee;
  }
  
  .header-submenu a:last-child .header-cover {
    border-right: none;
  }
  .header-name {
    margin-top: 10px;
    color: #333;
  }
  .header-price {
    color: #ff6700;
  }
  .header-menu:hover .header-submenu {
    display: block;
  }
  .header-search {
    margin-top: 25px;
    position: relative;
  }
  .header-search input {
    width: 245px;
    height: 50px;
    font-size: 16px;
    padding: 0 15px;
    outline: none;
    border: 1px solid #ccc;
  }
  .header-searchicon {
    width: 55px;
    height: 50px;
    background: #fff;
    border: 1px solid #ccc;
    border-left: none;
    cursor: pointer;
    color: #777;
  }
  .header-searchicon .iconfont {
    font-size: 20px;
  }
  .header-suggest {
    position: absolute;
    left: 0;
    top: 50px;
    width: 245px;
    border: 1px solid #ff6700;
    border-top: none;
    z-index: 40;
    background: #fff;
    display: none;
  }
  .header-suggest a {
    display: block;
    font-size: 12px;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
  }
  .header-suggest a:hover {
    background: #eee;
    color: inherit;
  }
  
  .header-search input:hover {
    border-color: #aaa;
  }
  .header-search input:hover ~ .header-searchicon {
    border-color: #aaa;
  }
  .header-search input:focus ~ .header-suggest {
    display: block;
  }
  .header-search input:focus {
    border-color: #ff6700;
  }
  .header-search input:focus ~ .header-searchicon {
    border-color: #ff6700;
  }
  .header-searchicon:hover {
    background: #ff6700;
    border-color: #ff6700;
    color: #fff;
  }

小米官网的CSS代码——main


.main {
    background: #f5f5f5;
    padding: 22px 0;
  }
  
  /* banner3 */
  .banner3 {
    display: block;
    background: red;
  }
  .banner3 img {
    width: 100%;
    display: block;
  }
  
  /* 橱窗 */
  .sc {
    margin-top: 10px;
  }
  .sc-top {
    height: 58px;
    line-height: 58px;
  }
  .sc-title {
    font-size: 22px;
    font-weight: normal;
  }
  .sc-more .iconfont {
    background: #aaa;
    width: 20px;
    height: 20px;
    display: inline-block;
    line-height: 20px;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    /* vertical-align: -2px; */
  }
  .sc-more:hover .iconfont {
    background: #ff6700;
  }
  
  .sc-item-first {
    width: 234px;
    height: 614px;
    margin-right: 14px;
  }
  .sc-item-first img {
    width: 100%;
    height: 100%;
  }
  .sc-item-list {
    width: 978px;
  }
  .sc-item {
    background: #fff;
    margin-right: 14px;
    margin-bottom: 14px;
    width: 234px;
    height: 300px;
    text-align: center;
  }
  .sc-item img {
    width: 160px;
    height: 160px;
    margin-top: 20px;
  }
  .sc-name {
    margin-top: 20px;
    color: #333;
  }
  .sc-desc {
    font-size: 12px;
    color: #b0b0b0;
    margin-top: 3px;
    margin-bottom: 10px;
  }
  .sc-price {
    color: #ff6700;
  }
  .sc-item:nth-child(4n) {
    margin-right: 0;
  }

小米官网的CSS代码——rm


.rm {
    width: 84px;
    position: fixed;
    right: 0;
    bottom: 70px;
    z-index: 999;
  }
  .rm-item {
    width: 100%;
    height: 92px;
    background: #fff;
    border: 1px solid #f5f5f5;
    border-top: none;
    color: #757575;
    text-align: center;
    display: block;
    padding-top: 14px;
    position: relative;
  }
  .rm-item:first-child,
  .rm-to-top {
    border-top: 1px solid #f5f5f5;
  }
  .rm-to-top {
    margin-top: 18px;
  }
  .rm-item .iconfont {
    display: block;
    font-size: 30px;
  }
  
  /* 弹出层 */
  
  .rm-mention {
    width: 128px;
    padding: 14px;
    position: absolute;
    right: 90px;
    top: 0;
    border: 1px solid #f5f5f5;
    background: #fff;
    display: none;
  }
  .rm-mention img {
    width: 100px;
    height: 100px;
    display: block;
    margin-bottom: 20px;
  }
  .rm-mention p {
    color: #757575;
  }

小米官网的CSS代码——topnav


.topnav {
    background: #333;
    height: 40px;
    color: #b0b0b0;
    font-size: 12px;
  }
  .topnav-menu {
    line-height: 40px;
  }
  .topnav-menu a {
    padding: 0 7px;
    border-right: 1px solid #424242;
  }
  .topnav-menu li:last-child a {
    border-right: none;
  }
  .topnav-menu li:first-child a {
    padding-left: 0;
  }
  .topnav-menu a:hover {
    color: #fff;
  }
  
  .topnav-car {
    background: #424242;
    width: 120px;
    height: 40px;
    margin-left: 13px;
    position: relative;
  }
  .topnav-link {
    width: 100%;
    height: 100%;
    display: block;
    text-align: center;
    line-height: 40px;
  }
  .topnav-link .iconfont {
    margin-right: 3px;
  }
  .topnav-detail {
    background: #fff;
    width: 320px;
    height: 100px;
    position: absolute;
    right: 0;
    top: 40px;
    border: 1px solid #ccc;
    border-top: none;
    text-align: center;
    line-height: 100px;
    display: none;
    z-index: 50;
  }
  .topnav-car:hover .topnav-detail {
    display: block;
  }
  .topnav-car:hover .topnav-link {
    background: #fff;
    color: #ff6700;
  }
Nempohilist.
关注
  • 16
    点赞
  • 踩
  • 61
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
零基础必看的web前端HTML+CSS-视频教程网盘链接提取码下载 .txt
05-16
本课程是由浠浠呀老师为小白入门前端倾力打造的前端基础教程，是零基础小白入门前端开发的不二之选。树立前端教程新标准，全程无废话，直截了当输出干货，让你看到即学到。课程共包括 2 季，内容涵盖HTML、CSS 和 HTML5、CSS3。本次发布第一季HTML部分。 视频大小：1.7G
HTML5+CSS3实现小米官网（完整版）
m0_63512120的博客
03-10 6334
纯html+css实现的小米官网，文章结尾附有源代码和图片素材。希望能够帮助到大家！！！
web前端(html+css+js)简单的仿原神官网静态项目
05-29
简单的前端小项目，偶然找到的大一时写的作业 使用了html+css+js 仅实现了部分功能：轮播图，播放音乐，视频，返回首页等 演示视频：https://www.bilibili.com/video/BV1C5411m7rn?spm_id_from=333.999.0.0 阅读建议： HTML为主要结构,所有内容都是定义在html上的,css则负责对网页的修饰和布局,而JavaScript则是是网页拥有一个动态的效果, 何为动态效果?在我们初学html是,所学的form表单中的submit提交组件则是一种类似的动态效果,而我们的js,则是使静态的网页动起来. 如,当我们点击摸个按钮,想要弹出窗口,或者修改背景图片,或是其他行为,都可以有自己定义这个行为,这就是网页的动态化。
淘宝首页web前端课设（HTML+css+js）
06-10
本web前端课设主要用到html，css知识点和一些少量的js语言编写的轮播图。适合于大一、大二正在做课设的同学进行参考。(我的博客里有做成的效果图和每个模块的解说内容，没有了解的同学可以先去看看做成功的页面效果图。)没有任何插件，资源里有图片素材和全部代码文件，解压后即可运行页面。用到的知识点主要有html课程种常见的标签，span、ul li、a、img、span、div等标签。css样式修饰用到最多的是绝对定位和相对定位，边框修饰，文字修饰，颜色美化等。js用了100多行代码做了一个轮播图效果。 简单总结： 1.没有看过做成效果图的先看我的博客。 2.web大多常用的知识点都以用上 3.该资源解压即可运行 4.js属于扩展内容 5.代码量html文件24k+css文件19k共43k大小
html+css制作小米官网
07-18
学习前端的时候制作的网页，有需要的可以下载看看，前期学习html和css只要做出来这个我局的基本可以了，剩下的就是查缺补漏，把一些技巧再掌握的熟练一下就好了。
HTML+CSS实现小米官网首页
热门推荐
道阻且长，行则将至。
12-28 3万+
一、HTML+CSS实现小米官网首页 仿写小米官网的页面，熬了两个晚上终于把这个页面做好了，原创不易，欢迎大家点赞和评论，需要源代码的评论区留言或者加我QQ（2997381395），大家记得关注我哦！我会不定期的跟大家分享文章。 二、页面结构如下： 三、效果图如下： 四、部分源代码如下（如需要全部的源代码请加我QQ或者评论区留言，原创不易，记得点赞和收藏哦）。 HTML部分源代码如下： <!DOCTYPE html> <html lang="en"> <head>
耗时两天，Html实现小米官网
The_RedMaple的博客
07-21 1万+
实现展示： 代码总共 808行 ，其中实现了小米官网外观布局的大部分。 网址和图标 类似的菜单也可以实现下拉 透明度为0.3 每一个地方都是超链接，可以进行点击 搜索栏获得焦点后会变颜色 光标停留也有响应特效 相关的图片和代码 实现代码： html 代码 <html> <head> <meta charset="utf-8"> <title>小米商城</title> <
用html和css仿作小米官网（静态）
m0_70220004的博客
07-09 2993
使用html和css3 制作静态页面
html+CSS+JS实现小米官网(附全部代码)
m0_50319610的博客
12-08 2万+
html+CSS+JS实现小米官网(附全部代码)
CSS+HTML静态网页——小米官网（附源代码）
Jsheep91的博客
03-22 8800
链接：https://pan.baidu.com/s/1Bhq1GEZBCH3USx_Tj31jiA?
web前端+css+html基础阶段小兔鲜项目+psd文件设计稿及项目源码
12-01
小兔鲜儿项目源码 + psd设计稿 + 基础阶段的前端项目
web前端 html+css+js+jquery 网易云音乐官网模仿
06-27
前端培训时自己参照网易云音乐官网仿制的网站
基于web的仿小米在线商城 java+jsp+servlet+MySQL+jdbc+css+js+jQuery 购物网站 （课设 毕设)
07-12 649
本文旨在介绍一个在线商城购物网站的设计与实现。该网站提供了便捷的电子商务功能，包括用户注册、商品展示、购物车管理、订单查询、用户交流和反馈等。同时，后台管理功能包括管理员登录、用户管理、商品管理、订单管理、留言管理、库存管理和销量统计等。在前台功能方面，用户可以通过注册并登录来进入网站。登录后，用户可以管理个人信息，包括用户名、密码、联系方式和地址等。商品展示页面详细展示了销售商品的信息和当前库存数量。用户可以将商品添加到购物车，并在购物车中查看产品、移除不满意的产品、清空购物车以及修改产品数量。
HTML5+CSS3实现小米商城
qq_62185873的博客
05-28 5766
小米商城是自学后第一个较为完整的网页，花费了一整天的时间完成，难度不是很高，只要肯花费一定的时间就能完成，相信大家都能有所收获！
【HTML+CSS】小米官网首页
qq_41195893的博客
01-10 1279
【HTML+CSS】小米官网首页
小米商城html+css
m0_74031471的博客
06-04 2435
完整的代码包括图片和图标在github。
小米商城官网（登录页，首页，详情页，我的购物车页，我的订单页，确认订单页）HTML+CSS+JS
qq_58401483的博客
12-28 1万+
基于HTML+CSS+JS实现小米商城项目，用户通过输入账号密码进行登录，此次项目测试账号：admin 测试密码：123123。首页主要是轮播图的设计与实现（可手动轮播，也可以自动轮播），商品列表以及商品展示，浮动与按压效果是实现，此外还设计了视频专栏，小米秒杀专栏，下载app弹出窗和购物车弹出窗设计。点击导航栏购物车，或者点击工具条上的购物车可跳转到我的购物车页面，点击登录跳转到登录页，还有回到顶部效果的实现。
WEB前端的第一个项目——小米官网（含源码）
simplyxx的博客
11-24 1万+
使用html、css与简单的javascript实现小米官网的部分页面和功能，包含首页的一小部分，以及登录和注册三个页面。
【Web】CTFSHOW 中期测评刷题记录(1)
最新发布
uuzeray的博客
05-02 1702
访问./cache/6a992d5529f459a44fee58c733255e86.php，命令执行拿flag。login.php是在./templates下的，而./flag.php与./templates均为web目录。注意到用./template/error.php中存在{{username}}，可以用其cache来写马。这时候重开下靶机再去读./templates/index.php，发现是给了提示的。访问./config/settings.php，命令执行拿到flag。
模拟小米商城页面前端设计原生html+css+jq
12-24
小米商城页面是一个非常独特和具有个性的网页设计，它包含了大量的图片和动画效果，整体风格非常现代和时尚。为了模拟小米商城页面的前端设计，我们需要运用原生的HTML、CSS和JQuery技术去实现。 首先，我们需要使用HTML语言来构建页面的基本结构，包括头部导航栏、图片轮播、商品展示区、底部信息等。然后，我们使用CSS来为页面添加样式，包括颜色、字体、布局、动画等，以使页面呈现出小米商城的特色风格。同时，我们还可以利用JQuery来实现一些特殊的交互效果，比如点击商品显示更多信息、滚动页面时导航栏固定在顶部等。 在模拟小米商城页面的前端设计过程中，我们需要注意页面的响应式布局，以适应不同设备的屏幕大小，确保页面在手机、平板和电脑等设备上都能够良好地显示和交互。同时，我们还需要关注页面的性能优化，确保页面加载速度快，用户体验良好。 综上所述，模拟小米商城页面的前端设计需要运用原生HTML、CSS和JQuery技术，同时考虑页面的响应式布局和性能优化，以实现一个具有小米商城特色的现代化和时尚的网页设计。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值