携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情 

头部 工具栏/导航条

(top/header/head-bar/header-nav/top-wrap/wrapper)

效果展示:

图一:原神头部导航栏

图二:王者荣耀头部导航栏

图三:网易云音乐头部导航条

图四:百度头部工具条

图五:小米顶部导航条

代码实现:

注意:

1.line-height属性直接给到header-nav,会被继承。

2.logo处作了SEO优化,使用h1标签包裹a标签,a标签内写上"网易云音乐"(不显示字的办法:text-indent: -9999px);

3.搜索框用的是input标签,使用占位符html元素属性palceholder,输入字后,占位提示字会消失。 input标签格式化：outline: none; border: none;

4.给header-nav一个min-width属性,防止视口缩小后受影响,因为它是没有设置宽度的块级元素，默认宽度为其父级元素body的宽度。

注意:

1.相较于网易云头部导航栏,王者荣耀头部导航条不需要统一设置行高!(因为它的每个导航栏有两行文字)。

2.同样需要给header-nav一个min-width属性,防止视口缩小后受影响,因为它是没有设置宽度的块级元素，默认宽度为其父级元素body的宽度。

3.可以看得到，在官网中，同样对logo出做了优化。

使用了text-indent: -999px;去除文字显示。