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;
}
