下面是一个简单的导航条 CSS 代码生成器模板，您可以根据需要修改它以适应您的设计需求。您可以添加更多样式以改变颜色、字体、间距等。请将其复制到您的 HTML 文件中并适当修改其中的属性和值。这是一个基本的样式模板，可以根据需要进行进一步的自定义和修改。
HTML 部分：
```html
```
CSS 部分：
```css
/* 导航条样式 */
nav {
background-color: #333; /* 背景颜色 */
padding: 20px; /* 内边距 */
}
/* 导航链接样式 */
.nav-links {
list-style-type: none; /* 删除列表符号 */
margin: 0; /* 清除外边距 */
padding: 0; /* 清除内边距 */
display: flex; /* 使链接水平显示 */
}
/* 导航链接项的样式 */
.nav-links li {
margin-right: 20px; /* 每个链接项之间的间距 */
}
/* 导航链接文本样式 */
.nav-links li a {
color: #fff; /* 文字颜色 */
text-decoration: none; /* 无下划线 */
font-size: 18px; /* 字体大小 */
transition: color 0.3s ease; /* 添加颜色过渡效果 */
}
/* 鼠标悬停时的样式 */
.nav-links li a:hover {
color: #ffcc00; /* 鼠标悬停时的文字颜色 */
}
```
您可以根据需要添加更多的 CSS 属性来定制导航条，例如添加边框、更改字体等。希望这个模板可以帮助您开始创建一个漂亮的导航条。