以下是一个示例的导航栏CSS代码,包括标题和内容:
/* 导航栏容器 */
.navbar {
background-color: #333; /* 导航栏背景颜色 */
height: 60px; /* 导航栏高度 */
display: flex; /* 使用弹性布局 */
align-items: center; /* 垂直居中对齐 */
justify-content: space-between; /* 水平居中对齐 */
}
/* 导航栏标题样式 */
.navbar h1 {
color: #fff; /* 标题文字颜色 */
margin: 0; /* 去除默认外边距 */
font-size: 24px; /* 标题字体大小 */
}
/* 导航栏链接样式 */
.navbar a {
color: #fff; /* 链接文字颜色 */
text-decoration: none; /* 去除链接下划线 */
margin-right: 20px; /* 链接右边距 */
}
/* 鼠标悬停时链接样式 */
.navbar a:hover {
color: #ccc; /* 鼠标悬停时链接文字颜色 */
}
/* 导航栏内容样式 */
.navbar p {
color: #999; /* 内容文字颜色 */
font-size: 14px; /* 内容字体大小 */
}
以上代码定义了一个名为.navbar的导航栏容器,并设置了其背景颜色、高度、布局方式等属性,标题部分使用了h1标签,并设置了相应的颜色、字体大小等样式,链接部分使用了a标签,并设置了默认的颜色、下划线、右边距等样式,当鼠标悬停在链接上时,会应用一个不同的颜色样式,内容部分使用了p标签,并设置了相应的颜色和字体大小样式。
你可以根据需要修改上述代码中的样式属性,以适应你的导航栏设计需求。



还没有评论,来说两句吧...