如何构建顶部导航条

导航栏 (Navigation Bars)

Navigation bars are a very important element to any website. They provide the main method of navigation by providing a main list of links to a user. There are many methods to creating a navigation bar. The easiest way to create a navigation bar is to use an unordered list and style it with CSS.

导航栏对于任何网站都是非常重要的元素。 它们通过提供指向用户的链接的主要列表，提供了主要的导航方法。 创建导航栏的方法有很多。 创建导航栏的最简单方法是使用无序列表，并使用CSS设置其样式。

Navigation Bars are mostly made up of <ul> lists that are horizontally arranged and styled.

导航栏主要由水平排列和样式化的<ul>列表组成。

While styling the navigation bars, it’s common to remove the extra spacing created by the <ul> and <li> tags as well as the bullet points that are automatically inserted:

设置导航栏的样式时，通常会删除<ul>和<li>标记以及自动插入的项目符号点所创建的多余间距：

list-style-type: none;   margin: 0px;   padding: 0px;

Example:

例：

There are two parts to any navigation: the HTML and the CSS. This is just a quick example.

任何导航都有两部分：HTML和CSS。 这只是一个简单的例子。

/* Define the main Navigation block */.myNav {    display: block;    height: 50px;    line-height: 50px;    background-color: #333;}/* Remove bullets, margin and padding */.myNav ul {    list-style: none;    padding: 0;    margin: 0;}.myNav li {    float: left;    /* Or you can use display: inline; */}/* Define the block styling for the links */.myNav li a {    display: inline-block;    text-align: center;    padding: 14px 16px;}/* This is optional, however if you want to display the active link differently apply a background to it */.myNav li a.active {    background-color: #3786E1;}

翻译自:

如何构建顶部导航条