页面大纲前面的 H1 H2 能否去掉

本贴最后更新于 1309 天前,其中的信息可能已经渤澥桑田

我明白 h1 h2 h3 是为了标识几级标题,但这几个字本身就占了较大空间。

能不能像一般的大纲软件那样,用竖线来标识各个标题级别?

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    26264 引用 • 109194 回帖
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    10102 引用 • 45876 回帖 • 66 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • 这个不只是样式,还有浮窗功能,所以不能去掉。

  • nofind 1 评论

    可以自定义 css 去掉, opacity 是透明度,改成 0 就完全看不见了

    .b3-list-item__graphic { opacity: 0.5; }
    2 操作
    nofind 在 2023-09-06 13:26:34 更新了该回帖
    nofind 在 2023-09-06 13:26:14 更新了该回帖
    看到你回帖了我才跟帖的,结果今天看到这个问题居然都是 2 年前的了
    JeffreyChen
  • JeffreyChen 1 1 赞同

    你可以用这个试试,看看满不满意:

    /* 浮动显示大纲块标记(H1、H2…) CSS片段 */ /* 大纲块标隐藏样式 */ /* 为大纲块标和折叠按钮调整位置 */ ul.b3-list.b3-list--background [data-subtype="h1"] .b3-list-item__toggle, ul.b3-list.b3-list--background [data-subtype="h2"] .b3-list-item__toggle, ul.b3-list.b3-list--background [data-subtype="h3"] .b3-list-item__toggle, ul.b3-list.b3-list--background [data-subtype="h4"] .b3-list-item__toggle, ul.b3-list.b3-list--background [data-subtype="h5"] .b3-list-item__toggle, ul.b3-list.b3-list--background [data-subtype="h6"] .b3-list-item__toggle { position: relative; left: 20px; } ul.b3-list.b3-list--background [data-subtype="h1"] svg.b3-list-item__graphic, ul.b3-list.b3-list--background [data-subtype="h2"] svg.b3-list-item__graphic, ul.b3-list.b3-list--background [data-subtype="h3"] svg.b3-list-item__graphic, ul.b3-list.b3-list--background [data-subtype="h4"] svg.b3-list-item__graphic, ul.b3-list.b3-list--background [data-subtype="h5"] svg.b3-list-item__graphic, ul.b3-list.b3-list--background [data-subtype="h6"] svg.b3-list-item__graphic { opacity: 0; position: relative; left: -20px; margin: 0 0 0 4px; transition: all 300ms ease-out; } /*----------------------*/ /* 为大纲块标添加悬停显示效果 */ .b3-list--background .b3-list-item:hover .b3-list-item__graphic.popover__block { opacity: 1 !important; } ul.b3-list.b3-list--background [data-subtype="h1"] svg.b3-list-item__graphic:hover, ul.b3-list.b3-list--background [data-subtype="h2"] svg.b3-list-item__graphic:hover, ul.b3-list.b3-list--background [data-subtype="h3"] svg.b3-list-item__graphic:hover, ul.b3-list.b3-list--background [data-subtype="h4"] svg.b3-list-item__graphic:hover, ul.b3-list.b3-list--background [data-subtype="h5"] svg.b3-list-item__graphic:hover, ul.b3-list.b3-list--background [data-subtype="h6"] svg.b3-list-item__graphic:hover { color: red; } /*----------------------*/ /* 为大纲标题项添加背景过渡效果 */ .b3-list--background .b3-list-item { transition: all 300ms ease-out; }

    来源:【 代码片段】啊哈哈哈代码来咯 ~~ 那你们先吃我就不打扰了哈 ~~

    效果如下:

    块标隐藏.gif

    1 操作
    JeffreyChen 在 2023-09-06 14:14:19 更新了该回帖

推荐标签 标签

  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件,让构建、部署、自动化集成项目变得简单易用。

    54 引用 • 37 回帖 • 2 关注
  • SpaceVim

    SpaceVim 是一个社区驱动的模块化 vim/neovim 配置集合,以模块的方式组织管理插件以
    及相关配置,为不同的语言开发量身定制了相关的开发模块,该模块提供代码自动补全,
    语法检查、格式化、调试、REPL 等特性。用户仅需载入相关语言的模块即可得到一个开箱
    即用的 Vim-IDE。

    3 引用 • 31 回帖 • 112 关注
  • 钉钉

    钉钉,专为中国企业打造的免费沟通协同多端平台, 阿里巴巴出品。

    15 引用 • 67 回帖 • 270 关注
  • 笔记

    好记性不如烂笔头。

    311 引用 • 794 回帖
  • IDEA

    IDEA 全称 IntelliJ IDEA,是一款 Java 语言开发的集成环境,在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品,这家公司总部位于捷克共和国的首都布拉格,开发人员以严谨著称的东欧程序员为主。

    181 引用 • 400 回帖
  • Maven

    Maven 是基于项目对象模型(POM)、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。

    188 引用 • 319 回帖 • 240 关注
  • 运维

    互联网运维工作,以服务为中心,以稳定、安全、高效为三个基本点,确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    151 引用 • 257 回帖 • 2 关注
  • Swift

    Swift 是苹果于 2014 年 WWDC(苹果开发者大会)发布的开发语言,可与 Objective-C 共同运行于 Mac OS 和 iOS 平台,用于搭建基于苹果平台的应用程序。

    34 引用 • 37 回帖 • 559 关注
  • GitBook

    GitBook 使您的团队可以轻松编写和维护高质量的文档。 分享知识,提高团队的工作效率,让用户满意。

    3 引用 • 8 回帖 • 1 关注
  • 安装

    你若安好,便是晴天。

    132 引用 • 1184 回帖 • 1 关注
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架,基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 407 关注
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起,它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖 • 1 关注
  • 阿里云

    阿里云是阿里巴巴集团旗下公司,是全球领先的云计算及人工智能科技公司。提供云服务器、云数据库、云安全等云计算服务,以及大数据、人工智能服务、精准定制基于场景的行业解决方案。

    85 引用 • 324 回帖
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎,基于 RESTful 接口。Elasticsearch 是用 Java 开发的,并作为 Apache 许可条款下的开放源码发布,是当前流行的企业级搜索引擎。设计用于云计算中,能够达到实时搜索,稳定,可靠,快速,安装使用方便。

    117 引用 • 99 回帖 • 196 关注
  • TensorFlow

    TensorFlow 是一个采用数据流图(data flow graphs),用于数值计算的开源软件库。节点(Nodes)在图中表示数学操作,图中的线(edges)则表示在节点间相互联系的多维数据数组,即张量(tensor)。

    20 引用 • 19 回帖 • 3 关注
  • Access
    1 引用 • 3 回帖 • 3 关注
  • Shell

    Shell 脚本与 Windows/Dos 下的批处理相似,也就是用各类命令预先放入到一个文件中,方便一次性执行的一个程序文件,主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大,比用其他编程程序编辑的程序效率更高,因为它使用了 Linux/Unix 下的命令。

    125 引用 • 74 回帖
  • 大疆创新

    深圳市大疆创新科技有限公司(DJI-Innovations,简称 DJI),成立于 2006 年,是全球领先的无人飞行器控制系统及无人机解决方案的研发和生产商,客户遍布全球 100 多个国家。通过持续的创新,大疆致力于为无人机工业、行业用户以及专业航拍应用提供性能最强、体验最佳的革命性智能飞控产品和解决方案。

    2 引用 • 14 回帖 • 1 关注
  • 面试

    面试造航母,上班拧螺丝。多面试,少加班。

    326 引用 • 1395 回帖
  • 七牛云

    七牛云是国内领先的企业级公有云服务商,致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景,七牛先后推出了对象存储,融合 CDN 加速,数据通用处理,内容反垃圾服务,以及直播云服务等。

    29 引用 • 230 回帖 • 122 关注
  • 书籍

    宋真宗赵恒曾经说过:“书中自有黄金屋,书中自有颜如玉。”

    82 引用 • 412 回帖 • 1 关注
  • 智能合约

    智能合约(Smart contract)是一种旨在以信息化方式传播、验证或执行合同的计算机协议。智能合约允许在没有第三方的情况下进行可信交易,这些交易可追踪且不可逆转。智能合约概念于 1994 年由 Nick Szabo 首次提出。

    1 引用 • 11 回帖
  • OnlyOffice
    4 引用 • 18 关注
  • OpenCV
    15 引用 • 36 回帖
  • flomo

    flomo 是新一代 「卡片笔记」 ,专注在碎片化时代,促进你的记录,帮你积累更多知识资产。

    6 引用 • 143 回帖
  • 游戏

    沉迷游戏伤身,强撸灰飞烟灭。

    187 引用 • 832 回帖
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架,使用 Node.js 编写。

    22 引用 • 148 回帖 • 8 关注