1. 概述
CSS（层叠样式表）是一种用于定义网页内容样式和布局的标记语言。它可以用于为HTML文档添加样式，从而改变文档的外观和排版方式。本文将详细介绍如何使用CSS创建一个带有旋转文本的垂直导航。
2. CSS旋转文本
要实现垂直导航中的旋转文本效果，我们可以使用CSS的transform属性。该属性允许我们对元素进行旋转、缩放、倾斜和平移等变换操作。
下面是一个简单的示例，演示如何使用CSS的transform属性旋转文本：
.nav-item {
transform: rotate(-90deg);
transform-origin: center;
}
上述代码将一个具有类名为nav-item的元素逆时针旋转90度，实现垂直排列的效果。通过调整旋转角度，你可以根据需要自由定制样式。
3. 垂直导航的实现
3.1 HTML结构
在CSS之前，首先需要构建正确的HTML结构。在本示例中，我们使用了一个无序列表（<ul>）作为垂直导航的容器。每个导航项均以列表项（<li>）的形式呈现，并使用锚链接（<a>）作为导航的文本内容。
<ul class="nav-menu">
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">产品&服务</a></li>
<li><a href="#">联系我们</a></li>
</ul>
3.2 CSS样式
接下来，我们将使用CSS来实现垂直导航的样式效果。首先，我们需要设置导航容器的宽度、高度和背景颜色等基本样式。
.nav-menu {
width: 200px;
height: 300px;
background-color: #F0F0F0;
}
然后，我们可以对导航项进行定位，并应用旋转文本效果。
.nav-menu li {
position: relative;
transform: rotate(-90deg);
transform-origin: left top;
list-style: none;
margin-left: 50px;
margin-bottom: 10px;
}
.nav-menu li a {
display: inline-block;
color: #000;
text-decoration: none;
white-space: nowrap;
}
上述代码将导航项向左旋转90度，使其垂直排列。为了保持导航项之间的间距，我们使用了margin-bottom属性。同时，white-space: nowrap;确保文字不换行。
3.3 完整示例
下面是一个完整的示例，展示了使用CSS实现旋转文本的垂直导航：
<!DOCTYPE html>
<html>
<head>
<style>
/* CSS样式 */
.nav-menu {
width: 200px;
height: 300px;
background-color: #F0F0F0;
}
.nav-menu li {
position: relative;
transform: rotate(-90deg);
transform-origin: left top;
list-style: none;
margin-left: 50px;
margin-bottom: 10px;
}
.nav-menu li a {
display: inline-block;
color: #000;
text-decoration: none;
white-space: nowrap;
}
</style>
</head>
<body>
<ul class="nav-menu">
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">产品&服务</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</body>
</html>
4. 结论
本文介绍了如何使用CSS创建一个带有旋转文本的垂直导航。通过使用CSS的transform属性，我们能够轻松地实现元素的旋转效果，并将其应用于导航项。垂直导航的样式可以根据具体需求进行自定义，通过学习和理解这种技术，我们可以在网页设计中创造出更加独特和有吸引力的效果。