ToolBox
/
index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>工具箱 | 开发工具箱</title>
  <meta name="keyworks" content="工具箱,开发人员工具箱,开发工具箱,程序员工具箱">
  <meta name="description" content="提供开发人员常用的工具">
  <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

  <style>
    .dbtn {
      height: 120px;
      border: 1px solid #e4ecf3;
      margin: 10px;
      padding: 6px 12px;
      position: relative;
    }

    .dbtn:hover {
      box-shadow: 0 26px 40px -24px rgba(0, 36, 100, 0.3);
    }

    .dicon {
      width: 48px;
      height: 48px;
      position: absolute;
    }

    .dbtn h6 {
      margin-left: 50px;
      line-height: 48px;
      font-weight: bold;
    }

    .dbtn span {
      font-size: 14px;
      color: rgb(16 16 16 / 57%)
    }

    .dbtn a,
    .dbtn a:link,
    .dbtn a:visited,
    .dbtn a:active {
      position: absolute;
      bottom: 6px;
      right: 12px;
      border: none;
      border-bottom: solid 2px #ffffff;
      border-radius: 0;
      cursor: pointer;
    }

    .dbtn a:hover {
      background-color: #ffffff;
      border: none;
      border-bottom: solid 2px #0069d9;
      border-radius: 0;
    }

    .footer {
      line-height: 5rem;
      color: #555555
    }
  </style>

</head>

<body>
  <header style="margin-bottom:30px">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <a class="navbar-brand" href="/">开发工具箱</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01"
        aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarColor01">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="https://www.itzcy.com" target="_blank">辰云博客</a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="/about.html">关于工具箱</a>
          </li>
        </ul>
      </div>
    </nav>
  </header>
  <div class="body-content container">
    <div class="text-center">
      <h1>开发工具箱</h1>
    </div>
    <div class="row">
      <div class="col-sm dbtn">
        <img class="dicon" src="/resource/image/electricity.png" alt="">
        <h6>电费计算器</h6>
        <span>计算/预估电量电费</span>
        <a href="/electricity.html" class="btn btn-light btn-sm">进入</a>
      </div>
      <div class="col-sm dbtn">
        <img class="dicon" src="/resource/image/password.png" alt="">
        <h6>密码生成器</h6>
        <span>便携密码生成器</span>
        <a href="/password.html" class="btn btn-light btn-sm">进入</a>
      </div>
      <div class="col-sm dbtn">
        <img class="dicon" src="/resource/image/qr.png" alt="">
        <h6>二维码生成</h6>
        <span>二维码快捷生成</span>
        <a href="/qr.html" class="btn btn-light btn-sm">进入</a>
      </div>

    </div>
  </div>
  <div class="col-xl-12 text-center footer">
    Copyright © By ToolBox.Itzcy.com. 2019 - <script>
      document.write((new Date()).getFullYear())
    </script>
  </div>
</body>

</html>