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

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

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

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

  • 思源笔记

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

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

    20174 引用 • 77860 回帖 • 1 关注
  • Q&A

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

    7029 引用 • 31781 回帖 • 219 关注

相关帖子

欢迎来到这里!

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

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

  • 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 更新了该回帖

推荐标签 标签

  • Google

    Google(Google Inc.,NASDAQ:GOOG)是一家美国上市公司(公有股份公司),于 1998 年 9 月 7 日以私有股份公司的形式创立,设计并管理一个互联网搜索引擎。Google 公司的总部称作“Googleplex”,它位于加利福尼亚山景城。Google 目前被公认为是全球规模最大的搜索引擎,它提供了简单易用的免费服务。不作恶(Don't be evil)是谷歌公司的一项非正式的公司口号。

    49 引用 • 192 回帖
  • Solo

    Solo 是一款小而美的开源博客系统,专为程序员设计。Solo 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    1427 引用 • 10046 回帖 • 474 关注
  • gRpc
    11 引用 • 9 回帖 • 50 关注
  • Solidity

    Solidity 是一种智能合约高级语言,运行在 [以太坊] 虚拟机(EVM)之上。它的语法接近于 JavaScript,是一种面向对象的语言。

    3 引用 • 18 回帖 • 353 关注
  • Lute

    Lute 是一款结构化的 Markdown 引擎,支持 Go 和 JavaScript。

    25 引用 • 191 回帖 • 20 关注
  • jsDelivr

    jsDelivr 是一个开源的 CDN 服务,可为 npm 包、GitHub 仓库提供免费、快速并且可靠的全球 CDN 加速服务。

    5 引用 • 31 回帖 • 51 关注
  • MySQL

    MySQL 是一个关系型数据库管理系统,由瑞典 MySQL AB 公司开发,目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    675 引用 • 535 回帖
  • MyBatis

    MyBatis 本是 Apache 软件基金会 的一个开源项目 iBatis,2010 年这个项目由 Apache 软件基金会迁移到了 google code,并且改名为 MyBatis ,2013 年 11 月再次迁移到了 GitHub。

    170 引用 • 414 回帖 • 400 关注
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 22 关注
  • 电影

    这是一个不能说的秘密。

    120 引用 • 598 回帖
  • 微服务

    微服务架构是一种架构模式,它提倡将单一应用划分成一组小的服务。服务之间互相协调,互相配合,为用户提供最终价值。每个服务运行在独立的进程中。服务于服务之间才用轻量级的通信机制互相沟通。每个服务都围绕着具体业务构建,能够被独立的部署。

    96 引用 • 155 回帖
  • 阿里巴巴

    阿里巴巴网络技术有限公司(简称:阿里巴巴集团)是以曾担任英语教师的马云为首的 18 人,于 1999 年在中国杭州创立,他们相信互联网能够创造公平的竞争环境,让小企业通过创新与科技扩展业务,并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 189 关注
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    70 引用 • 533 回帖 • 734 关注
  • 旅游

    希望你我能在旅途中找到人生的下一站。

    86 引用 • 897 回帖 • 1 关注
  • BND

    BND(Baidu Netdisk Downloader)是一款图形界面的百度网盘不限速下载器,支持 Windows、Linux 和 Mac,详细介绍请看这里

    107 引用 • 1281 回帖 • 29 关注
  • 数据库

    据说 99% 的性能瓶颈都在数据库。

    333 引用 • 619 回帖
  • Hadoop

    Hadoop 是由 Apache 基金会所开发的一个分布式系统基础架构。用户可以在不了解分布式底层细节的情况下,开发分布式程序。充分利用集群的威力进行高速运算和存储。

    85 引用 • 122 回帖 • 618 关注
  • Unity

    Unity 是由 Unity Technologies 开发的一个让开发者可以轻松创建诸如 2D、3D 多平台的综合型游戏开发工具,是一个全面整合的专业游戏引擎。

    25 引用 • 7 回帖 • 222 关注
  • 30Seconds

    📙 前端知识精选集,包含 HTML、CSS、JavaScript、React、Node、安全等方面,每天仅需 30 秒。

    • 精选常见面试题,帮助您准备下一次面试
    • 精选常见交互,帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段,帮助你获取最佳实践
    • 精选常见代码集,帮助您提高打码效率
    • 整理前端界的最新资讯,邀您一同探索新世界
    488 引用 • 383 回帖 • 1 关注
  • 架构

    我们平时所说的“架构”主要是指软件架构,这是有关软件整体结构与组件的抽象描述,用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    141 引用 • 441 回帖
  • flomo

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

    4 引用 • 91 回帖
  • Mobi.css

    Mobi.css is a lightweight, flexible CSS framework that focus on mobile.

    1 引用 • 6 回帖 • 714 关注
  • Quicker

    Quicker 您的指尖工具箱!操作更少,收获更多!

    26 引用 • 85 回帖 • 1 关注
  • 创造

    你创造的作品可能会帮助到很多人,如果是开源项目的话就更赞了!

    175 引用 • 994 回帖
  • 导航

    各种网址链接、内容导航。

    37 引用 • 168 回帖
  • Electron

    Electron 基于 Chromium 和 Node.js,让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目,兼容 Mac、Windows 和 Linux,它构建的应用可在这三个操作系统上面运行。

    15 引用 • 136 回帖 • 6 关注
  • 周末

    星期六到星期天晚,实行五天工作制后,指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖