以下是一个示例的导航栏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
标签,并设置了相应的颜色和字体大小样式。
你可以根据需要修改上述代码中的样式属性,以适应你的导航栏设计需求。
还没有评论,来说两句吧...