实现左侧文字导航列表

任务描述

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

效果图如下：

相关知识

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

 
  1. <div class="parent-wrap">
  2. <div style="background: #0081ff;"></div>
  3. <div style="background: #9c26b0;"></div>
  4. <div style="background: #a5673f;"></div>
  5. </div>
  6.  
  7. .parent-wrap{
  8. width: 300px;
  9. height: 60px;
  10. display: flex;
  11. }
  12. .parent-wrap > div{
  13. flex: 1;
  14. text-align: center;
  15. line-height: 60px;
  16. }

编程要求

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

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

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

  3. logo宽高：40px * 38px

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

  5. logo图片地址：https://ali-cdn.educoder.net/images/avatars/LaboratorySetting/1nav?t=1619682623

  6. ‘在线竞赛’右上方HOT使用base64格式：data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAQCAYAAAAFzx/vAAACl0lEQVRIS62UP0gbURzHP09DUrHW1EqHuLhYBC0t1NOCg4M432IXhxZKDwShxUA7iuLmoLUEXHSRghk1OLgaaCrnn6FD6aFUEDoIYq5NxBBNXnkvl3hWi4N5y927e+/3+f2+vz9CQhCYAl4C96nSkoC4sJUGFoEPQsJH4F2VODeZmVVARQ/fdPI2/1W0XsSuAqr30qqrg85O2N0F1726V2ciEejqQp6fI1IppOsivG9+p5TRguOQcxxOgbzaK5kvAQ0DbBtME5lIgGEg/PupKUQ0CtksBIOQz8PQEDIQQKysXBFhf3yc3YmJSkQ1/wNK0wQfUO8PDhBbW8j5eRgehnAYsb6ObGzkuLWVQ+DUMHhm22ybJr/VfUBDfE8dYUVTLyK5tASOAy0tCMtCAUVzMywsIPv6EMmklic3Okr99DRf2trI7e1x1zDosW2+mSaZf4AVeNGfwzJQ5TCTgVAI0dGhJda5m5uD3l5yqRQ/gcDICI9iMba7u8ltblJvGDy1bb77gApUbg8d7XVADfAkVTnVEabTkEySjUZxZmY4AdqXl2nq72enoUHn6Y5h8MS2+WGa/Ekk/H2o5VVgBdRtob3wikYDfEDlwFkiQX51lbqBAdIbG9SGQoR7ejgYG+NwclIbVMDHto3jAf1VpFJQA2lRgFngrfZAyWZZEI+XchiJULAsTuJxfjkOLtA0OEhDezuyWCSzs8PJ2lqlCgORCA8ti6N4XLdDuTaKXh9K+KSKJlgsjbZXAsIXTQk54Ag4Bs6AWq/alHPlc0oZ9a6MquUzrr97/9wCLD6A975xV7og4Svw3Lu/BrwQkL3NpPHfvQ64D7QCn4HXohRc1dZ1QDWJYnqy+1umSshLQAn3gDcCpqtk/4qZv02gFT1dbcRiAAAAAElFTkSuQmCC

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

效果图如下：

测试说明

测试过程：

平台将读取用户补全后的index.html；

执行verify.js文件JQuery代码；

通过JQuery获取文档属性，对比属性值是否与编程要求一致；

最终效果与编程要求一致则通关，如未通过，请查看测试结果中的测试集；

开始你的任务吧，祝你成功！

 

 

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

  }

 

  header {

    background: #24292D;

    height: 60px;

    justify-content: space-between;

  }

 

  header > div {

    height: 100%;

    display: flex;

    align-items: center;

  }

 

  /*********** Begin ************/

 

  /*********** End ************/

</style>

<body>

<div class="container">

  <header class="flex">

    <div class="left-wrap">

      <!--********** Begin **********-->

 

      <!--********** End **********-->

    </div>

    <div class="right-wrap">

 

    </div>

  </header>

</div>

</body>

</html>  

 

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

  header {
    background: #24292D;
    height: 60px;
    justify-content:flex-start;
  } 

  header > div {
    height: 100%;
    display: flex;
    align-items: center;
  } 

  /*********** Begin ************/
    .left-wrap img{width:40px;height:38px;margin-left:25px;margin-right:30px}
    .right-wrap{display:flex;}
    .right-wrap>a{flex:1;color:#fff;font-size:16px;width:64px;display:inline-block;padding:0 15px;text-decoration:none}

    .right-wrap > a.hot{position:relative}
    .right-wrap > a.hot img{position:absolute;top:-10px;right:-6px}
  /*********** End ************/
</style>
<body>
<div class="container">
  <header class="flex">
    <div class="left-wrap">
      <!--********** Begin **********-->
        <img src="https://ali-cdn.educoder.net/images/avatars/LaboratorySetting/1nav?t=1619682623" />
      <!--********** End **********-->
    </div>
    <div class="right-wrap">
        <a href="#">课程实践</a>
        <a href="#">翻转课堂</a>
        <a href="#">实训项目</a>
        <a href="#" class="hot">在线竞赛<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAQCAYAAAAFzx/vAAACl0lEQVRIS62UP0gbURzHP09DUrHW1EqHuLhYBC0t1NOCg4M432IXhxZKDwShxUA7iuLmoLUEXHSRghk1OLgaaCrnn6FD6aFUEDoIYq5NxBBNXnkvl3hWi4N5y927e+/3+f2+vz9CQhCYAl4C96nSkoC4sJUGFoEPQsJH4F2VODeZmVVARQ/fdPI2/1W0XsSuAqr30qqrg85O2N0F1726V2ciEejqQp6fI1IppOsivG9+p5TRguOQcxxOgbzaK5kvAQ0DbBtME5lIgGEg/PupKUQ0CtksBIOQz8PQEDIQQKysXBFhf3yc3YmJSkQ1/wNK0wQfUO8PDhBbW8j5eRgehnAYsb6ObGzkuLWVQ+DUMHhm22ybJr/VfUBDfE8dYUVTLyK5tASOAy0tCMtCAUVzMywsIPv6EMmklic3Okr99DRf2trI7e1x1zDosW2+mSaZf4AVeNGfwzJQ5TCTgVAI0dGhJda5m5uD3l5yqRQ/gcDICI9iMba7u8ltblJvGDy1bb77gApUbg8d7XVADfAkVTnVEabTkEySjUZxZmY4AdqXl2nq72enoUHn6Y5h8MS2+WGa/Ekk/H2o5VVgBdRtob3wikYDfEDlwFkiQX51lbqBAdIbG9SGQoR7ejgYG+NwclIbVMDHto3jAf1VpFJQA2lRgFngrfZAyWZZEI+XchiJULAsTuJxfjkOLtA0OEhDezuyWCSzs8PJ2lqlCgORCA8ti6N4XLdDuTaKXh9K+KSKJlgsjbZXAsIXTQk54Ag4Bs6AWq/alHPlc0oZ9a6MquUzrr97/9wCLD6A975xV7og4Svw3Lu/BrwQkL3NpPHfvQ64D7QCn4HXohRc1dZ1QDWJYnqy+1umSshLQAn3gDcCpqtk/4qZv02gFT1dbcRiAAAAAElFTkSuQmCC" /></a>
        <a href="#">教学案例</a>
        <a href="#">交流问答</a>
    </div>
  </header>
</div>
</body>
</html>

 

您好，我是有问必答小助手，您的问题已经有小伙伴解答了，您看下是否解决，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月 有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632