使用 HTML/CSS 实现 Educoder 顶部导航栏

第1关：使用flex布局实现Educoder顶部导航栏容器布局

任务描述

本关任务：使用flex布局实现容器两端对齐的效果。

效果如下：

相关知识

使用flex布局实现左右分开布局的方式有多种：

1. 使用flex布局justify-content: space-between属性

2. 使用flex布局flex:1 权重布局

使用flex布局justify-content: space-between属性

首先我们来看第一种实现方式：

2. 左边容器
3. 右边容器

.parent-wrap{

height: 60px;

display: flex;

justify-content: space-between;

}

效果如图：

使用flex布局flex:1权重布局

接下来看第二种实现方式，同样使用flex布局：

2. 左边容器
3. 右边容器

.parent-wrap{

height: 60px;

display: flex;

}

.left-wrap{

flex:1

}

效果图：

第二种效果可能很多同学会问，为什么不直接让两个div都使用flex:1属性，这个很好解释，只有左侧使用flex:1属性的情况下，右侧容器宽度是根据内容来的，这样的话内容多长，右侧容器就有多长，如果两者都使用flex:1属性，右侧容器需要使用内容右对齐属性。

编程要求

在右侧编辑器中补充代码，使用flex布局初步实现Educdoer顶部导航栏最外层容器两端对齐的效果，具体要求如下：

1. 页面最小宽度：1200px

2. 导航栏背景颜色16进制：#24292D

3. 导航栏高度：60px

  
  
  
  




  

    
左边容器
    
右边容器
  

 第2关：实现左侧文字导航列表(从这里开始造航母了，快跑)

任务描述

本关任务：实现导航栏的左侧文字导航列表。

效果图如下：

相关知识

使用flex进行水平排列布局：

.parent-wrap{

width: 300px;

height: 60px;

display: flex;

}

.parent-wrap > div{

flex: 1;

text-align: center;

line-height: 60px;

}

编程要求

在右侧编辑器中补充代码，使用flex布局实现Educoder顶部导航栏左侧logo与文字列表效果，具体要求如下：

1. 文字列表使用flex布局，文字颜色为白色，文字大小：16px

2. 文字容器宽度64px，各文字容器之间距离30px

3. logo宽高：40px * 38px

4. logo距离屏幕左侧25px，距离文字列表30px

5. logo图片地址：https://data.educoder.net/images/educoder/headNavLogo.png?1526520218

6. ‘在线竞赛’右上方HOT使用base64格式：https://img-blog.csdnimg.cn/2022010612112358534.png

7. 文字列表从左至右依次为：实践课程、翻转课堂、实训项目、在线竞赛、教学案例、交流问答

效果图如下：

  
  
  
  




  

    

      
      

        
      
      

        
实践课程
        
翻转课堂
        
实训项目
        
在线竞赛
        
教学案例
        
交流问答
      
      
    
    

    
  

第3关：实现右侧功能图标排序 

本关任务：实现导航栏右侧功能图标排序。

相关知识

使用flex进行水平排列布局：

.parent-wrap{

width: 300px;

height: 60px;

display: flex;

}

.parent-wrap > div{

flex: 1;

text-align: center;

line-height: 60px;

}

编程要求

在右侧编辑器中不从代码，使用flex布局实现Educoder顶部导航栏右侧头像与图标列表效果，具体要求如下：

1. 头像大小：34px * 34px；

2. 图标大小：16px * 16px；

3. 头像距离屏幕右侧：25px，距离图标：15px；

4. 图标容器宽高：48px * 60px；

5. 头像链接：https://data.educoder.net/images/avatars/User/b?t=1569204859650；

6. 各图标链接如下：

：/api/attachments/411643

：/api/attachments/411644

：/api/attachments/411645

  
  
  
  




  

    

      

        
      
      

        
实践课程
        
翻转课堂
        
实训项目
        
在线竞赛
        
教学案例
        
交流问答
      
    
    

      
      

        

        

        

      
      
      
    
  

第4关：实现左侧鼠标悬停效果与选中状态

任务描述

本关任务：实现左侧鼠标悬停效果。

相关知识

整个鼠标悬停效果可分为两部分，一是悬浮效果，二是选中的列表变色。

悬浮效果

鼠标悬停效果我们可以使用hover伪类实现（文字颜色变淡）

1. 实践课程
3. .text{
4. opacity: .7;
5. }

tips：当值为小于1的小数时，可以不写前面的0，当值为0像素时可以省略后面的像素单位。下面举个例子：

1. .text{
2. background: rgba(0,0,0,.7);
3. opacity: .7;
4. margin: 0 15px 15px 0;
5. }

这样有利于与其他属性进行区分。

选中列表变色

蓝色选中样式则需要使用到伪元素:after，该写法在实际开发过程中会大量使用

2. 导航1
3. 导航2
4. 导航3
5. 导航4