是我参与「第五届青训营」伴学笔记创作活动的第 1 天。 HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。HTML 由一系列的元素组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。一对标签可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等

今天学习的导航条的结构，将导航条分为外部容器，里面有内部容器，分为左边和右边，都分别有一个列表。对于图标的展现，是通过一个css集成文件的导入，再通过查询zeal，获取这个图标样式的属性名称，通过i class="fas fa-box"></i>，fas加上在zeal中查到的属性名称就可以了。

css文件的导入

第一个是reset文件，是为了清除浏览器的默认样式。例如看到内容顶格，说明浏览器的默认样式已经被清除 margin:0 auto 第二个是css，all文件，是为了引入图标。

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <link rel="stylesheet" href="../fa/css/reset.css">
    <link rel="stylesheet" href="../fa/css/all.css">
    <link rel="stylesheet" href="nav.css">

<div class="outside_wrapper">
        <div class="inside_wrapper">
            <div class="left_nav">
                <ul class="left_ul">
                    <li><span><img src="https://juejin.cn/favicon.ico" alt=""></span></li>
                    <li><a href="#">课程</a></li>
                    <li><a href="#">App</a></li>
                    <li><a href="#">码上掘金</a></li>
                    <li><a href="#">会员</a></li>
                    <li><span><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0cb52d4a506e44aba88bc0f2e8a8b2b7~tplv-k3u1fbpfcp-zoom-1.image" alt="打榜活动"></span></li>
                </ul>
            </div>
            <div class="right_nav">
                <ul class="right_ul">
                    <li><a href="#">前端</a></li>
                    <li><a href="#"><i class="fas fa-moon"></i></a></li>
                    <li><a href="#"><i class="fas fa-box"></i></a></li>
                    <li><a href="#"><i class="fas fa-cog"></i></a></li>
                    <li><a href="#"><i class="fas fa-calculator"></i></a></li>
                </ul>
            </div>
        </div>
    </div>

关于项目

需要学好react，才能进行下一步的操作。在next.js中，在终端中，选择我们创建项目的，目录，通过npx create-react-app react-basic，命令可以创建一个项目，npm run dev,就可以启动服务，在浏览器中看到页面。

导航条制作|青训营笔记

css文件的导入

关于项目