console 命令行工具 X clear

console

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>海贼宝藏 - 海贼精神，无往不前</title>
  </head>

  <body>
    <div class="box">
      <div class="nav">
        <div class="logo">
          <img
            src="https://www.haizeix.com/files/system/2017/06-25/151022e72ce7760444.png"
          />
        </div>
        <ul class="nav-list">
          <li class="nav-hover">
            <a href="http://haizeix.com"
              >潘多拉魔盒&nbsp;<b class="caret">&blacktriangledown;</b></a
            >
            <ul class="menu">
              <li>
                <a href="https://nanti.jisuanke.com/" target="_blank"
                  >计蒜客（在线交互式编码）</a
                >
              </li>
              <li>
                <a href="https://www.nowcoder.com/" target="_blank"
                  >牛客网（面试真题测评）</a
                >
              </li>
              <li>
                <a href="https://projecteuler.net" target="_blank"
                  >ProjectEuler（英文原站）</a
                >
              </li>
              <li>
                <a href="http://pe-cn.github.io/" target="_blank"
                  >ProjectEuler（中英对照）</a
                >
              </li>
              <li>
                <a href="https://leetcode-cn.com/" target="_blank"
                  >Leetcode（在线刷面试算法）</a
                >
              </li>
              <li>
                <a href="http://en.cppreference.com/w/" target="_blank"
                  >C/CPP 参考手册（在线文档+运行环境）</a
                >
              </li>
              <li>
                <a
                  href="https://oschina.gitee.io/learn-git-branching/"
                  target="_blank"
                  >Git 操作在线学习</a
                >
              </li>
            </ul>
          </li>
          <li class="nav-hover">
            <a
              href="https://www.jisuanke.com/plan?object=%E5%85%B6%E4%BB%96&amp;subobject=%E6%B5%B7%E8%B4%BC%E5%AE%9D%E8%97%8F"
              target="_blank"
              >计蒜客（海贼宝藏） <b class="caret">&blacktriangledown;</b></a
            >
            <ul class="menu">
              <li>
                <a href="https://www.jisuanke.com/course/786" target="_blank"
                  >C语言程序设计</a
                >
              </li>
              <li>
                <a href="https://www.jisuanke.com/course/787" target="_blank"
                  >C++程序设计</a
                >
              </li>
              <li>
                <a href="https://www.jisuanke.com/course/788" target="_blank"
                  >Python程序设计</a
                >
              </li>
              <li>
                <a href="https://www.jisuanke.com/course/789" target="_blank"
                  >工程实践基础</a
                >
              </li>
              <li>
                <a href="https://www.jisuanke.com/course/790" target="_blank"
                  >面向对象编程（轮子哥）</a
                >
              </li>
              <li>
                <a href="https://www.jisuanke.com/course/791" target="_blank"
                  >操作系统入门与系统编程</a
                >
              </li>
              <li>
                <a href="https://www.jisuanke.com/course/792" target="_blank"
                  >数据结构</a
                >
              </li>
              <li>
                <a href="https://www.jisuanke.com/course/799" target="_blank"
                  >求职算法辅导</a
                >
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </body>
</html>

* {
    margin: 0px;
    padding: 0px;
}

li {
    list-style: none;
}

.box {
    width: 100%;
    height: 600px;
    background-color: yellow;
}

.box .nav {
    width: 100%;
    height: 70px;
    background-color: black;
}

.box .nav .logo {
    height: 100%;
    display: inline-block;
}

img {
    height: 100%;
}

.nav-hover {
    margin-left: 20px;
    width: 160px;
    float: left;
    height: 70px;
    line-height: 70px;
    overflow: hidden;
}

.nav-list {
    display: inline-block;
}

.nav-hover > a {
    text-decoration: none;
    display: inline-block;
    color: white;
}

.nav-hover .menu {
    float: left;
    width: 320px;
    line-height: 50px;
    background-color: white;
}

.menu a {
    padding-left: 20px;
    display: inline-block;
    width: 300px;
    text-decoration: none;
    color: grey;
    transition: all 0.2s ease-in-out;
}


/* .caret {
    display: inline-block;
    border-top: 10px solid #fff;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
} */

.menu a:hover {
    background-color: rgb(2, 168, 2);
    color: white;
}

.nav-hover:hover {
    overflow: visible;
}