makoshen 2022-02-11 17:41 采纳率: 100%
浏览 135
已结题

layui 网站中 这个悬浮目录 是怎么实现的？

img


https://www.layui.site/doc/element/layout.html

  • 写回答

4条回答 默认 最新

  • 崽崽的谷雨 2022-02-11 17:45
    关注

    html 锚点 了解一下 如果只是悬浮 那固定定位即可 。如果实现 点击跳转到对应位置 ，html锚点可以实现

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 50px;
    }

    .ml {
      position: fixed;
      right: 20px;
      top: 260px;
      border: 1px solid red;
      width: 200px;
      height: 150px;
    }

    /* ul{
      list-style: none;
    } */
    ul>li {
      width: 100%;
      height: 40px;
      line-height: 40px;

    }
    .vv{
           /* margin-top:800px ; */
    }
  </style>
</head>

<body>
  <div class="box">
   
    88888888888888888888888888888888888888888899
    999999999999999999999999999999999999999999999
    99999999999999999999999999999999999999999999999
    9999999999999999999999999999999
    88888888888888888888888888888888888888888899
    999999999999999999999999999999999999999999999
    99999999999999999999999999999999999999999999999
    9999999999999999999999999999999
    88888888888888888888888888888888888888888899
    999999999999999999999999999999999999999999999
    99999999999999999999999999999999999999999999999
    9999999999999999999999999999999
    88888888888888888888888888888888888888888899
    999999999999999999999999999999999999999999999
    99999999999999999999999999999999999999999999999
    9999999999999999999999999999999
    88888888888888888888888888888888888888888899
    999999999999999999999999999999999999999999999
    99999999999999999999999999999999999999999999999
    9999999999999999999999999999999
    88888888888888888888888888888888888888888899
    999999999999999999999999999999999999999999999
    99999999999999999999999999999999999999999999999
    9999999999999999999999999999999
    88888888888888888888888888888888888888888899
    999999999999999999999999999999999999999999999
    99999999999999999999999999999999999999999999999
    9999999999999999999999999999999
    88888888888888888888888888888888888888888899
    999999999999999999999999999999999999999999999
    99999999999999999999999999999999999999999999999
    9999999999999999999999999999999
    9999999999999999999999999999999
    9999999999999999999999999999999
    9999999999999999999999999999999
    9999999999999999999999999999999
    9999999999999999999999999999999
    9999999999999999999999999999999
    9999999999999999999999999999999
    9999999999999999999999999999999
    9999999999999999999999999999999
    9999999999999999999999999999999
    9999999999999999999999999999999
    <div class="vv">
      <a name="001" id="001">001 </a>
    111111111111111111111111111111111111111111
    111111111111111111111111111111111111111111
    11111111111111111111111111111111111111
    </div>
  </div>
  <div class="ml">
    <ul>
      <li> <a href="#001">跳到001</a></li>
      <li>444</li>
    </ul>
  </div>
</body>

</html>

    https://blog.csdn.net/ddwddw4/article/details/106145196/

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(3条)

报告相同问题？

问题事件

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

悬赏问题

  • ¥15 Stata链式中介效应代码修改
  • ¥15 latex投稿显示click download
  • ¥15 请问读取环境变量文件失败是什么原因？
  • ¥15 在若依框架下实现人脸识别
  • ¥15 网络科学导论，网络控制
  • ¥100 安卓tv程序连接SQLSERVER2008问题
  • ¥15 利用Sentinel-2和Landsat8做一个水库的长时序NDVI的对比，为什么Snetinel-2计算的结果最小值特别小，而Lansat8就很平均
  • ¥15 metadata提取的PDF元数据，如何转换为一个Excel
  • ¥15 关于arduino编程toCharArray()函数的使用
  • ¥100 vc++混合CEF采用CLR方式编译报错