菜单 搜索
首页 前端知识 【Web前端HTML CSS基础——小米官网项目实战】

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

2024-02-01 12:02:53 前端知识 前端哥 327 836 我要收藏

文章目录

  • 小米官网
    • 小米官网的效果图
    • 小米官网的HTML代码
    • 小米官网的CSS代码——banner
    • 小米官网的CSS代码——banner2
    • 小米官网的CSS代码——common
    • 小米官网的CSS代码——fonter
    • 小米官网的CSS代码——header
    • 小米官网的CSS代码——main
    • 小米官网的CSS代码——rm
    • 小米官网的CSS代码——topnav

小米官网

小米官网是学习前端实战项目锻炼最多的一个项目，基本上就是学习完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;
  }
转载请注明出处或者链接地址：https://www.qianduange.cn//article/986.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

第十四届蓝桥杯（Web应用开发）模拟赛1期-大学组

2024-02-13 10:02:25

web前端期末大作业——基于html css javascript jquery bootstarp响应式的出国旅游定制公司官网 (17页)

2024-02-13 10:02:24

Web前端开发技术课程大作业——龙猫宫崎骏5页 带js 带jquery 带轮播 带js表单校验 带留言表单 HTML CSS JS网页设计期末课程大作业 web前端开发技术 web课程设计

2024-02-13 10:02:17

js 模拟回车 模拟键盘，给input框输入值 触发回车事件

2024-02-13 10:02:17

深入了解jQuery的children方法

2024-02-13 10:02:16

关于ajax明明没错但是失效问题的可能原因及解决办法

2024-02-13 10:02:16

安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作

2024-02-13 10:02:15

jQuery实现表单的增删改查（完整版）

2024-02-13 10:02:10

HTML5实训大作业：html css javascript jquery bootstarp响应式成都家乡介绍网页

2024-02-13 10:02:04

jQuery 效果 - 动画 —— W3school 详解 简单易懂（七）

2024-02-13 10:02:04

大家推荐的文章
1

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
2

移动端css布局大全

2024-02-06 15:02:421000
3

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
4

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
5

HTML5期末大作业：我的家乡网站设计5

2024-01-28 12:01:43999
6

web期末作业网页设计——我的家乡（网页源码）

2024-01-24 15:01:48999
7

尚硅谷css3笔记

2024-02-13 10:02:44998
8

如何利用浏览器测试跨域

2024-02-11 10:02:28998
9

html生日祝福网页制作（粉色主题

2024-01-30 20:01:45997
10

响应式Web开发项目教程（HTML5 CSS3 Bootstrap）第2版 例3-3 CSS3 旋转缩放

2024-02-10 19:02:06995

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！