css制作课程导航

使用CSS制作课程导航

HTML结构设计
创建一个基础的导航栏结构，通常使用<nav>和<ul>标签：

<nav class="course-nav">
  <ul>
    <li><a href="#intro">课程简介</a></li>
    <li><a href="#lessons">课时列表</a></li>
    <li><a href="#resources">学习资源</a></li>
    <li><a href="#forum">讨论区</a></li>
  </ul>
</nav>

基础样式设置
清除默认列表样式并设置导航栏布局：

.course-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  background-color: #f8f9fa;
  border-radius: 5px;
}

.course-nav li {
  flex-grow: 1;
  text-align: center;
}

.course-nav a {
  display: block;
  padding: 12px 20px;
  color: #333;
  text-decoration: none;
  font-family: 'Arial', sans-serif;
}

交互效果增强
添加悬停和激活状态样式：

.course-nav a:hover {
  background-color: #e9ecef;
}

.course-nav a.active {
  background-color: #007bff;
  color: white;
  font-weight: bold;
}

响应式设计
通过媒体查询适配移动设备：

@media (max-width: 768px) {
  .course-nav ul {
    flex-direction: column;
  }
}

高级样式扩展
添加过渡动画和分隔线：

.course-nav a {
  transition: background-color 0.3s ease;
  position: relative;
}

.course-nav li:not(:last-child) a::after {
  content: "";
  position: absolute;
  right: 0;
  top: 25%;
  height: 50%;
  border-right: 1px solid #ddd;
}

图标集成
使用Font Awesome等图标库增强视觉效果：

<li><a href="#intro"><i class="fas fa-info-circle"></i> 课程简介</a></li>

配套CSS调整图标间距：

.course-nav .fas {
  margin-right: 8px;
}