登录 注册

【代码片段】突出标题

本贴最后更新于 247 天前，其中的信息可能已经物是人非

通过代码片段把 标题 往前挪一点

效果：

a0ba67c4bb8d95b68de19bf2fb875b8.png

a13a2d664ac898395be124bfb9df176.png

代码片段：

/* 左右移动标题位置 CSS片段 */
.b3-typography>.h1,
.protyle-wysiwyg>.h1 {
    margin-left: -35px; /* 负值可以根据需要进行调整 */
}

.b3-typography>.h2,
.b3-typography>.h3,
.b3-typography>.h4,
.b3-typography>.h5,
.b3-typography>.h6,
.protyle-wysiwyg>.h2,
.protyle-wysiwyg>.h3,
.protyle-wysiwyg>.h4,
.protyle-wysiwyg>.h5,
.protyle-wysiwyg>.h6 {
    margin-left: -20px; /* 负值可以根据需要进行调整 */
}

按照我的理解改的，两个月使用下来没有发现 BUG

  • 思源笔记

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

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

    20240 引用 • 78267 回帖
  • 代码
    460 引用 • 591 回帖 • 8 关注
  • Q&A

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

    7066 引用 • 31992 回帖 • 217 关注
1 引用
【代码片段分享】思源笔记用到现在积累的所有代码片段 • JeffreyChen
4 操作
JeffreyChen 在 2023-11-22 12:30:05 更新了该帖
JeffreyChen 在 2023-09-15 21:58:10 更新了该帖
JeffreyChen 在 2023-09-15 14:54:54 更新了该帖
JeffreyChen 在 2023-09-15 12:32:54 更新了该帖
50 悬赏
1 赞同
1 引用
4 操作
6 回帖
3
3
592 172 17 303 13 8 76

相关帖子

被采纳的回答
  • zxhd86 • • 1
    订阅者 先知

    回来测试了一下，列表块没影响，嵌入、超级、引述会有影响：

    图片.png

    改成这样就行了：

    /* 移动标题位置 CSS片段 */
.b3-typography>.h1,
.b3-typography>h1,
.b3-typography>.h2,
.b3-typography>h2,
.b3-typography>.h3,
.b3-typography>h3,
.b3-typography>.h4,
.b3-typography>h4,
.b3-typography>.h5,
.b3-typography>h5,
.b3-typography>.h6,
.b3-typography>h6,
.protyle-wysiwyg>.h1,
.protyle-wysiwyg>h1,
.protyle-wysiwyg>.h2,
.protyle-wysiwyg>h2,
.protyle-wysiwyg>.h3,
.protyle-wysiwyg>h3,
.protyle-wysiwyg>.h4,
.protyle-wysiwyg>h4,
.protyle-wysiwyg>.h5,
.protyle-wysiwyg>h5,
.protyle-wysiwyg>.h6,
.protyle-wysiwyg>h6 {
    margin-left: -20px; /* 负值可以根据需要进行调整 */
}
6 回帖
【代码片段】突出标题

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • JeffreyChen •
    付费者 支持者 捐赠者 作者

    我才刚刚自己写好，就看到你回答了。

    不过这个代码不起作用，移动的是文档标题。

  • 其他回帖
  • zxhd86 • • 1 评论
    订阅者 先知

    哦，原来你需要的是移动文档内部的小标题啊。

    那你这个 css 写的可能不完备了，思源的列表和其他容器块也能放标题的，这会导致标题跟其他元素重叠。

    只是从 css 中观察得出，没有实际复制使用，如果说的不对一笑而过吧

    暂时没发现问题，不过就算有问题，临时关掉代码片段就好了，还挺好用的
    JeffreyChen •
  • JeffreyChen •
    付费者 支持者 捐赠者 作者

    我现在用这个：

    /* 移动标题位置 CSS片段 */
.b3-typography .h1,
.b3-typography h1,
.b3-typography .h2,
.b3-typography h2,
.b3-typography .h3,
.b3-typography h3,
.b3-typography .h4,
.b3-typography h4,
.b3-typography .h5,
.b3-typography h5,
.b3-typography .h6,
.b3-typography h6,
.protyle-wysiwyg .h1,
.protyle-wysiwyg h1,
.protyle-wysiwyg .h2,
.protyle-wysiwyg h2,
.protyle-wysiwyg .h3,
.protyle-wysiwyg h3,
.protyle-wysiwyg .h4,
.protyle-wysiwyg h4,
.protyle-wysiwyg .h5,
.protyle-wysiwyg h5,
.protyle-wysiwyg .h6,
.protyle-wysiwyg h6 {
    margin-left: -20px; /* 负值可以根据需要进行调整 */
}
    1 回复
  • zxhd86 •
    订阅者 先知

    这个要求简单到我都怀疑自己是不是看错了需求……

    总之我试着回答吧：

    .protyle-content--transition .protyle-title {
    left: -40px;
}

    这个实际使用可能需要调小一点。

    2 回复
  • 查看全部回帖
JeffreyChen
思源笔记同步教程：ld246.com/article/1692089679062
回帖
4052
 帖子
112
 积分
3109

近期热议

推荐标签 标签

  • OnlyOffice
    4 引用 • 10 关注
  • MongoDB

    MongoDB（来自于英文单词“Humongous”，中文含义为“庞大”）是一个基于分布式文件存储的数据库，由 C++ 语言编写。旨在为应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。它支持的数据结构非常松散，是类似 JSON 的 BSON 格式，因此可以存储比较复杂的数据类型。

    90 引用 • 59 回帖
  • 书籍

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

    76 引用 • 390 回帖
  • 开源

    Open Source, Open Mind, Open Sight, Open Future!

    402 引用 • 3522 回帖
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库，强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery，是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 726 关注
  • uTools

    uTools 是一个极简、插件化、跨平台的现代桌面软件。通过自由选配丰富的插件，打造你得心应手的工具集合。

    5 引用 • 13 回帖 • 1 关注
  • PWA

    PWA（Progressive Web App）是 Google 在 2015 年提出、2016 年 6 月开始推广的项目。它结合了一系列现代 Web 技术，在网页应用中实现和原生应用相近的用户体验。

    14 引用 • 69 回帖 • 132 关注
  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统，主要使用于便携设备。2005 年由 Google 收购注资，并拉拢多家制造商组成开放手机联盟开发改良，逐渐扩展到到平板电脑及其他领域上。

    334 引用 • 323 回帖 • 18 关注
  • API

    应用程序编程接口（Application Programming Interface）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

    76 引用 • 429 回帖
  • 京东

    京东是中国最大的自营式电商企业，2015 年第一季度在中国自营式 B2C 电商市场的占有率为 56.3%。2014 年 5 月，京东在美国纳斯达克证券交易所正式挂牌上市（股票代码：JD），是中国第一个成功赴美上市的大型综合型电商平台，与腾讯、百度等中国互联网巨头共同跻身全球前十大互联网公司排行榜。

    14 引用 • 102 回帖 • 405 关注
  • 禅道

    禅道是一款国产的开源项目管理软件，她的核心管理思想基于敏捷方法 scrum，内置了产品管理和项目管理，同时又根据国内研发现状补充了测试管理、计划管理、发布管理、文档管理、事务管理等功能，在一个软件中就可以将软件研发中的需求、任务、bug、用例、计划、发布等要素有序的跟踪管理起来，完整地覆盖了项目管理的核心流程。

    6 引用 • 15 回帖 • 180 关注
  • Gzip

    gzip （GNU zip）是 GNU 自由软件的文件压缩程序。我们在 Linux 中经常会用到后缀为 .gz 的文件，它们就是 Gzip 格式的。现今已经成为互联网上使用非常普遍的一种数据压缩格式，或者说一种文件格式。

    9 引用 • 12 回帖 • 127 关注
  • Firefox

    Mozilla Firefox 中文俗称“火狐”（正式缩写为 Fx 或 fx，非正式缩写为 FF），是一个开源的网页浏览器，使用 Gecko 排版引擎，支持多种操作系统，如 Windows、OSX 及 Linux 等。

    7 引用 • 30 回帖 • 430 关注
  • Ruby

    Ruby 是一种开源的面向对象程序设计的服务器端脚本语言，在 20 世纪 90 年代中期由日本的松本行弘（まつもとゆきひろ/Yukihiro Matsumoto）设计并开发。在 Ruby 社区，松本也被称为马茨（Matz）。

    7 引用 • 31 回帖 • 196 关注
  • Laravel

    Laravel 是一套简洁、优雅的 PHP Web 开发框架。它采用 MVC 设计，是一款崇尚开发效率的全栈框架。

    19 引用 • 23 回帖 • 705 关注
  • OpenShift

    红帽提供的 PaaS 云，支持多种编程语言，为开发人员提供了更为灵活的框架、存储选择。

    14 引用 • 20 回帖 • 608 关注
  • 反馈

    Communication channel for makers and users.

    124 引用 • 907 回帖 • 225 关注
  • 服务器

    服务器，也称伺服器，是提供计算服务的设备。由于服务器需要响应服务请求，并进行处理，因此一般来说服务器应具备承担服务并且保障服务的能力。

    124 引用 • 580 回帖
  • Electron

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

    15 引用 • 136 回帖 • 3 关注
  • DNSPod

    DNSPod 建立于 2006 年 3 月份，是一款免费智能 DNS 产品。 DNSPod 可以为同时有电信、网通、教育网服务器的网站提供智能的解析，让电信用户访问电信的服务器，网通的用户访问网通的服务器，教育网的用户访问教育网的服务器，达到互联互通的效果。

    6 引用 • 26 回帖 • 529 关注
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言，是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3169 引用 • 8208 回帖 • 1 关注
  • wolai

    我来 wolai：不仅仅是未来的云端笔记！

    2 引用 • 14 回帖
  • 区块链

    区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。所谓共识机制是区块链系统中实现不同节点之间建立信任、获取权益的数学算法 。

    91 引用 • 751 回帖
  • 工具

    子曰：“工欲善其事，必先利其器。”

    281 引用 • 718 回帖 • 1 关注
  • 创造

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

    175 引用 • 994 回帖
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架，它对 JDBC 进行了非常轻量级的对象封装，使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 700 关注
  • SQLServer

    SQL Server 是由 [微软] 开发和推广的关系数据库管理系统（DBMS），它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的，并于 1988 年推出了第一个 OS/2 版本。

    19 引用 • 31 回帖 • 2 关注

最新标签