垂直导航和列表样式

A vertically-oriented website navigation bar is in some ways easier to create, as the list is already vertical – the major issue is setting its layout. The navigation bar starts with much the

same code as before:

相似的代码开头：

<nav>
	<a href="#">Home</a>
	<a href="#">About Us</a>
	<a href="#">Order</a>
	<a href="#">Privacy Statement</a>
	<a href="#">Contact</a>
</nav>

Most habituated users expect the primary navigation for a website to be on the left or top of the page; we’ll set ours to the left with float. At the same time, we’ll alter the display of the navigation element and its content:

大多数习惯的用户都希望网站的主要导航位于页面的左侧或顶部。 我们将float设置为左侧。 同时，我们将更改导航元素及其内容的显示：

nav {
	float: left;
	font-family: Bell Gothic Std, sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.5em;
	font-size: x-small;
}

float immediately collapses the width of the element to that of its widest piece of content (“Privacy Statement”, in this case). In the version shown above, I have added a border on all sides of the navigation with the exception of the left to visually separate it from the content. The background-image I added was more than large enough for me to add some padding-top and bottom to place the navigational items in the middle of the element.

float立即将元素的宽度折叠到其最宽的内容宽度(在这种情况下为“隐私声明”)。 在上面显示的版本中，我在导航的所有边上都添加了border ， left的border使内容与内容在视觉上分开。 我添加的background-image足够大，足以添加一些padding-top和bottom padding-top ，以将导航项放置在元素的中间。

The links in the list still look somewhat plain. We also need to separate them from the background. Let’s do that through a descendant selector:

列表中的链接仍然看起来有些普通。 我们还需要将它们与背景分开。 让我们通过后代选择器执行此操作：

nav a {
	text-decoration: none;
	color: #fff;
	background-color: rgba(0, 0, 0, 0.7); 
}

You’ll note that each link is only as large as its content, and that all links are displayed on the same line. That’s because the a tag is displayed inline.

您会注意到，每个链接仅取决于其内容，并且所有链接都显示在同一行上。 这是因为a标签是inline显示的。

nav a {
	text-decoration: none;
	color: #fff;
	background-color: rgba(0, 0, 0, 0.7);
	display: block;
}

They’re also a little close together. We’ll add padding to each link:

他们也离得很近。 我们将padding添加到每个链接：

nav a {
	text-decoration: none;
	color: #fff;
	background-color: rgba(0, 0, 0, 0.7);
	display: block;
	padding: 0.75em;
}

And a :hover state:

和:hover状态：

nav a:hover {
	background-color: rgba(0, 0, 0, 0.9);
}

翻译自: https://thenewcode.com/73/Vertical-Navigation-and-List-Style