css导航栏_CSS：创建导航栏

css导航栏

Every website needs a navgation bar to help visitors navigate around the website. This is generally accomplished by putting a top horizontal navigation bar or a side vertical navigation bar.

每个网站都需要一个导航栏，以帮助访问者浏览网站。 通常，这可以通过放置顶部水平导航栏或侧面垂直导航栏来实现。

Navigation bars are created using HTML Lists combined with CSS to make it look more like a Menu with multiple options.

导航栏是使用HTML列表和CSS来创建的，使其看起来更像具有多个选项的菜单。

Example:

例：

垂直导航栏 (Vertical Navigation Bar)

A simple list is a vertical navigation bar, if we make every list item a hyperlink.

如果我们将每个列表项都设置为超链接，则简单列表就是垂直导航栏。

<ul id="navbar">
    <li><a href="/tests">Tests</a></li>
    <li><a href="/studyroom">Q & A Forum</a></li>
    <li><a href="/flashcards">Interview QnA</a></li>
    <li><a href="/library">Tutorials</a></li>
    <li><a href="/testimonials">Testimonials</a></li>
</ul>

The above list can be styled by adding a few simple CSS properties:

可以通过添加一些简单CSS属性来设置上面的列表的样式：

CSS:

CSS：

#navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #EEEEEE;
}

ul#navbar li a {
    display: block;
    color: #000000;
    font-weight:bold;
    padding: 8px 16px;
    text-decoration: none;
}

ul#navbar li a:hover {
    background-color: orange;
    color: white;
}

It's always preferable to use some id or class for providing such styling. Because if we directly style the ul and li elements, like below example,

总是最好使用一些id或class来提供这种样式。 因为如果我们直接设置ul和li元素的样式，例如下面的示例，

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #EEEEEE;
}

li a {
    display: block;
    color: #000000;
    font-weight:bold;
    padding: 8px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: orange;
    color: white;
}

then all the lists on our website will look like a navigation bar, while we want only one navigation bar on our website, hence we have used the identifier navbar in our list, which means that only the list element with navbar identifier should be styled this way.

那么我们网站上的所有列表将看起来像一个导航栏，而我们只希望网站上有一个导航栏，因此我们在列表中使用了标识符navbar ，这意味着只有具有navbar标识符的list元素应设置为此样式方式。

ul#navbar means, a ul list element with id = "navbar"

ul#navbar表示id = "navbar"的ul列表元素

Live Example →

现场示例→

水平导航栏 (Horizontal Navigation Bar)

When we create a Horizontal navigation bar, the main question is to how to convert a basic List which is vertical to a horizontal list. Well this can be done in two different ways:

当我们创建水平导航栏时，主要问题是如何将垂直列表转换为水平列表。 好吧，这可以通过两种不同的方式来完成：

使用display:inline (Using display:inline)

We can use the CSS property display:inline; to remove the line break before and after every list item, because by default list items have property display:block; added to them.

我们可以使用CSS属性display:inline; 删除每个列表项之前和之后的换行符，因为默认情况下，列表项具有display:block;属性display:block; 添加到他们。

ul#navbar li{
    display: inline;
}

Live Example →

现场示例→

使用float:left (Using float:left)

Another way of creating a Horizontal Navigation bar is by adding float:left; CSS property to all the list items. Hence they will arrange themselves in a line.

创建水平导航栏的另一种方法是添加float:left; 所有列表项CSS属性。 因此，他们将自己排成一行。

Here is the CSS code:

这是CSS代码：

#navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #EEEEEE;
}

ul#navbar li {
    float:left;
}

ul#navbar li a {
    display: block;
    color: #000000;
    font-weight:bold;
    padding: 8px 16px;
    text-decoration: none;
}

Below we have explained, why we have used what we have used in the above CSS code, starting from the list items:

下面我们从列表项开始说明为什么要使用上面CSS代码中使用的内容：

• float:left; → To make all the list items float towards the left, making them appear in a line.

  float:left; →要使所有列表项向左浮动，使其显示在一行中。

• overflow: hidden; → Now as all the list items have the property float:left added to them, hence the list items will not be inside the ul list anymore, resulting into the ul list to occupy minimum height, which in this case is zero. We have applied a background color to demonstrate this. Hence, the overflow hack is used here. We have ot used overflow:auto; because it sometimes add a scroll bar, which we do not want.

  overflow: hidden; →现在，由于所有列表项都添加了float:left属性，因此列表项将不再位于ul列表内，导致ul列表占据最小高度，在这种情况下为零。 我们应用了背景色来演示这一点。 因此，这里使用了overflow hack。 我们已经使用了overflow:auto; 因为它有时会添加我们不想要的滚动条。

• display: block; → Using this CSS property we make the whole link area clickable and not just the link text.

  display: block; →使用此CSS属性，使整个链接区域都是可单击的，而不仅仅是链接文本。

• padding:8px 16px; → We have added a padding of 8px 16px which means, an empty space of 8px will be added at the top and bottom of the link and an empty space is 16px will be added to the left and right side. We add padding to make our navigation menu look for spacious and clean.

  padding:8px 16px; →我们添加了8px 16px的填充 ，这意味着，链接顶部和底部将添加8px的空白，左侧和右侧将添加16px的空白。 我们添加了填充以使导航菜单看起来既宽敞又干净。

Live Example →

现场示例→

翻译自: https://www.studytonight.com/cascading-style-sheet/css-navigation-bar-style

css导航栏