使⽤HTMLCSS实现Educoder顶部导航栏第1关：使⽤flex布局实现Educoder顶部导航栏容器布局
任务描述
本关任务：使⽤flex布局实现容器两端对齐的效果。
效果如下：
相关知识
使⽤flex布局实现左右分开布局的⽅式有多种：
1. 使⽤flex布局justify-content: space-between属性
2. 使⽤flex布局flex:1 权重布局
使⽤flex布局justify-content: space-between属性
⾸先我们来看第⼀种实现⽅式：
1. <div class="parent-wrap">
2. <div >左边容器</div>
3. <div >右边容器</div>
4. </div>
5.
6. .parent-wrap{
7. height: 60px;
8. display: flex;
9. justify-content: space-between;
10. }
效果如图：
使⽤flex布局flex:1权重布局
接下来看第⼆种实现⽅式，同样使⽤flex布局：
1. <div class="parent-wrap">
2. <div class="left-wrap" >左边容器</div>
3. <div >右边容器</div>
4. </div>
5.
6. .parent-wrap{
7. height: 60px;
8. display: flex;
9. }
10.
11. .left-wrap{
12. flex:1
13. }
效果图：
第⼆种效果可能很多同学会问，为什么不直接让两个div都使⽤flex:1属性，这个很好解释，只有左侧使⽤flex:1属性的情况下，右侧容器宽度是根据内容来的，这样的话内容多长，右侧容器就有多长，如果两者都使⽤flex:1属性，右侧容器需要使⽤内容右对齐属性。
编程要求
在右侧编辑器中补充代码，使⽤flex布局初步实现Educdoer顶部导航栏最外层容器两端对齐的效果，具体要求如下：
1. 页⾯最⼩宽度：1200px
2. 导航栏背景颜⾊16进制：#24292D
3. 导航栏⾼度：60px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Educoder</title>
<script src="/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 >
<div class="left-wrap color-white">左边容器</div>
<div class="right-wrap color-white">右边容器</div>
</header>
</div>
</body>
</html>
第2关：实现左侧⽂字导航列表(从这⾥开始造航母了，快跑)任务描述
本关任务：实现导航栏的左侧⽂字导航列表。
效果图如下：
相关知识
使⽤flex进⾏⽔平排列布局：
1. <div class="parent-wrap">
2. <div ></div>
3. <div ></div>
4. <div ></div>
5. </div>
6.
7. .parent-wrap{
用html和css制作百度页面
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.
6.
7. ⽂字列表从左⾄右依次为：实践课程、翻转课堂、实训项⽬、在线竞赛、教学案例、交流问答
效果图如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Educoder</title>
<script src="/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%;
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="data.educoder/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="img-blog.csdnimg/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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。