cclbc37 2021-10-22 16:33 采纳率: 81.8%
浏览 36
已结题

看到一个好看的状态栏不知到用什么做出来的

img


这样的菜单使用什么做的，谢谢。它是悬浮在canvas上。
来源：
Excalidraw | Hand-drawn look & feel • Collaborative • Secure Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them. https://excalidraw.com/

  • 写回答

2条回答 默认 最新

  • 在下月亮有何贵干 前端领域优质创作者 2021-10-22 16:51
    关注

    css啊，只要把中间图标找到，很好写啊，随便写个模子给你

    
<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <title> 页面名称 </title>
  <style type="text/css">
    .box {
      display: flex;
      box-shadow: 0 0 20px 1px lightgray;
      position: absolute;
      border-radius: 5px;
    }

    .btn {
      background-color: #E9ECEF;
      width: 50px;
      height: 50px;
      border-radius: 6px;
      margin: 4px;
      cursor: pointer;
      transition: all 0.8s;
      position: relative;
    }

    .btn:hover {
      background-color: #CED4DA;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="btn">
      <div style="position: absolute;right: 5px;bottom: 3px;color: #C7CFD7;">1</div>
    </div>
    <div class="btn">
      <div style="position: absolute;right: 5px;bottom: 3px;color: #C7CFD7;">2</div>
    </div>
    <div class="btn">
      <div style="position: absolute;right: 5px;bottom: 3px;color: #C7CFD7;">3</div>
    </div>
    <div class="btn">
      <div style="position: absolute;right: 5px;bottom: 3px;color: #C7CFD7;">4</div>
    </div>
    <div class="btn">
      <div style="position: absolute;right: 5px;bottom: 3px;color: #C7CFD7;">5</div>
    </div>
    <div class="btn">
      <div style="position: absolute;right: 5px;bottom: 3px;color: #C7CFD7;">6</div>
    </div>
    <div class="btn">
      <div style="position: absolute;right: 5px;bottom: 3px;color: #C7CFD7;">7</div>
    </div>
    <div class="btn">
      <div style="position: absolute;right: 5px;bottom: 3px;color: #C7CFD7;">8</div>
    </div>
  </div>
</body>

<script>

</script>

</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 11月2日
  • 已采纳回答 10月25日
  • 创建了问题 10月22日

悬赏问题

  • ¥20 机器学习能否像多层线性模型一样处理嵌套数据
  • ¥20 西门子S7-Graph,S7-300，梯形图
  • ¥50 用易语言http 访问不了网页
  • ¥50 safari浏览器fetch提交数据后数据丢失问题
  • ¥15 matlab不知道怎么改，求解答！！
  • ¥15 永磁直线电机的电流环pi调不出来
  • ¥15 用stata实现聚类的代码
  • ¥15 请问paddlehub能支持移动端开发吗？在Android studio上该如何部署？
  • ¥20 docker里部署springboot项目，访问不到扬声器
  • ¥15 netty整合springboot之后自动重连失效