第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. 

  2. <div style="background: #1cbbb4;">左边容器</div>
    3. 

  3. <div style="background: #8dc63f;">右边容器</div>
    4. 

  4. </div>
    5. 

  5. .parent-wrap{
    6. 

  6. height: 60px;
    7. 

  7. display: flex;
    8. 

  8. justify-content: space-between;
    9. 

  9. }


效果如图：




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


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




  1. <div class="parent-wrap">
    2. 

  2. <div class="left-wrap" style="background: #1cbbb4;">左边容器</div>
    3. 

  3. <div style="background: #8dc63f;">右边容器</div>
    4. 

  4. </div>
    5. 

  5. .parent-wrap{
    6. 

  6. height: 60px;
    7. 

  7. display: flex;
    8. 

  8. }
    9. 

  9. .left-wrap{
    10. 

  10. flex:1
    11. 

  11. }


效果图：




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


编程要求


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


  1. 页面最小宽度：1200px
    2. 

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

  3. 导航栏高度：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进行水平排列布局：




  1. <div class="parent-wrap">
    2. 

  2. <div style="background: #0081ff;"></div>
    3. 

  3. <div style="background: #9c26b0;"></div>
    4. 

  4. <div style="background: #a5673f;"></div>
    5. 

  5. </div>
    6. 

  6. .parent-wrap{
    7. 

  7. width: 300px;
    8. 

  8. height: 60px;
    9. 

  9. display: flex;
    10. 

  10. }
    11. 

  11. .parent-wrap > div{
    12. 

  12. flex: 1;
    13. 

  13. text-align: center;
    14. 

  14. line-height: 60px;
    15. 

  15. }




编程要求


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


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

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

  3. logo宽高：40px * 38px
    4. 

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

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

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

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


效果图如下：




<!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进行水平排列布局：




  1. <div class="parent-wrap">
    2. 

  2. <div style="background: #0081ff;"></div>
    3. 

  3. <div style="background: #9c26b0;"></div>
    4. 

  4. <div style="background: #a5673f;"></div>
    5. 

  5. </div>
    6. 

  6. .parent-wrap{
    7. 

  7. width: 300px;
    8. 

  8. height: 60px;
    9. 

  9. display: flex;
    10. 

  10. }
    11. 

  11. .parent-wrap > div{
    12. 

  12. flex: 1;
    13. 

  13. text-align: center;
    14. 

  14. line-height: 60px;
    15. 

  15. }




编程要求


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


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

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

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

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

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

  6. 各图标链接如下：




：/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伪类实现（文字颜色变淡）




  1. <div class="text">实践课程</div>
    2. 

  2. .text{
    3. 

  3. opacity: .7;
    4. 

  4. }


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




  1. .text{
    2. 

  2. background: rgba(0,0,0,.7);
    3. 

  3. opacity: .7;
    4. 

  4. margin: 0 15px 15px 0;
    5. 

  5. }


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


选中列表变色


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






  1. <div class="parent-wrap">
    2. 

  2. <div><span class="nav-text">导航1</span></div>
    3. 

  3. <div><span class="nav-text">导航2</span></div>
    4. 

  4. <div><span class="nav-text">导航3</span></div>
    5. 

  5. <div><span class="nav-text">导航4</span></div>
    6. 

  6. </div>
    7. 

  7. .parent-wrap{
    8. 

  8. height: 60px;
    9. 

  9. width: 500px;
    10. 

  10. display: flex;
    11. 

  11. background: #cccccc;
    12. 

  12. }
    13. 

  13. .parent-wrap > div{
    14. 

  14. position: relative;
    15. 

  15. display: flex;
    16. 

  16. flex: 1;
    17. 

  17. align-items: center;
    18. 

  18. justify-content: center;
    19. 

  19. cursor: pointer;
    20. 

  20. }
    21. 

  21. .nav-text{
    22. 

  22. position: relative;
    23. 

  23. }




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




  1. /*选中类样式，文字颜色改变*/
    2. 

  2. .active{
    3. 

  3. color: #459be5;
    4. 

  4. }
    5. 

  5. /*底部出现横杠*/
    6. 

  6. .active:after{
    7. 

  7. content: '';
    8. 

  8. position: absolute;
    9. 

  9. height: 2px;
    10. 

  10. bottom: -10px;
    11. 

  11. left: 0;
    12. 

  12. width: 14px;
    13. 

  13. background-color: #459be5;
    14. 

  14. }


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


<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伪元素实现列表选中效果，具体要求如下：


  1. 鼠标悬停时文字透明度：70%；
    2. 

  2. 使用:after伪元素为第一个菜单文字左下角添加蓝色线条；
    3. 

  3. 蓝色线条宽度：14px，高度：2px，颜色：#459be5，线条距离文字高度：10px；
    4. 

  4. 当鼠标悬停时任意文字或图标上时，当前项光标显示为一只手。


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


											

使用 HTML/CSS 实现 Educoder 顶部导航栏相关推荐
	

    
								
  1. html+css实现页面顶部导航栏
		
    最终效果如下: 接下来,我将从html和css两大部分,逐步为您讲解制作过程 目录 Html 实现布局 创建父栏目 创建子栏目 插入外部样式表,为接下来的css编辑做准备 Css 实现样式 排布文本, ...
    
		
    2. 
						
  2. HTML+CSS 简单的顶部导航栏菜单制作
		
    导航栏的制作: 技术要求: CSS HTML各类标签 实现目的: 制作导航栏菜单 代码分析: 基本样式清除 无序列原点删除 下划线删除 文字默认居中 a标签设置块级元素 伪类选择器对a状态修饰 分步实 ...
    
		
    3. 
						
  3. html怎么设置顶部导航栏,互联网常识：CSS+HTML如何实现顶部导航栏
		
    本篇文章给大家介绍一下CSS+HTML实现顶部导航栏的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 导航栏的实现.固定顶部导航栏.二级菜单实现 效果图: 最近在使用这个导航栏 ...
    
		
    4. 
						
  4. HTML+CSS简单实现京东顶部导航栏
		
    效果图 html代码 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
    
		
    5. 
						
  5. uniapp去掉顶部导航栏后计算手机安全区距离，css背景模糊效果
		
    问题: 1.uniapp去掉顶部导航栏后计算手机安全区距离 2.模糊背景的局部清晰 3.去除overflow: auto:带来的滚动条(没有滚动条也可以滚动) 4.监测页面滑动使用的方法 5.data ...
    
		
    6. 
						
  6. 页面顶部导航栏css样式布局
		
    项目场景: css样式布局 例如:项目场景:页面顶部导航栏,左侧logo.右侧退出登录固定在页面,不随滚动条滚动:中间有菜单,添加滚动条. 问题描述 顶部导航栏出现滚动条,滚动条位置在页面底部 解决方 ...
    
		
    7. 
						
  7. uniapp添加顶部导航栏并且更换图标
		
    uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架. 开发者通过编写 Vue.js 代码,uni-app 将其编译到iOS.Android.微信小程序等多个平台,保证其正确运行并达到优 ...
    
		
    8. 
						
  8. vue---museui解决底部/顶部导航栏位置固定问题
		
    移动端页面通常会包括顶部导航或底部导航栏,导航栏一般固定在页面上. 问题描述如下: 导航栏未固定,顶部红色导航栏会随着页面下滚而消失,底部的蓝色导航栏会根据页面内容变化而上下浮动,视觉体验非常不好.  ...
    
		
    9. 
						
  9. Html顶部导航栏实现
		
    顶部导航nav栏实现(包括一级菜单,二级菜单) 实现效果: 代码如下~ Html部分: <!doctype html> <html> <head> <meta ...
    
		
    10. 
		


					

最新文章
	

    
						
  1. 哪些人工智能公司有望上科创？（一）
		
    2. 
						
  2. Mongodb集群 - 副本集内部选举机制
		
    3. 
						
  3. Ubuntu Server 16.04 LTS上给Docker配置镜像加速器
		
    4. 
						
  4. dll文件用什么语言编写_零基础学习markdown标记语言语法，十分简单便捷编写markdown文件...
		
    5. 
						
  5. 音视频技术开发周刊 | 225
		
    6. 
						
  6. leetcode 139. Word Break | 139. 单词拆分（动态规划）
		
    7. 
						
  7. 【转】Oracle回收站(recyclebin)
		
    8. 
						
  8. 微信小程序插件内页面跳转和参数传递
		
    9. 
						
  9. maven打本地JAR包
		
    10. 
						
  10. 这本Python书被封年度神作！程序员：比女友强太多！
		
    11. 
						
  11. 华为视频会议系统常见问题及解决方法
		
    12. 
						
  12. 在RT-Thread上移植EtherCAT开源主站SOEM1.4.0
		
    13. 
						
  13. PHP动态网页设计：第2版pdf
		
    14. 
						
  14. BTP-2118 玩 GTA5
		
    15. 
						
  15. android 悬浮按钮点击展开动画,android仿微信浮窗的自动贴边可展开悬浮按钮-博客...
		
    16. 
						
  16. springboot项目版本升级
		
    17. 
						
  17. 获取pc微信信息_如何获取有关您的PC的详细信息
		
    18. 
						
  18. 记一次 ERROR scheduler.AsyncEventQueue: Dropping event from queue shared导致OOM
		
    19. 
						
  19. 实验七 磁盘调度算法的模拟与实现
		
    20. 
						
  20. python是哪个国家的品牌,爬取全国12个热门城市奶茶店铺情况，看看你的城市哪个品牌最多...
		
    21. 
		

	


热门文章
	

    
									
  1. Euclidean algorithm
			
    2. 
						
  2. 交互式数据可视化_我如何构建一个交互式仪表板Web应用程序以可视化拳击数据...
			
    3. 
						
  3. 计算机视觉 | 1. 一切的基础: 灰度图像 (读取，转换，像素定位)
			
    4. 
						
  4. Matlab求解矩阵方程
			
    5. 
						
  5. gif一键抠图 在线_一款支持智能抠图、钢笔抠图的在线抠图工具上线了 速抠图 sukoutu.com...
			
    6. 
						
  6. linux 防火墙 端口号命令
			
    7. 
						
  7. convert 函数的使用
			
    8. 
						
  8. 先吃奶油还是先吃蛋糕－－推迟满足感
			
    9. 
						
  9. android 消息提示机制
			
    10. 
						
  10. 使用Mininet创建Topo
			
    11.