我明白 h1 h2 h3 是为了标识几级标题,但这几个字本身就占了较大空间。
能不能像一般的大纲软件那样,用竖线来标识各个标题级别?
我明白 h1 h2 h3 是为了标识几级标题,但这几个字本身就占了较大空间。
能不能像一般的大纲软件那样,用竖线来标识各个标题级别?
你可以用这个试试,看看满不满意:
/* 浮动显示大纲块标记(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; }
来源:【 代码片段】啊哈哈哈代码来咯 ~~ 那你们先吃我就不打扰了哈 ~~
效果如下:
可以自定义 css 去掉, opacity 是透明度,改成 0 就完全看不见了
.b3-list-item__graphic {
opacity: 0.5;
}
Maven 是基于项目对象模型(POM)、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。
正则表达式(Regular Expression)使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。
Thank God It's Friday! 感谢老天,总算到星期五啦!
C 语言是一门通用计算机编程语言,应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。
Hibernate 是一个开放源代码的对象关系映射框架,它对 JDBC 进行了非常轻量级的对象封装,使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。
七牛云是国内领先的企业级公有云服务商,致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景,七牛先后推出了对象存储,融合 CDN 加速,数据通用处理,内容反垃圾服务,以及直播云服务等。
让我们欢迎这对新人。哦,不好意思说错了,让我们欢迎这位新人!
新手上路,请谨慎驾驶!
黑曜石是一款强大的知识库工具,支持本地 Markdown 文件编辑,支持双向链接和关系图。
A second brain, for you, forever.
用爱发电 (Programming With Love) 是一个以开源精神为核心的民间开源爱好者技术组织,“用爱发电”象征开源与贡献精神,加入组织,代表你将遵守组织的“个人开源爱好者”的各项条款。申请加入:用爱发电组织邀请帖。
用爱发电组织官网:https://programmingwithlove.stackoverflow.wiki/
应用程序编程接口(Application Programming Interface)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。
Office 现已更名为 Microsoft 365. Microsoft 365 将高级 Office 应用(如 Word、Excel 和 PowerPoint)与 1 TB 的 OneDrive 云存储空间、高级安全性等结合在一起,可帮助你在任何设备上完成操作。
小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动。
由于 Smart QQ 从 2019 年 1 月 1 日起停止服务,所以该项目也已经停止维护了!
Rust 是一门赋予每个人构建可靠且高效软件能力的语言。Rust 由 Mozilla 开发,最早发布于 2014 年 9 月。
Flutter 是谷歌的移动 UI 框架,可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作,它正在被越来越多的开发者和组织使用,并且 Flutter 是完全免费、开源的。
WordPress 是一个使用 PHP 语言开发的博客平台,用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统(CMS)来使用。WordPress 是一个免费的开源项目,在 GNU 通用公共许可证(GPLv2)下授权发布。
Hadoop 是由 Apache 基金会所开发的一个分布式系统基础架构。用户可以在不了解分布式底层细节的情况下,开发分布式程序。充分利用集群的威力进行高速运算和存储。
Telegram 是一个非盈利性、基于云端的即时消息服务。它提供了支持各大操作系统平台的开源的客户端,也提供了很多强大的 APIs 给开发者创建自己的客户端和机器人。
子曰:“工欲善其事,必先利其器。”
你若安好,便是晴天。
Markdown 是一种轻量级标记语言,用户可使用纯文本编辑器来排版文档,最终通过 Markdown 引擎将文档转换为所需格式(比如 HTML、PDF 等)。
FreeMarker 是一款好用且功能强大的 Java 模版引擎。
互联网(Internet),又称网际网络,或音译因特网、英特网。互联网始于 1969 年美国的阿帕网,是网络与网络之间所串连成的庞大网络,这些网络以一组通用的协议相连,形成逻辑上的单一巨大国际网络。
Flume 是一套分布式的、可靠的,可用于有效地收集、聚合和搬运大量日志数据的服务架构。
记录并分享人生的经历。
百度(Nasdaq:BIDU)是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村,致力于向人们提供“简单,可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”,象征着百度对中文信息检索技术的执著追求。
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于