我明白 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;
}
JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。
钉钉,专为中国企业打造的免费沟通协同多端平台, 阿里巴巴出品。
SVN 是 Subversion 的简称,是一个开放源代码的版本控制系统,相较于 RCS、CVS,它采用了分支管理系统,它的设计目标就是取代 CVS。
ReactiveX 是一个专注于异步编程与控制可观察数据(或者事件)流的 API。它组合了观察者模式,迭代器模式和函数式编程的优秀思想。
百度应用引擎(Baidu App Engine)提供了 PHP、Java、Python 的执行环境,以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用,并且提供动态扩容和负载均衡的运行环境,让开发者不用考虑高成本的运维工作,只需专注于业务逻辑,大大降低了开发者学习和迁移的成本。
App(应用程序,Application 的缩写)一般指手机软件。
提供一个服务绝不仅仅是简单的把硬件和软件累加在一起,它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。
单点登录(Single Sign On)是目前比较流行的企业业务整合的解决方案之一。SSO 的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统。
OpenStack 是一个云操作系统,通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成,同样也可以通过 Web 接口让最终用户部署资源。
Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件,让构建、部署、自动化集成项目变得简单易用。
确认过眼神后的灵魂连接,站在链在!
Laravel 是一套简洁、优雅的 PHP Web 开发框架。它采用 MVC 设计,是一款崇尚开发效率的全栈框架。
Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS / HTML 框架。
Electron 基于 Chromium 和 Node.js,让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目,兼容 Mac、Windows 和 Linux,它构建的应用可在这三个操作系统上面运行。
FlowUs.息流 个人及团队的新一代生产力工具。
让复杂的信息管理更轻松、自由、充满创意。
代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。
用户在该标签下分享代码片段时需在帖子标题前添加 [css]
或 [js]
用于区分代码片段类型。
CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
支付宝是全球领先的独立第三方支付平台,致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验,及转账收款/水电煤缴费/信用卡还款/AA 收款等生活服务应用。
阿里巴巴网络技术有限公司(简称:阿里巴巴集团)是以曾担任英语教师的马云为首的 18 人,于 1999 年在中国杭州创立,他们相信互联网能够创造公平的竞争环境,让小企业通过创新与科技扩展业务,并在参与国内或全球市场竞争时处于更有利的位置。
flomo 是新一代 「卡片笔记」 ,专注在碎片化时代,促进你的记录,帮你积累更多知识资产。
IBM(国际商业机器公司)或万国商业机器公司,简称 IBM(International Business Machines Corporation),总公司在纽约州阿蒙克市。1911 年托马斯·沃森创立于美国,是全球最大的信息技术和业务解决方案公司,拥有全球雇员 30 多万人,业务遍及 160 多个国家和地区。
知乎是网络问答社区,连接各行各业的用户。用户分享着彼此的知识、经验和见解,为中文互联网源源不断地提供多种多样的信息。
MongoDB(来自于英文单词“Humongous”,中文含义为“庞大”)是一个基于分布式文件存储的数据库,由 C++ 语言编写。旨在为应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的。它支持的数据结构非常松散,是类似 JSON 的 BSON 格式,因此可以存储比较复杂的数据类型。
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于