web前端开发html5+css3（入门学习笔记）（day16）以小米官网首页为例进行：项目搭建。_～!??。小米官网 - xiaomi 13系列,xiaomi mix fold 2,miui14,小-CSDN博客

本文链接：https://blog.csdn.net/weixin_44647089/article/details/128376929

以小米官网首页为例学习：项目搭建。导航条结构的搭建、导航条基本样式、二维码下拉、添加过渡效果、头部logo、头部导航下拉层、右侧的搜索框、左侧的导航条、完成banner、右侧工具条、中间广告栏，项目补充（tittle前的小图标）

项目的内容：

1、index.html

2、css文件（base.css index.css reset.css)

3、图标字体库（fa（css webfonts））

1、index.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>小米官网 - Xiaomi 13系列,Xiaomi Mix Fold 2,MIUI14,小米徕卡影像大赛</title>
    <!-- 引入重置样式表 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入公共样式表 -->
    <link rel="stylesheet" href="./css/base.css">
    <!-- 引入图标字体库 -->
    <link rel="stylesheet" href="./fa/css/all.css">
    <!-- 引入当前页面样式表 -->
    <link rel="stylesheet" href="./css/index.css">
    <!-- 
        设置网站的图标（在标题栏和收藏栏）
            网站图片一般都储存在网站的根目录下，名字一般都叫favicon.ico
     -->
     <link rel="icon" href="./img/favicon.ico">
</head>
<body style="height: 1000px;">
    <!-- 顶部导航条 -->
    <!-- 顶部导航条外部容器 -->
    <div class="topbar-wrapper">
        <!-- 创建内部容器 -->
        <div class="topbar w clearfix">
            <!-- 左侧导航条 -->
            <ul class="service">
                <li><a href="JavaScript:;">小米商城</a></li>
                <li class="line">|</li>
                <li><a href="JavaScript:;">MIUI</a></li>
                <li class="line">|</li>
                <li><a href="JavaScript:;">LoT</a></li>
                <li class="line">|</li>
                <li><a href="JavaScript:;">云服务</a></li>
                <li class="line">|</li>
                <li><a href="JavaScript:;">金融</a></li>
                <li class="line">|</li>
                <li><a href="JavaScript:;">有品</a></li>
                <li class="line">|</li>
                <li><a href="JavaScript:;">小爱开放平台</a></li>
                <li class="line">|</li>
                <li><a href="JavaScript:;">企业团购</a></li>
                <li class="line">|</li>
                <li><a href="JavaScript:;">资质证照</a></li>
                <li class="line">|</li>
                <li><a href="JavaScript:;">协议规则</a></li>
                <li class="line">|</li>
                <li>
                    <a class="app" href="JavaScript:;">
                        下载app
                        <!-- 添加一个弹出层 -->
                        <div class="qrcode">
                            <img src="./img/二维码.PNG">
                            <span>小米商城app</span>
                        </div>

                    </a>
                </li>
                <li class="line">|</li>
                <li><a href="JavaScript:;">SelectLocation</a></li>

            </ul>
            <!-- 购物车 -->
            <ul class="shop-car">
                <li><a href="JavaScript:;">
                        <i class="fas fa-shopping-cart"></i>
                        购物车(999)
                        <div class="car-list">
                            <span>购物车已满,赶快去付款吧！</span>
                        </div>
                    </a></li>
            </ul>
            <!-- 用户登录注册 -->
            <ul class="user-info">
                <li><a href="JavaScript:;">登录</a></li>
                <li class="line">|</li>
                <li><a href="JavaScript:;">注册</a></li>
                <li class="line">|</li>
                <li><a href="JavaScript:;">消息通知</a></li>
            </ul>

        </div>
    </div>
    <!-- 头部外部容器 -->
    <div class="header-wrapper">
        <div class="header w">
            <h1 class="logo" title="小米">
                小米官网
                <a class="home" href="#"></a>
                <a class="mi" href="#">