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

usrname为username

18207人浏览 · 2021-12-15 02:57:16

usrname为username · 2021-12-15 02:57:16 发布

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

任务描述

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

效果如下：

相关知识

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

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

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

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

<div class="parent-wrap">
<div style="background: #1cbbb4;">左边容器</div>
<div style="background: #8dc63f;">右边容器</div>
</div>
.parent-wrap{
height: 60px;
display: flex;
justify-content: space-between;
}

效果如图：

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

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

<div class="parent-wrap">
<div class="left-wrap" style="background: #1cbbb4;">左边容器</div>
<div style="background: #8dc63f;">右边容器</div>
</div>
.parent-wrap{
height: 60px;
display: flex;
}
.left-wrap{
flex:1
}

效果图：

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

编程要求

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

页面最小宽度：1200px
导航栏背景颜色16进制：#24292D
导航栏高度：60px

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Educoder</title>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <script src="step1/verify.js"></script>
</head>
<style type="text/css">
  body {
    padding: 0;
    margin: 0;
  }

  .color-white {
    color: white;
  }

  /*********** Begin ************/
.container{
    height: 60px;
    display: flex;
    justify-content: space-between;
}
  /*********** End ************/
</style>
<body>
<div class="container">
  <header style="background: #24292D; min-width:1200px;">
    <div class="left-wrap color-white">左边容器</div>
    <div class="right-wrap color-white">右边容器</div>
  </header>
</div>
</body>
</html>

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

任务描述

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

效果图如下：

相关知识

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

<div class="parent-wrap">
<div style="background: #0081ff;"></div>
<div style="background: #9c26b0;"></div>
<div style="background: #a5673f;"></div>
</div>
.parent-wrap{
width: 300px;
height: 60px;
display: flex;
}
.parent-wrap > div{
flex: 1;
text-align: center;
line-height: 60px;
}

编程要求

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

文字列表使用flex布局，文字颜色为白色，文字大小：16px
文字容器宽度64px，各文字容器之间距离30px
logo宽高：40px * 38px
logo距离屏幕左侧25px，距离文字列表30px
logo图片地址：https://data.educoder.net/images/educoder/headNavLogo.png?1526520218
‘在线竞赛’右上方HOT使用base64格式：https://img-blog.csdnimg.cn/2022010612112358534.png
文字列表从左至右依次为：实践课程、翻转课堂、实训项目、在线竞赛、教学案例、交流问答

效果图如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Educoder</title>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <script src="step2/verify.js"></script>
</head>
<style type="text/css">
  body {
    padding: 0;
    margin: 0;
  }
  .container {
    min-width: 1200px;
  }
  .flex {
    display: flex;
  }
  .full-height{
    height: 100%;
  }
  header {
    background: #24292D;
    height: 60px;
    justify-content: space-between;
    padding: 0 25px;
  }
  header > div {
    height: 100%;
    display: flex;
    align-items: center;
  }
  /*********** Begin ************/
  .logo-block{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .logo {
    width: 40px;
    height: 38px;
    margin-right: 30px;
  }
  .menu-item {
    color: #ffffff;
    font-size: 16px;
    width: 64px;
    height: 100%;
    display: flex;
    align-items: center;
    margin-right: 30px;
    position: relative;
  }
  .hot{
    position: absolute;
    top: 10px;
    right: -22px;
  }
  /*********** End ************/
</style>
<body>
<div class="container">
  <header class="flex">
    <div class="left-wrap">
      <!--********** Begin **********-->
      <div class="logo-block">
        <img src="https://data.educoder.net/images/educoder/headNavLogo.png?1526520218" class="logo">
      </div>
      <div class="menu-block full-height flex">
        <div class="menu-item"><span>实践课程</span></div>
        <div class="menu-item"><span>翻转课堂</span></div>
        <div class="menu-item"><span>实训项目</span></div>
        <div class="menu-item"><span>在线竞赛<img class="hot" src="https://img-blog.csdnimg.cn/2022010612112358534.png"></span></div>
        <div class="menu-item"><span>教学案例</span></div>
        <div class="menu-item"><span>交流问答</span></div>
      </div>
      <!--********** End **********-->
    </div>
    <div class="right-wrap">
    </div>
  </header>
</div>
</body>
</html>

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

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

相关知识

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

<div class="parent-wrap">
<div style="background: #0081ff;"></div>
<div style="background: #9c26b0;"></div>
<div style="background: #a5673f;"></div>
</div>
.parent-wrap{
width: 300px;
height: 60px;
display: flex;
}
.parent-wrap > div{
flex: 1;
text-align: center;
line-height: 60px;
}

编程要求

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

头像大小：34px * 34px；
图标大小：16px * 16px；
头像距离屏幕右侧：25px，距离图标：15px；
图标容器宽高：48px * 60px；
头像链接：https://data.educoder.net/images/avatars/User/b?t=1569204859650；
各图标链接如下：

：/api/attachments/411643

：/api/attachments/411644

：/api/attachments/411645

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Educoder</title>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <script src="step3/verify.js"></script>
</head>
<style type="text/css">
  body {
    padding: 0;
    margin: 0;
  }
  .container {
    min-width: 1200px;
  }
  .flex {
    display: flex;
  }
  .full-height{
    height: 100%;
  }
  header {
    background: #24292D;
    height: 60px;
    justify-content: space-between;
    padding: 0 25px;
  }
  header > div {
    height: 100%;
    display: flex;
    align-items: center;
  }
  .logo-block{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .logo {
    width: 40px;
    height: 38px;
    margin-right: 30px;
  }
  .menu-item {
    color: #ffffff;
    font-size: 16px;
    width: 64px;
    height: 100%;
    display: flex;
    align-items: center;
    margin-right: 30px;
    position: relative;
  }
  .hot{
    position: absolute;
    top: 10px;
    right: -22px;
  }
  /*********** Begin ************/
  .icon-item{
    height: 100%;
    width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .user{
    width: 34px;
    height: 34px;
    margin-left: 15px;
  }
  /*********** End ************/
</style>
<body>
<div class="container">
  <header class="flex">
    <div class="left-wrap">
      <div class="logo-block">
        <img src="https://data.educoder.net/images/educoder/headNavLogo.png?1526520218" class="logo">
      </div>
      <div class="menu-block full-height flex">
        <div class="menu-item"><span>实践课程</span></div>
        <div class="menu-item"><span>翻转课堂</span></div>
        <div class="menu-item"><span>实训项目</span></div>
        <div class="menu-item"><span>在线竞赛<img class="hot" src="https://img-blog.csdnimg.cn/2022010612112358534.png"></span></div>
        <div class="menu-item"><span>教学案例</span></div>
        <div class="menu-item"><span>交流问答</span></div>
      </div>
    </div>
    <div class="right-wrap">
      <!--********** Begin **********-->
      <div class="icon-list full-height flex">
        <div class="icon-item"><img src="https://data.educoder.net/api/attachments/411643" alt=""></div>
        <div class="icon-item"><img src="https://data.educoder.net/api/attachments/411644" alt=""></div>
        <div class="icon-item"><img src="https://data.educoder.net/api/attachments/411645" alt=""></div>
      </div>
      <img class="user" src="https://data.educoder.net/images/avatars/User/b?t=1569204859650" alt="">
      <!--********** End **********-->
    </div>
  </header>
</div>
</body>
</html>

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

任务描述

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

相关知识

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

悬浮效果

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

<div class="text">实践课程</div>
.text{
opacity: .7;
}

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

.text{
background: rgba(0,0,0,.7);
opacity: .7;
margin: 0 15px 15px 0;
}

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

选中列表变色

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

<div class="parent-wrap">
<div><span class="nav-text">导航1</span></div>
<div><span class="nav-text">导航2</span></div>
<div><span class="nav-text">导航3</span></div>
<div><span class="nav-text">导航4</span></div>
</div>
.parent-wrap{
height: 60px;
width: 500px;
display: flex;
background: #cccccc;
}
.parent-wrap > div{
position: relative;
display: flex;
flex: 1;
align-items: center;
justify-content: center;
cursor: pointer;
}
.nav-text{
position: relative;
}

如图，我们实现了一个简单的导航，只需要再加一个选中类（实际开发中会通过js动态控制选中类）即可实现效果。

/*选中类样式，文字颜色改变*/
.active{
color: #459be5;
}
/*底部出现横杠*/
.active:after{
content: '';
position: absolute;
height: 2px;
bottom: -10px;
left: 0;
width: 14px;
background-color: #459be5;
}

我们只需要给需要加上样式的元素加上该类即可实现效果：

<span class="nav-text active">导航1</span>

说明：文字居中此处为什么使用flex布局的justify-content: center;align-items: center; 而不使用line-height:60px;text-align:center解释如下 —— 使用line-height垂直居中在文字超过一行的情况下会出现两行文字之间相差60px的问题。

举个例子：我们将导航1文字加长

<span class="nav-text">导航1导航1导航1导航1</span>

运行效果：

很明显，第四个导航1文字超出了容器，正是由于使用了line-height:60px导致，使用flex布局居中则可以很好的避免这一问题。

编程要求

在右侧编辑器中补充代码，使用hover伪类实现鼠标悬停效果，使用:after伪元素实现列表选中效果，具体要求如下：

鼠标悬停时文字透明度：70%；
使用:after伪元素为第一个菜单文字左下角添加蓝色线条；
蓝色线条宽度：14px，高度：2px，颜色：#459be5，线条距离文字高度：10px；
当鼠标悬停时任意文字或图标上时，当前项光标显示为一只手。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Educoder</title>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <script src="step4/verify.js"></script>
</head>
<style type="text/css">
  body {
    padding: 0;
    margin: 0;
  }
  .container {
    min-width: 1200px;
  }
  .flex {
    display: flex;
  }
  .full-height {
    height: 100%;
  }
  header {
    background: #24292D;
    height: 60px;
    justify-content: space-between;
    padding: 0 25px;
  }
  header > div {
    height: 100%;
    display: flex;
    align-items: center;
  }
  .logo-block{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .logo {
    width: 40px;
    height: 38px;
    margin-right: 30px;
  }
  .menu-item {
    color: #ffffff;
    font-size: 16px;
    width: 64px;
    height: 100%;
    display: flex;
    align-items: center;
    margin-right: 30px;
    position: relative;
    cursor: pointer;
  }
  .hot {
    position: absolute;
    top: 10px;
    right: -22px;
  }
  .icon-item {
    height: 100%;
    width: 48px;
    display: flex;
    align-items: center;
    cursor: pointer;
    justify-content: center;
  }
  .user {
    width: 34px;
    height: 34px;
    margin-left: 15px;
    cursor: pointer;
  }
  /*********** Begin ************/
  .menu-item:hover {
    opacity: .7;
  }
  .active {
    position: relative;
    color: #459be5;
  }
  .active:after {
    position: absolute;
    content: ' ';
    width: 14px;
    height: 2px;
    background: #459be5;
    bottom: -10px;
    left: 0;
  }
  /*********** End ************/
</style>
<body>
<div class="container">
  <header class="flex">
    <div class="left-wrap">
      <div class="logo-block">
        <img src="https://www.educoder.net/images/educoder/headNavLogo.png?1526520218" class="logo">
      </div>
      <div class="menu-block full-height flex">
        <div class="menu-item"><span class="active">实践课程</span></div>
        <div class="menu-item"><span>翻转课堂</span></div>
        <div class="menu-item"><span>实训项目</span></div>
        <div class="menu-item"><span>在线竞赛<img class="hot" src="https://img-blog.csdnimg.cn/2022010612112358534.png"></span></div>
        <div class="menu-item"><span>教学案例</span></div>
        <div class="menu-item"><span>交流问答</span></div>
      </div>
    </div>
    <div class="right-wrap">
      <div class="icon-list full-height flex">
        <div class="icon-item"><img src="https://www.educoder.net/api/attachments/411643" alt=""></div>
        <div class="icon-item"><img src="https://www.educoder.net/api/attachments/411644" alt=""></div>
        <div class="icon-item"><img src="https://www.educoder.net/api/attachments/411645" alt=""></div>
      </div>
      <img class="user" src="https://www.educoder.net/images/avatars/User/b?t=1569204859650" alt="">
    </div>
  </header>
</div>
</body>
</html>

GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m