[分享]css写qq会员导航

在现代的网站设计中，导航栏是非常关键的组件之一。在一些会员制网站中，导航栏能够有效地帮助用户在网站上进行导航和访问。在本文中，我们将用 CSS 编写一个简单的 QQ 会员导航栏。/ CSS 代码开始 ...

在现代的网站设计中，导航栏是非常关键的组件之一。在一些会员制网站中，导航栏能够有效地帮助用户在网站上进行导航和访问。在本文中，我们将用 CSS 编写一个简单的 QQ 会员导航栏。

/* CSS 代码开始 */

/* 首先我们将同样的 CSS 样式应用于所有的导航链接 */
.member-nav a {
  text-decoration: none; /* 文本装饰去掉 */
  color: #454545; /* 文本颜色 */
  font-size: 15px; /* 文本大小 */
  padding: 10px 15px; /* 链接内边距 */
}

/* 然后我们将创建一个容器 */
.member-nav {
  background-color: #f8f8f8; /* 背景色 */
  height: 60px; /* 导航栏高度 */
  box-shadow: 0 2px 2px rgba(0,0,0,0.1); /* 阴影效果 */
  display: flex; /* 弹性盒子布局 */
  justify-content: space-between; /* 将链接平均分配到导航栏中 */
  align-items: center; /* 使链接垂直居中 */
}

/* 接下来创建一个悬停效果以及当前页面所在链接的样式 */
.member-nav a:hover {
  color: #0084FF; /* 悬停时的文字颜色 */
  transition: all 0.3s ease-in-out; /* 过度动画效果 */
}

.member-nav .active {
  color: #0084FF; /* 当前页面文字颜色 */
}

/* 最后我们将添加一些导航链接 */
.member-nav .home {
  font-weight: bold; /* 文本加粗 */
}

.member-nav .notice {
  position: relative; /* 将通知图标定位到链接上 */
}

.member-nav .notice:before {
  content: "f0f3"; /* 通知图标 Unicode */
  font-family: "Font Awesome 5 Free"; /* 加载 Font Awesome */
  font-weight: 900; /* 定义字体权重 */
  font-size: 20px; /* 图标大小 */
  position: absolute; /* 绝对定位 */
  top: 0; /* 定位到图标上边缘 */
  right: 0; /* 定位到图标右边缘 */
  color: #0084FF; /* 图标颜色 */
}

.member-nav .avatar img {
  border-radius: 50%; /* 头像圆角 */
  width: 50px; /* 宽度 */
  height: 50px; /* 高度 */
  object-fit: contain; /* 让图像填充空间 */
}

/* CSS 代码结束 */ 

现在，我们已经成功创建了一个简单的 QQ 会员导航栏。您可以使用这些基本样式来创建自己的会员导航栏，根据需要进行修改。同时，记得使用 CSS 的灵活性来创建适当的过渡效果和悬停效果，这将使导航栏更加美观和易于使用。