css快速设置导航栏 |css3中文手册

/* 导航栏的样式 */
.navbar {
background-color: #333; /* 背景颜色 */
overflow: hidden; /* 设置导航栏的尺寸，使其符合屏幕大小 */
font-family: Arial, sans-serif; /* 导航栏字体 */
}
/* 导航栏链接的样式 */
.navbar a {
float: left; /* 控制链接在导航栏中的位置 */
color: #f2f2f2; /* 字体颜色 */
text-align: center; /* 文本居中 */
padding: 14px 16px; /* 导航栏项的内边距 */
text-decoration: none; /* 取消文字下划线 */
font-size: 17px; /* 字体大小 */
}
/* 当链接鼠标悬浮时的样式 */
.navbar a:hover {
background-color: #ddd; /* 背景颜色 */
color: black; /* 字体颜色 */
}

上述代码可以快速帮助您设置一个简单的导航栏。其中，.navbar是导航栏的样式设置，.navbar a是导航栏链接的样式设置。您可以根据自己的需要更改链接的颜色、字体等样式属性。

需要注意的是，在样式表中使用了float属性，它可以用于控制链接在导航栏中的水平位置。如果您希望链接在导航栏中垂直居中，可以使用line-height属性。

希望这篇文章能够帮助您快速设置导航栏，并且把网页布局做得更美观。