每日CSS一练

弹性布局实战：制作响应式导航栏

/* 导航栏容器：采用弹性布局，内容水平排列 */
.navbar {
  display: flex;           /* 启用弹性盒子布局 */
  justify-content: space-between;  /* 子元素两端对齐 */
  align-items: center;     /* 垂直居中对齐 */
  padding: 1rem 2rem;      /* 内边距：上下1rem，左右2rem */
  background-color: #2c3e50; /* 深蓝色背景 */
  color: white;            /* 文字白色 */
}

/* 导航品牌logo样式 */
.nav-brand {
  font-size: 1.5rem;       /* 较大字号 */
  font-weight: bold;       /* 粗体显示 */
  text-decoration: none;   /* 去除下划线 */
  color: inherit;          /* 继承父元素颜色 */
}

/* 导航链接容器 */
.nav-links {
  display: flex;           /* 启用弹性布局 */
  gap: 1.5rem;             /* 子元素间距1.5rem */
}

/* 单个导航链接样式 */
.nav-link {
  padding: 0.5rem;         /* 内边距增加点击区域 */
  border-radius: 4px;      /* 圆角边框 */
  transition: all 0.3s ease; /* 平滑过渡效果 */
}

/* 鼠标悬停效果 */
.nav-link:hover {
  background-color: #34495e; /* 深色背景 */
  transform: translateY(-2px); /* 轻微上浮 */
}

/* 移动端响应式设计 */
@media (max-width: 768px) {
  /* 小屏幕下改为垂直布局 */
  .navbar {
    flex-direction: column; 
    padding: 1rem;
  }

  /* 调整链接容器间距 */
  .nav-links {
    margin-top: 1rem;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
  }

  /* 链接填满容器宽度 */
  .nav-link {
    text-align: center;
    padding: 0.8rem;
  }
}