css简单垂直导航栏_CSS界面元素：简单导航栏

最新推荐文章于 2023-07-17 17:58:19 发布

cungui5726

最新推荐文章于 2023-07-17 17:58:19 发布

阅读量390

点赞数

文章标签：列表 css html python java

原文链接：https://thenewcode.com/52/CSS-Interface-Elements-Simple-Navigation-Bar

版权

css简单垂直导航栏

At its simplest, a website navigation bar is nothing more than a list of pages. It makes sense that the markup should reflect that:

简单来说，网站导航栏仅是页面列表。标记应该反映出以下含义是有道理的：

<nav>
	<a href="index.html">Home</a>
	<a href="about.html">About Us</a>
	<a href="contact.html">Contact Us</a>
	<a href="products.html">Our Products</a>
	<a href="order.html">Place An Order</a>
	<a href="privacy.html">Your Privacy</a>
</nav>

To comprehend what we are about to do, it is vital to understand the structure of our document. The <nav> tag is a block-display element that is a container for a series of links. If the <nav> tag could be thought of as a parent, the <a> elements could be considered its children.

要理解我们将要做的事情，理解我们文档的结构至关重要。 <nav>标签是一个块显示元素，它是一系列链接的容器。如果可以将<nav>标记视为父标记，则可以将<a>元素视为其子代。

Each <a> element is displayed inline by default, together with its text content.

默认情况下，每个<a>元素及其文本内容均内联显示。

In its current state, the navigation bar will appear somewhat cramped. As a first step, let’s change that.

在当前状态下，导航栏会显得局促。第一步，让我们对其进行更改。

We could write a style for <a> elements, but that would be far too broad a rule, affecting links everywhere on our page. Neither is it effective to write an inline style for each link. Instead, we’ll use the fact that the parent <nav> will usually be unique on the page and use a descendant selector to make our style specific:

我们可以为<a>元素编写样式，但是这太笼统了，影响了页面上所有链接。为每个链接编写内联样式都无效。相反，我们将使用以下事实：父<nav>通常在页面上是唯一的，并使用后代选择器使我们的样式特定：

nav a {
	padding: .5rem;
}

That rule provides each <a> element with some space around it. Note, however, that the space is applied to the left and right or each link, but not above or below it, due to the fact that they are inline elements. Let’s change that now:

该规则为每个<a>元素提供了一些空格。但是请注意，由于它们是内联元素，因此该空间应用于左侧或右侧或每个链接，但不在其上方或下方。让我们现在更改一下：

nav a {
	display: inline-block;
	padding: .5rem;
}

This spaces the links out nicely.

这样可以很好地分隔链接。

If we wanted to have a vertical line divide the links from each other, we don’t add characters or markup: one rule of good web development is to avoid adding extra content or elements, especially when they are only for presentational purposes. Instead, we will use CSS on each <a> element, adding to the style declaration we already have in place:

如果我们想用一条垂直线将链接彼此分隔开，就不要添加字符或标记：良好的Web开发的一个规则是避免添加额外的内容或元素，尤其是当它们仅用于演示目的时。取而代之的是，我们将在每个<a>元素上使用CSS，并将其添加到我们已经拥有的样式声明中：

nav a {
	display: inline-block;
	padding: .5rem;
	border-right: 1px solid #000;
}

The links in our nav bar still look a little plain. We can change their appearance, with the understanding that the more we alter the presentation of links the less likely they are to be recognized as such:

导航栏中的链接看起来仍然有些普通。我们可以更改它们的外观，但要理解的是，我们对链接的显示方式进行的更改越多，被识别的可能性就越小：

nav a {
	display: inline-block;
	padding: .5rem;
	color: #000;
	text-decoration: none;
	font-family: Avenir, Arial, sans-serif;
}

It is also common to add a hover effect to links in a navigation bar. We will do this by writing a style declaration for a pseudo selector to the links, effectively reversing the colours:

向导航栏中的链接添加悬停效果也很常见。为此，我们将为链接的伪选择器编写样式声明，从而有效地反转颜色：

nav a:hover {
	color: #fff;
	background: #000;
}

When we specify :hover for an element we should also specify :focus, as it's possible that users with accessibility needs won't be using a mouse to navigate your document, but a keyboard, which does not have a hover function. So the declaration has a group combinator added to it:

当我们为元素指定:hover ，我们还应该指定:focus ，因为有可访问性需求的用户可能不会使用鼠标来导航文档，而不会使用鼠标来导航。因此，声明中添加了一个组组合器：

nav a:hover, nav a:focus {
	color: #fff;
	background: #000;
}

At this point, you may notice a very slight movement of the elements below the navigation bar when links are hovered, due to an odd little browser quirk. To get rid of it, add a transparent border to each link:

此时，由于浏览器有点奇怪，因此当链接悬停时，导航栏下方的元素可能会非常轻微地移动。要摆脱它，请为每个链接添加一个透明边框：

nav a { border-bottom:solid 1px transparent; }

You may also discover that the highlight background colour that appears when you hover over each link falls just short of the divider line to its right. The cause of this is obscure: it’s not the CSS per se. Rather, it is to do with our HTML.

您还可能会发现，将鼠标悬停在每个链接上时出现的突出显示背景颜色恰好不在其右边的分隔线之内。原因是晦涩的：它本身不是CSS。而是与我们HTML有关。

In my first discussion of HTML I said that spaces and returns don’t matter: that the language ignores anything more than a single space and that returns without markup don’t make any difference. That remains true… except in this case.

在我对HTML的第一次讨论中，我说过空格和返回值无关紧要：该语言只忽略单个空格而忽略任何内容，并且不带标记的返回值没有任何区别。除了在这种情况下，这仍然是正确的。

Because of the carriage returns after each of our <a> elements, the browser inserts a space at the end of each when they are set to inline-block. It is these spaces that you are seeing outside the highlight area. To get rid of them, we can simply eliminate the returns between our links:

由于在每个<a>元素之后都返回了回车符，因此当将它们设置为inline-block时，浏览器会在每个元素的末尾插入一个空格。您在高亮区域之外看到的正是这些空间。要摆脱它们，我们可以简单地消除链接之间的收益：

<nav><a href="index.html">Home</a><a href="about.html">About Us</a><a href="contact.html">Contact Us</a><a href="products.html">Our Products</a><a href="order.html">Place An Order</a><a href="privacy.html">Your Privacy</a></nav>

Now we can add a border between the links without worrying about the extra gap. We do so with CSS, rather than adding extra elements. To keep things visually consistent, we don't want a line after the last link, so we'll use a :not pseudo-selector:

现在，我们可以在链接之间添加边框，而不必担心额外的间隙。我们使用CSS，而不是添加额外的元素。为了保持视觉上的一致性，我们在最后一个链接之后不需要一行，因此我们将使用:not伪选择器：

nav a:not(:last-child) {
	border-right: 1px solid black;
}

The last <a> element is the last child of its parent – we have simply crafted an exception to the general rule of links having a border to their right.

最后一个<a>元素是其父元素的最后一个子元素–我们只是简单地设计了一条例外，即一般的链接规则在其右边带有边框。

Finally, if you wanted the navigational bar to be centred as a whole on the page, remember that the <nav> element is a box of its own:

最后，如果您希望导航栏在页面上整体居中，请记住<nav>元素是其自身的框：