导航条教程集锦

• 浏览器视口（viewport）是浏览器的工作区，即浏览器窗口中用于显示网页内容的区域。vw和vh是两个相对视口的单位，vw（viewport width）代表相对视口宽度的百分数，例如1vw=1%×视口宽度。vh（viewport height）代表视口高度，1vh=1%×视口高度。
• 导航条的内容包括一个图标和一个列表，都置于header元素中，而header作为一个整体采用固定定位来决定其位置。固定定位是相对浏览器视口做定位。
• 通过将列表项的display属性设置为inline使列表项水平排列。列表项默认的display属性取值为list-item，因此每个列表项之前会自动添加一个项目符号。然而，将display属性的取值改为inline之后，项目符号也随之消失。

CSS - Navigation bar

• 实现导航条的常规做法，利用无序列表。
• 用list-style-type:none去掉列表开头的项目符号。
• 利用超链接的:link、:visited、:active、:hover伪类设置超链接在各种状态下的样式。
• 对于垂直导航条，超链接使用display:block。对于水平导航条，可以对超链接使用display:inline，也可以设置宽度后使用float:left。