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

任务描述

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

效果如下：

• 使用flex布局初步实现Educdoer顶部导航栏最外层容器两端对齐的效果，具体要求如下：
• 页面最小宽度：1200px
• 导航栏背景颜色16进制：#24292D
• 导航栏高度：60px
• 测试过程：
• 平台将读取用户补全后的index.html；
• 执行verify.js文件JQuery代码；
• 通过JQuery获取文档属性，对比属性值是否与编程要求一致；

相关知识

使用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;">右边容器