【Web应用技术基础】CSS(6)——使用 HTML/CSS 实现 Educoder 顶部导航栏

news2024/12/23 13:49:07

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

<!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 {
    min-width: 1200px;
  }
  header {
    background: #24292D;
    height: 60px;
    justify-content: space-between;
    padding: 0 25px;
  }
  /*********** 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>

第二题：实现左侧文字导航列表

<!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;
    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://www.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="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"></span></div>
            <div class="menu-item"><span>教学案例</span></div>
            <div class="menu-item"><span>交流问答</span></div>
          </div>
        </div>
      <!--********** 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="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;
    cursor: pointer;
    justify-content: center;
  }

  .user {
    width: 34px;
    height: 34px;
    margin-left: 15px;
    cursor: pointer;
  }
  /*********** 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>实践课程</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="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"></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="">
    </div>
      <!--********** End **********-->
    </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="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="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"></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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1552441.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Java与Go：字符串转IP

Java与Go：字符串转IP

在本文中&#xff0c;我们将了解如何将简单的对比Java和Go是如何将字符串解析为IP地址。 Java 在Java中&#xff0c;将字符串转换为IP地址最无脑的一个方法&#xff1a; import java.net.InetAddress; import java.net.UnknownHostException;public class Main {public stat…
阅读更多...
shell脚本发布docker springboot项目示例

shell脚本发布docker springboot项目示例

docker、git、Maven、jdk8安装略过。 使git pull或者git push不需要输入密码操作方法 约定&#xff1a; 路径&#xff1a;/opt/springbootdemo&#xff0c; 项目&#xff1a;springbootdemo&#xff0c; 打包&#xff1a;springbootdemo.jar&#xff0c; docker容器名字&#x…
阅读更多...
竞赛 python+opencv+深度学习实现二维码识别

竞赛 python+opencv+深度学习实现二维码识别

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; pythonopencv深度学习实现二维码识别 &#x1f947;学长这里给一个题目综合评分(每项满分5分) 难度系数&#xff1a;3分工作量&#xff1a;3分创新点&#xff1a;3分 该项目较为新颖&…
阅读更多...
武汉星起航跨境电商：破局传统贸易，引领全球商业新风尚

武汉星起航跨境电商：破局传统贸易，引领全球商业新风尚

在全球经济格局日新月异的今天&#xff0c;跨境电商以其独特的商业模式和创新的运营理念&#xff0c;正在逐步改变着传统贸易的格局。武汉星起航电子商务有限公司&#xff0c;作为跨境电商领域的领军者&#xff0c;以其前瞻的战略布局和深厚的实战经验&#xff0c;不断推动着行…
阅读更多...
Java设计模式—备忘录模式（快照模式）

Java设计模式—备忘录模式（快照模式）

定义 备忘录模式提供了一种状态恢复的实现机制&#xff0c;使得用户可以方便地回到一个特定的历史步骤&#xff0c;当新的状态无效或者存在问题时&#xff0c;可以使用暂时存储起来的备忘录将状态复原&#xff0c;很多软件都提供了撤销&#xff08;Undo&#xff09;操作&#…
阅读更多...
基础算法-去重字符串,辗转相除法，非递归前序遍历二叉树题型分析

基础算法-去重字符串,辗转相除法，非递归前序遍历二叉树题型分析

目录 不同子串 辗转相除法-求最大公约数 二叉树非递归前序遍历 不同子串 从a开始&#xff0c;截取 a aa aaa aaab 从第二个下标开始a aa aab 从第三个 a ab 从第四个 b 使用set的唯一性&#xff0c;然后暴力遍历来去去重&#xff0c;从第一个下标开始截取aaab a aa aaa aaab…
阅读更多...
将html文件转化为pdf

将html文件转化为pdf

1.用浏览器将html文件打开 2.空白处右键点击打印 3.另存为PDF即可
阅读更多...
html音频和视频可输入表单input

html音频和视频可输入表单input

音频和视频 loop循环播放autoplay自动播放controls显示控制面板<audio src""> //<video src"#">muted静音播放 可输入表单input password密码框 radio单选框 checkbox复选框 file上传文件 text文本框 文本框<input type"text"…
阅读更多...
如何调试Clang源码

如何调试Clang源码

下载编译Clang 这个就直接去LLVM官网下载&#xff0c;然后编译好Clang就行&#xff0c;注意得debug模式&#xff0c;保存符号信息。 调试Clang 可以直接通过命令行来调试 #进入调试环境&#xff0c;这里的clang得是刚刚编译好的 lldb ./clang # r是运行&#xff0c;后面是正…
阅读更多...
Java认识泛型类

Java认识泛型类

一、包装类 认识泛型类之前先来认识一下包装类 1、基本数据类型和对应的包装类 在Java中&#xff0c;由于基本类型不是继承自Object&#xff0c;为了在泛型代码中可以支持基本类型&#xff0c;Java给每个基本类型都对应了一个包装类型。 除了 Integer 和 Character&#xff0…
阅读更多...
Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单实战案例 之九 简单闪烁效果

Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单实战案例 之九 简单闪烁效果

Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单实战案例 之九 简单闪烁效果 目录 Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单实战案例 之九 简单闪烁效果 一、简单介绍 二、简单闪烁效果实现原理 三、简单闪烁效果案例实现简单步骤 四、注意事项 一、简单…
阅读更多...
玩电脑突然停电对电脑有影响吗

玩电脑突然停电对电脑有影响吗

在现代社会中&#xff0c;电脑已成为我们日常生活和工作中不可或缺的一部分。然而&#xff0c;当我们正在专注于工作或娱乐时&#xff0c;突然停电可能会给我们带来不小的困扰。那么&#xff0c;玩电脑时突然停电会对电脑产生哪些影响呢&#xff1f;本文将深入探讨这一问题&…
阅读更多...
Groovy基础入门

Groovy基础入门

一、Groovy简介 Groovy是运行在JVM中的一种动态语言&#xff0c;可以在Java平台上进行编程&#xff0c;使用方式基本与使用Java代码的方式相同&#xff0c;它的语法与Java语言的语法很相似&#xff0c;与Java相比&#xff0c;Groovy更加灵活、简洁&#xff0c;而且完成同样的功…
阅读更多...
ChatGPT与传统搜索引擎的区别：智能对话与关键词匹配的差异

ChatGPT与传统搜索引擎的区别：智能对话与关键词匹配的差异

引言 随着互联网的快速发展&#xff0c;信息的获取变得比以往任何时候都更加便捷。在数字化时代&#xff0c;人们对于获取准确、及时信息的需求愈发迫切。传统搜索引擎通过关键词匹配的方式为用户提供了大量的信息&#xff0c;然而&#xff0c;这种机械式的检索方式有时候并不…
阅读更多...
SpringMVC第一个helloword项目

SpringMVC第一个helloword项目

文章目录 前言一、SpringMVC是什么&#xff1f;二、使用步骤1.引入库2.创建控制层3.创建springmvc.xml4.配置web.xml文件5.编写视图页面 总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; SpringMVC 提示&#xff1a;以下是本篇文章正文内容&#xf…
阅读更多...
Linux(CentOS)安装Redis教程_简单快捷

Linux(CentOS)安装Redis教程_简单快捷

一、安装依赖 因为redis是用C语言开发的&#xff0c;所以在安装之前需要确定是否安装gcc环境&#xff08;gcc -v&#xff09;&#xff0c;如果没有安转可以执行一下命令进行安装 [rootlocalhost ~]# yum install -y gcc 二、下载安装包 1.在官网先进行下载 官网地址&#x…
阅读更多...
linux 内存介绍

linux 内存介绍

大致共有四类&#xff1a;VSS、RSS、PSS、USS &#xff0c;通常情况下&#xff0c;VSS > RSS > PSS > USS 1.VSS(Virtual Set Size)虚拟耗用内存&#xff08;包含共享库占用的内存&#xff09; VSS表示一个进程可访问的全部内存地址空间的大小。这个大小包括了进程已…
阅读更多...
网络：udptcp套接字

网络：udptcp套接字

目录 协议 网络传输基本流程 网络编程套接字 udp套接字编程 udp相关代码实现 sock函数 bind函数 recvfrom函数 sendto函数 udp执行指令代码 popen函数 udp多线程版收发消息 tcp套接字编程 tcp套接字代码 listen函数 accept函数 read/write函数 connect函数 recv/…
阅读更多...
Gitlab CI---could not read username for xxx: no such device or address

Gitlab CI---could not read username for xxx: no such device or address

0 Preface/Foreword 项目开发中&#xff0c;经常会使用第三方的算法或者功能&#xff0c;那么就需要把对应的repo以子模块的方式添加到当前repo中。 添加命令&#xff1a; git submodule add <URL> 1 问题表现 子模块添加成功&#xff0c;但是GitLab CI阶段&#xff…
阅读更多...
如何在Apache Arrow中定位与解决问题

如何在Apache Arrow中定位与解决问题

如何在apache Arrow定位与解决问题 最近在执行sql时做了一些batch变更&#xff0c;出现了一个 crash问题&#xff0c;底层使用了apache arrow来实现。本节将会从0开始讲解如何调试STL源码crash问题&#xff0c;在这篇文章中以实际工作中resize导致crash为例&#xff0c;引出如何…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023