测试下载文件

最新推荐文章于 2024-06-28 16:21:39 发布
zzh1063
最新推荐文章于 2024-06-28 16:21:39 发布
阅读量802
点赞数
文章标签： css css3 html
本文链接：https://blog.csdn.net/zzh1063/article/details/125402845
版权
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>circle</title>
    <style>
      html,
      body {
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
      }
      .main {
        width: 100%;
        height: 100%;
        position: relative;
      }
      .div-content-center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        text-align: center;
        cursor: pointer;
      }

      /* .ball2 {
        display: inline-block;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #eed784;
        position: relative;
        top: -30px;
        animation: spin2 3s infinite linear;
        transform-origin: 50% 130px;
      } */

      /* @keyframes spin2 {
        to {
          transform: rotate(1turn);
        }
      } */
    </style>
    <script>
      function jumpUrl(url) {
        window.open(url, '_blank')
      }
    </script>
  </head>
  <body>
    <div class="main">
      <div
        class="div-content-center"
        style="
          width: 330px;
          height: 300px;
          line-height: 300px;
          background: #e9ec0a;
          color: #000;
          font-size: 3em;
        "
        onclick="jumpUrl('http://www.baidu.com')"
      >
        <span>仓库</span>
      </div>
      <div
        class="div-content-center"
        style="
          width: 140px;
          height: 140px;
          line-height: 140px;
          background: #f99b28;
          color: #000;
          font-size: 1.5em;
          top: 40%;
          left: 35%;
        "
        onclick="jumpUrl('http://www.baidu.com')"
      >
        <span>查询</span>
      </div>
      <div
        class="div-content-center"
        style="
          width: 140px;
          height: 130px;
          line-height: 130px;
          background: #f99b28;
          color: #000;
          font-size: 1.5em;
          top: 30%;
          left: 47%;
        "
        onclick="jumpUrl('http://www.baidu.com')"
      >
        <span>原材料仓库</span>
      </div>
      <div
        class="div-content-center"
        style="
          width: 160px;
          height: 140px;
          line-height: 140px;
          background: #f99b28;
          color: #000;
          font-size: 1.5em;
          top: 17%;
          left: 47%;
        "
        onclick="jumpUrl('http://www.baidu.com')"
      >
        <span>原材料待处理</span>
      </div>
      <div
        class="div-content-center"
        style="
          width: 170px;
          height: 150px;
          line-height: 150px;
          background: #f99b28;
          color: #000;
          font-size: 1.5em;
          top: 31%;
          left: 60%;
        "
        onclick="jumpUrl('http://www.baidu.com')"
      >
        <span>样品仓库</span>
      </div>
      <div
        class="div-content-center"
        style="
          width: 100px;
          height: 150px;
          line-height: 150px;
          background: #f99b28;
          color: #000;
          font-size: 1.1em;
          top: 48%;
          left: 65%;
        "
        onclick="jumpUrl('http://www.baidu.com')"
      >
        <span>半成品仓库</span>
      </div>
      <div
        class="div-content-center"
        style="
          width: 100px;
          height: 150px;
          line-height: 150px;
          background: #f99b28;
          color: #000;
          font-size: 1.1em;
          top: 48%;
          left: 72%;
        "
        onclick="jumpUrl('http://www.baidu.com')"
      >
        <span>锯切仓库</span>
      </div>
      <div
        class="div-content-center"
        style="
          width: 140px;
          height: 130px;
          line-height: 130px;
          background: #f99b28;
          color: #000;
          font-size: 1.1em;
          top: 64%;
          left: 62%;
        "
        onclick="jumpUrl('http://www.baidu.com')"
      >
        <span>产品仓库</span>
      </div>
      <div
        class="div-content-center"
        style="
          width: 140px;
          height: 130px;
          line-height: 130px;
          background: #f99b28;
          color: #000;
          font-size: 1.1em;
          top: 72%;
          left: 53%;
        "
        onclick="jumpUrl('http://www.baidu.com')"
      >
        <span>待清洗仓库</span>
      </div>
      <div
        class="div-content-center"
        style="
          width: 130px;
          height: 100px;
          line-height: 100px;
          background: #f99b28;
          color: #000;
          font-size: 1.1em;
          top: 69%;
          left: 43%;
        "
        onclick="jumpUrl('http://www.baidu.com')"
      >
        <span>GP12-1未检验</span>
      </div>
      <div
        class="div-content-center"
        style="
          width: 130px;
          height: 100px;
          line-height: 100px;
          background: #f99b28;
          color: #000;
          font-size: 1.1em;
          top: 77%;
          left: 38%;
        "
        onclick="jumpUrl('http://www.baidu.com')"
      >
        <span>GP12-1待处理</span>
      </div>
      <div
        class="div-content-center"
        style="
          width: 130px;
          height: 100px;
          line-height: 100px;
          background: #f99b28;
          color: #000;
          font-size: 1.1em;
          top: 60%;
          left: 35%;
        "
        onclick="jumpUrl('http://www.baidu.com')"
      >
        <span>GP12仓库</span>
      </div>
      <div
        class="div-content-center"
        style="
          width: 130px;
          height: 100px;
          line-height: 100px;
          background: #f99b28;
          color: #000;
          font-size: 1.1em;
          top: 65%;
          left: 28%;
        "
        onclick="jumpUrl('http://www.baidu.com')"
      >
        <span>GP12待处理</span>
      </div>
    </div>
  </body>
</html>