我们先来看一下，首先这个整体我们可以算作一个大盒子，盒子的背景颜色为白色。
然后看一下整体的话是占到全体导航条的80%旁边，上图赤色框圈出的范围。
这个盒子又分为两个部分，左侧的logo部分，右侧的导航部分。
全体布局用到的是flex布局：
大家可以去看一下阮一峰老师的教程：
阮一峰flex布局
左侧logo部分我们用到的标签有：
1、h3标签：
<h3><ahref="index.html">多多鱼网页</a></h3>
h3是一对有开始有闭合的标签组合。以<h3>开始，以</h3>结束。
html h3标签紧张用于布局标题、栏目类内容，h3与h1最大标题标签比较，h1标签一样平常一个网页中利用一次，而h3标签可以在一个网页中多次利用。默认CSS h3又比h2笔墨大小小一点。
html h3标签常见运用场所：
栏目标题可以利用h3标签文章标题可以利用h3标签文章标题列表可以利用h3标签（一样平常图文列表中，图片利用img引入，文章标题笔墨利用h3标签）
2、a标签：
<ahref="index.html">多多鱼网页</a>
<a> 标签定义超链接，用于从一张页面链接到另一张页面。
<a> 元素最主要的属性是 href 属性，它指示链接的目标。
在所有浏览器中，链接的默认外不雅观是：
未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是赤色的
右侧的导航部分我们用到的标签有：
一、无序列表简介
无序列表，很好理解，有序列表的列表项是有一定顺序的，而无序列表的列表项是没有顺序的。默认情形下，无序列表的项目符号是●，不过可以通过无序列表type属性来改变无序列表的列表项符号。
语法：
<ul><li>无序列表项</li><li>无序列表项</li><li>无序列表项</li></ul>
解释：
<ul>，即“unordered list（无序列表）”。<li>，即“list（列表项）”。理解标签语义更有利于你影象，而影象HTML标签的语义是HTML的根本。
在该语法中，利用<ul></ul>标签表示一个无序列表的开始和结束，<li>表示这是一个列表项。在一个无序列表中可以包含多个列表项。
把稳，<ul>标签和<li>标签也是合营利用，没有单独利用，而且<ul>标签内部不能存在任何其他标签，一样平常情形下只能存在<li>标签（对付初学者，我们忽略嵌套列表）。这个观点要非常清楚，在网站开拓后期很随意马虎犯错。（这个情形跟有序列表一样）。
右侧导航代码：
<ul><liclass="active"><ahref="index.html">首页</a></li><li><ahref="">网页模板</a></li><li><ahref="">学习资料</a></li><li><ahref="">常见问题</a></li><li><ahref="">网页作业</a></li><li><ahref="">联系我们</a></li></ul>
视屏教程：
视频加载中...
