发文效率提升300%的保姆级教程，手把手教你利用Typra配置六大图床，码文无缝衔接

创作立场声明：本文首发于什么值得买。使用经验分享，希望能对你有所帮助，有问题欢迎指正，期待深入交流~~

写在前面

还在为排版而痛不欲生？

还在一个一个的添加标题？

还在一张一张的给文章配图？

是不是写文章都没有欲望了？

上篇文章写的是 Markdown 语言和 Markdown here渲染，也就是已经有一篇文章之后如何实现最终效果。这些是不错的一些渲染效果，供大家选择。

张大妈排版神技~吐血分享—再谈Markdown here CSS 渲染及全套分享，伸手党福音~11月26日-12月24日，分享我的知识地图，千元京东e卡等你来拿！参与#我的知识地图#征稿活动，发文就有100金币，千元京东卡等你来拿！点击查看活动详情。值友的理想生活栏目已上线，点击查看值友们缤纷的理想生活。「活动由京东商城冠名」创作立场声明：**创作立场声明：本文首发于什么值得买。使用经验分享纵笔浮生| 赞31 评论7 收藏221查看详情

本文书接上回，接着解决下面这些问题：

• 实现像写word一样写文章，最后还能获得Markdown 代码文本。

• 拖拽插入图片，后面样式化时可以直接拉取图片到富文本编辑器。

本文重点讲的软件就是Typora，神一样的软件，没有之一。

Typora是一款支持实时预览的 Markdown 文本编辑器，简单来说就是富文本编辑和markdown语言都可以。有 OS X、Windows、Linux 三个平台的版本，是完全免费的A truly minimal markdown editor。Typora官方下载

1.像word一样书写Markdown

首先，选用这款编辑器最大的原因是人性化，用着超级舒服。

其次，操作方便，就是不会markdown语言也能按照word的方式进行书写。

一般 Markdown 编辑器界面都是两个窗口，左边是 Markdown 源码，右边是效果预览。有时一边写源码，一边看效果，割裂感很强。

Typora将预览框和编辑框整合在一起，在同一个界面 可以实时的看到渲染效果，所见即所得。

比如下面这个图默认模式下，是显示富文本模式的，就是渲染后的效果。

也可以查看源代码模式：

会自动识别为预览模式，可以看到实际渲染的效果。 也就是说一次编辑可以同时得到markdown语言的文本和富文本模式的文本。

很多朋友好奇了，虽然是富文本格式但是看不到富文本编辑器的工具栏，大部分常用的设置，通过右键设置。

全部的功能在上方的『段落』和『格式』选项内设置，为何不设置工具栏的原因是，很多快捷操作可以通过键盘来实现。下面看下如何通过快捷键来设置格式。

2.快速设置格式

①标题设置

标题在Markdown内是通过#+空格，来控制的，#+空格是一级标题，##+空格是二级标题，以此类推，Markdown下增加标题，可以通过输入实现，也可以通过快捷键设置。

用过很多markdown编辑器，Typora通过快捷键设置标题这一手，是最漂亮，效率最高的。选中文字，ctrl+数字可以实现标题快速设置。

• ctrl+1就是一级标题

• ctrl+2就是二级标题

• ctrl+3就是三级标题

• ctrl+4就是三级标题

• ctrl+0就是段落（正文格式）

• ctrl+= 标题升级（用的比较少，大部分通过ctrl+数字调整）

• ctrl+- 标题降级（用的比较少，大部分通过ctrl+数字调整）

注意敲重点：

张大妈的目录中的一级标题对应的是Markdown语言中的二级标题，只有二级标题能在值得买平台文章的目录中显示，所以在码文的时候直接从二级标题开始设置。

②其他格式

我们原来在使用word时候记住的快捷键仍然是通用的，比如：

CTRL+B 加粗

ctrl+I 斜体

ctrl+U 下划线

ctrl+K 超链接

ctrl+ 清除样式

ctrl+shift+Q 引用

ctrl+shift+[ 有序列表

ctrl+shift+] 无序列表

ctrl+Z 撤回（返回上一步）

ctrl+F 查找

ctrl+H 替换

alt+shift+5 删除线

重点来了：

ctrl+K 超链接设置，这个快捷键超级方便的，在码文的时候经常需要设置超链接，或者取消超链接，都是通过这个组合键来实现，选中超链接或者把光标放到超链接上，按下ctrl+K 超链接取消。

设置超链接，复制网址之后，回到Typora内选中文字，然后同时按下ctrl+K，就会自动设置好超链接。

3.拖拽上传图片

图片排版最痛苦的就是上传图片了。各个自媒体平台的编辑器至今仍然是富文本编辑器，虽然是可视化操作，但是效率不高，尤其是插入图片功能就显得有点麻烦了。

插入图片，需要打开插入功能，选择图片，然后上传。经常写一篇文章要插入几十张照片，甚至上百张，一个动作要反复重复，并且容易打断思路。

①支持直接拖拽上传，插入到文章里。

②支持粘贴板直接粘贴，插入到文章里。平时我们截图软件，截图后会保留在粘贴板内，只要在Typora粘贴就可以插入到文章里了。

这里懒得录屏了，就找个官方的图片感受下效果：

上面两个方法，插入图片，只是把图片插入到文章，但是图片还是在本地，没有上传到图床，如果平时自己写点小文章，总结，可以使用

在『文件』——『偏好设置』——『图像』，可以设置图像保存的地址，如果本地应用，只要设置把文章图片统一放到一个文件夹就OK了。，如果想在平台发布，还需要上传到图床。这部分放到图床配置那里再说。

4.添加表格

富文本编辑框下，是一般是无法添加表格的，利用markdown语言可以实现表格的效果，尤其是写作清单类的文章，需要添加链接，加入表格可以使文章可读性更高。

右击——『插入表格』，弹出表格插入对话框，和word使用方法差不多，设置几行几列。

在表格上右击，选择表格就可以进行基本设置了。输入内容和word相似。

5.大纲视图

此功能也是很方便的一个功能，可以随着写作随时查看文章结构。

一二三级标题都可以看到，可以及时调整文章目录和写作思路。

遗憾的是不能像word一样拖动大纲调整文字顺序，不过可以快速定位和查看文档结构就够用了。

6.自定义主题

主题模式是可以直接下载（官方地址）和自定义的。这个主题相当于皮肤的功能，在这里写完的只是Markdown纯代码文本，配合上篇文章里用Markdown here 做CSS渲染之后才可以产生想要的效果。

①安装主题

主题文件夹可以在文件——偏好设置内——外观内设置打开。

在主题地址]下载主题之后，解压然后复制到主题文件夹即可。没有任何难度。

安装完成后，在主题工具栏，就可以随意切换了。

②自定义主题

为了方便的观看，将来产生的效果，建议大家把自己将要渲染的效果，做成主题效果，这样可以随时观看到自己文章的最终效果。

把上文中的markdown here css代码放到TXT文件中，然后修改后缀名为.css，然后复制到这个文件夹中就可以使用了。想用什么视图格式可以自己进行调校。也可以借助这种方式，对调校的CSS代码进行初步效果验证。

主题如果未显示在主题菜单栏中，或者选择后未更新主题。原因可能是.CSS文件名包含大写字符或空格。请更改为小写 + 连字符，例如my-typora-theme.css。

敲重点：修改现有主题（修改前一定记得备份，世上没有后悔药，搞坏了，得重新折腾）

简而言之，如果主题是自己创建的，则可以直接对其进行修改。前面讲过后缀名字改成了.CSS，依然可以用txt打开进行修改，修改的方法和CC渲染代码是一样的，代码的效果的解读参照上一篇。

可以在这里对段落、字体大小间距，段距、段落方式进行修改

这里可以修改标题的格式，以匹配自己的写作和阅读习惯。

如果主题是 Typora 内置的，或者是从网站下载的，如果要修改，建议最好在附件上修改，然后再重命名一个文件，当打字错误或主题文件更新时，这些文件将不会被覆盖。可以将修改内容放入：

• base.user.css 在主题文件夹下，其中的 css 规则将应用于所有主题。

• {theme-css-name}.user.css，则其中的 css 规则将仅应用于主题文件{theme-css-name}.css。

• 如果文件夹不存在可以自行创建，添加自定义 CSS。

7.安装Pandoc导入导出文件

导入文件就比较简单了，可以通过导入，快速生成文章，也可以通过复制粘贴来实现，这个就不多多说了。

平常写完之后是可以导出pdf和html格式，但是要导出某docx，odt，rtf，epub，LaTeX和Wiki就需要安装Pandoc支持。安装Pandoc之后，您可以通过从菜单栏中单击“文件”->“导入”来导入支持的文件类型，或者直接将文件拖放到Typora中。

Pandoc支持导入的文件有下面这些类型：

.docx

.latex

.tex

.pdf

.ltx

.HTML

.rst

.rest

.org

.wiki

.dokuwiki

.textile

.opml

.epub

最重用的类型就是.docx；.HTML；.pdf；.epub。

• .docx：导出的word格式是不带渲染的，但是带图片

• .pdf：格式是带渲染的，当前主题（皮肤）下设定好的效果

• .HTML：格式是带渲染的，当前主题（皮肤）下设定好的效果

epub：是电子书格式，是不是忽然发现，竟然还可以通过typora制作电子书，然后导入kindle阅读。

安装方法：

在Typora中，某些文件格式（包括docx，odt，rtf，epub，LaTeX和Wiki）的导入和导出功能由名为Pandoc的第三方软件提供支持。这些功能需要安装Pandoc（≥v1.16）。Pandoc的安装是可选的，如果不需要Typora中的高级导入/导出支持，则不必在计算机上安装Pandoc。安装和使用Pandoc参考方法

五、图床配置

先把各图床配置代码使用的名称放到这里，下面使用命令行上传图片的时候会用到。

• smms -> SM.MS

• tcyun -> 腾讯云COS

• upyun -> 又拍云

• aliyun -> 阿里云OSS

• qiniu -> 七牛云

• imgur -> Imgur

• weibo -> 微博图床

• github -> GitHub

拟实现的效果：

上面讲过了拖拽插入图片，但是图片是存在本地的，无法被平台富文本编辑器读取。下面这样，插入的图片保存在本地：

复制上面的文章到张大妈的富文本编辑框，发现图片没有被上传，也就是说图片存在本地，张大妈的编辑框是无法拉取图片到张大妈的服务器的。

我们开启上传图片功能：

图片的链接变成了网络图片：

再复制粘贴到张大妈文本框，就可以看到正在拉取图片：

图片拉取成功，且自动上传到平台了。

简单解释下图床

图床就是一个第三方存储图片的地方，借助 typora图床功能，我们可以实现将图片拖拽或者粘贴到文章中，可以直接返回图片的URL，并且自动生成markdown格式文本，这样就大大简化了图片的上传和设置。

常用的图床有七牛云、SM.MS、腾讯云、阿里云等等。七牛云和SM.MS。

typora配置前准备

1.确保 typora 的版本在 0.9.86 以上，这个版本开始增加了图片同步返回功能。

从下图看看出，当插入图片我们选择上传功能后，上传服务设定出现了PigGo-Core（command line）、PigGo（app）和Custom command三种上传模式。 上次有一期文章文章讲到过了如何使用PigGo-Core（command line）上传，很多小伙伴对这个代码设置，使用起来感觉比较繁琐。这一期在回顾命令行上传的同时，补上PigGo（app）上传设置。

PigGo（app）支持如下图床：

• 七牛图床 v1.0

• 腾讯云

• 又拍云

• GitHub

• SM.MS V2

• 阿里云 OSS

• Imgur

PigGo（app）上传就十分简单了，采用可视化设置，配置很简单，使用很方便。

1.首先安装PicGo软件

下载软件，也可以去PicGo官网可以去了解下基本功能，打开PicGo下载地址下载软件，虽然tpora内置了picgo下载，建议还是下载一个独立版本。

下载下来，安装：

无脑点击安装前，记住这个安装地址：

配置路径：

打开typora的偏好设置，选择上传图片。

对网络位置的图片应用上述规则，这里不要勾选，因为我们后面会把图片传到张大妈服务器后，再复制回来进行二次排版，勾选这个功能，会把张大妈服务器的图片再次传到图床里面。

选择PigGo（app）：

然后配置路径，点边上黑色的小文件夹选项，在电脑里找到刚才安装的位置，选择picgo程序就可以啦。

到这里Typora的配置暂告一个段落，进入PicGO内部配置。

配置PicGo

打开PicGo，图床选择七牛图床，可以看到要这些参数，带着这些问题进行下一步：

2.七牛图床配置

①七牛云优点

七牛云存储，是需要一定门槛的，就是需要有自己的域名，现在申请一个域名也是比较简单的，七牛云是不提供域名的，且要求必须绑定域名才可以使用，为了码文的方便快捷，注册一个域名还是很有必要的。

值得买平台上经常有大神科普免费得域名的方法，搞个垃圾的域名，能用就可以了，要求不高。

七牛云是性价比最高的，认证用户十每个月10G免费存储空间，下载流量10G，用于码文的过程中过渡一下当图床，足够用了，如果这个不够用了，再注册一个七牛云账户用就好了。

关于存储空间方面10G也是够用的，七牛云的照片经过七牛云的瘦身只有几百kB，图片瘦身费用也是比较划算的，一千次一毛钱，随便往里面存入几块钱就够用了。

懒得注册的话，费用也可以接受的，毕竟带来很多方便，节省下来的时间和精力多码几篇文章就出来了。

标准存储费用：

标准存储，前10G是免费的，从第二个 10 GB 开始计算费用，10G至 1 TB区间，价格是0.145元/GB/月，对于图片来说，100G足够用了，用到100G也就14.5元/月。

②七牛云的PigGo（App）配置

准备工作，注册七牛云账号，并实名认证，这个实名验证非常快，大概是机器识别做的验证。访问链接。

点击首页的对象管理，新建空间：

这里注意下自己选过的存储区域，以及对应的地域简称。在配置文件里，存储区域对应的键是area，值是下图所示，比如华东的话就是z0。

在存储空间里可以看到这些信息，留到下面配置使用：

设定上传地址是自己绑定的域名，注意要加http://或者https://

域名在绑定时候需要配置域名的 CNAME，具体可以参考这里，如何配置域名的 CNAME

对应的密钥信息需要到七牛自己的控制台里找到，鼠标选择人头，选择密钥管理：

然后在密钥管理中可以找到AK和SK。AccessKey/SecretKey，复制出来，没有的话点击创建一个密钥。

将上面这些信息填入对应的窗口，点击确定，并设置为默认图床：

回到Typora里打开偏好设置——图像，测试一下，配置成功了，可以直接使用插图了。

记得打开一个功能：时间戳重命名，上传图片久了之后，难免会遇到重名的文件，打开此功能，会自动重命名，避免还需要自己手动改名的情况。

③七牛云的PigGo-Core配置

七牛云还有一种配置方式就是PigGo-Core（command line），在Typora里打开偏好设置——图像——选择PigGo-Core（command line），打开配置文件。

把下面这段代码复制到配置文件内，我们对照参数开始配置：

{

“picBed”: {

“uploader”: “qiniu”,

“qiniu”: {

“accessKey”: “”,

“secretKey”: “”,

“bucket”: “”, // 存储空间名

“url”: “”, // 自定义域名

“area”: “z0” | “z1” | “z2” | “na0” | “as0”, // 存储区域编号

“options”: “”, // 网址后缀，比如?imgslim

“path”: “” // 自定义存储路径，比如img/

}

},

“picgoPlugins”: {}

}

在配置文件里，存储区域对应的键是area，比如华东的话就是z0，华北z1，华南z2，北美na0，东南亚as0。

点开 typora，验证图片上传功能。当看到下面的页面的时候，就已经配置成功了。可以直接拖拽照片直接插入了。

Typora在插入时自动上传图像（包括从菜单，触摸栏，通过复制和粘贴或拖放插入图像），要启用此功能，请在“插入时…”下选择“上传图像”。

小结：整个流程下来七牛云两种配置方式就介绍完了，PigGo-Core（command line）和PigGo（App）配置两者的区别是，前一种不需要保持开启PigGo，因为采用代码配置可能比较麻烦容易失败。后一种配置方式需要保持开启PigGo，配置简单。

2.sm.ms图床配置

①sm.ms的PigGo(App)配置

sm.ms图床也是使用比较多的图床。免费的还算良心，5G的自由存储空间，每个文件最大5 MB，每分钟最多上传20张，每小时限制100，每天限制200张上传量，每周限制500张，勉强够用。

好处是不需要个人域名，这样用起来算是门槛比较低了。对于码文来说勉强够用，如果存储量快满了，就要及时清理。

配置比较简单，只要修改一个API密钥就可以了：密钥后台

只要将API密钥复制过来就可以使用了，设置成默认图床，typora就可以自动切换了，所以每次都要在PigGo里设置默认图床，typora才会切换。

插入图片之后看到自动返回了了网页地址，并转译成了markdown语言。

在图床后台也看到了刚才我们插入的图片。

②sm.ms的PigGo-Core配置

还是参照上面七牛图床的配置方法，在配置文件里面将”token”替换掉就可以了。

{

“picBed”: {

“uploader”: “smms”, // 代表当前的默认上传图床为 SM.MS,

“smms”: {

“token”: “输入你的token” //一定要换这里面的token换成你上个页面的申请的token

}

},

“picgoPlugins”: {} // 为插件预留

}

测试完成

3.腾讯云配置

①腾讯云的PigGo（App）配置

腾讯云不需要个人域名就可以使用的，一般的配置需要下面这些参数值：

在API密钥管理按照对应的提示找到自己的SecretId、SecretKey、APPID，登录腾讯云控制台，打开密钥管理，就可以看到了，复制出来。

在存储桶列表可以找到存储的空间名和所属区域，比如这个属于南京，ap-nanjing

在配置页面输入这些信息就可以了：

验证一下，图片上传成功。

图片上传成功了。

可以看到腾讯云服务器里也有了这张图片。

②腾讯云的PigGo-Core配置

腾讯云的PigGo-Core（command line）配置和上面的差不多，打开偏好设置 ，这里更改之前一定要把前面配置好的配置备份。

先把下面的这些代码复制到配置文件内，如果有空白行，可以删掉

{

“picBed”: {

“uploader”: “tcyun”, // 代表当前的默认上传图床为腾讯云,

“tcyun”: {

“secretId”: “”,

“secretKey”: “”,

“bucket”: “”, // 存储名，v4 和 v5 版本不一样

“appId”: “”,

“area”: “”, // 存储区域，例如 ap-beijing-1

“path”: “”, // 自定义存储路径，比如 img/

“customUrl”: “”, // 自定义域名，注意要加 http://或者 https://

“version”: “v5” | “v4” // COS 版本，v4 或者 v5

}

},

“picgoPlugins”: {} // 为插件预留

}

对照上面App设置里面，把对应参数保存就可以了。

③腾讯云的费用

打开费用地址，看下腾讯云大概的费用：

30G的存储量15.24元，下面都选择10够用的，如果下面用不了这么多可以再精简。价格还是蛮划算的，不需要个人域名，每个月多码一篇文章差不多可以回本了，带来的好处就是可以摆脱一张一张传图了。

4.aliyun（阿里云）配置

①阿里云的PigGo（App）配置

先看下阿里云需要哪里参数：

支付宝扫码注册，直接进入控制台，首先在阿里云OSS的控制台里找到你的accessKeyId和accessKeySecret：

进入控制台，

创建存储区域，创建Bucket：

可以看到这个zbfs就是存储空间名：

确认存储区域的代码：

验证成功。

上传测试：

可以看到图片已经上传上来了。

②阿里云的PigGo-Core配置

打开typora的配置文件：

复制下面代码到上面配置文件里：

{

“picBed”: {

“uploader”: “aliyun”,

“aliyun”: {

“accessKeyId”: “”,

“accessKeySecret”: “”,

“bucket”: “”, // 存储空间名

“area”: “”, // 存储区域代号

“path”: “”, // 自定义存储路径

“customUrl”: “”, // 自定义域名，注意要加 http://或者 https://

“options”: “” // 针对图片的一些后缀处理参数 PicGo 2.2.0+ PicGo-Core 1.4.0+

}

},

“picgoPlugins”: {}

}

对照填写参数：

验证完成，阿里云配置完成。

③阿里云费用

对象存储 OSS 详细价格信息，阿里云暂时没有OSS存储计算器，从价格信息表估算一下使用成本：

10G的流量，使用费用大概在12.72元/月，30G的流量费用在15.12元/月。这个只是作为图片拉取的费用来说的，如果外网流出量不足5G的话，大概还能节省2.5元/月，也算是不错了，一个月十块钱左右。

• 内网流出流量（通过同地域ECS使用内网Endpoint，下载OSS的数据）

• 内/外网流入流量（数据上传到OSS）

5.github配置

先先注册个github

建个仓库，官方地址。在任何页面的右上角，使用 下拉菜单选择 New repository（新建仓库）

记下你取的仓库名。

生成一个token，也就是设置访问令牌，

全选就行了。

①github的PigGo（App）配置

把刚才的这些复制进去。

仓库名的格式是用户名/仓库，比如我创建了一个叫做zbfs的仓库，在PicGo里我要设定的仓库名就是用户名/仓库名。一般我们选择main分支即可。然后记得点击确定以生效，然后可以点击设为默认图床来确保上传的图床是GitHub。

验证生效了

②github的PigGo-Core配置

复制下面代码，到配置表，填写参数：

{

“picBed”: {

“uploader”: “github”,

“github”: {

“repo”: “”, // 仓库名，格式是username/reponame

“token”: “”, // github token

“path”: “”, // 自定义存储路径，比如img/

“customUrl”: “”, // 自定义域名，注意要加http://或者https://

“branch”: “” // 分支名，默认是main

}

},

“picgoPlugins”: {}

}

测试成功：

上传成功：

6.Imgur 的相关配置

Imgur因为需要设置代理比较麻烦，不具有通用性，换电脑了还需要设置，就不推荐了，图床的设置也是挺简单的，感兴趣的朋友自己操作下。

①Imgur 的PigGo（App）配置

②Imgur 的PigGo-Core代码

{

“picBed”: {

“uploader”: “Imgur”,

“Imgur”: {

“clientId”: “”, // imgur 的 clientId

“proxy”: “” // 代理地址，仅支持 http 代理

}

},

“picgoPlugins”: {}

}

六.发文流程

上面看到各个图床流量还是需要费用的，一定不要发布文章直接转换带图床链接的文章，这样发出去，会读取你图床里的图片，按流量收费，一篇火爆的文章，图床流量费用得几百元，别问怎么知道的。

图床作为只是用图床作为一个过渡，这样文章写好之后，复制文章到张大妈的编辑器进行内容图片拉取，拉取图片的这点流量还是不多的。

我们先找一篇已经书写好了的文章，演示下发文流程:

以这篇写好的Markdown文章为例，可以看到里面的图片还都是图床地址，且没有添加水印：

直接ctrl+a全选，复制

到张大妈富文本编辑框内粘贴，可以看到值得买的编辑框在拉取图片了：

拉取完成，可以看到图片已经被上传了，且被打上了值得吗logo。现在看文字是没有任何格式的。

在Typora新建一个文档，把张大妈富文本里的图片复制粘贴回来，图片已经变成了张大妈服务器上的图片，我们这时候再重新排版，里面的空白行不用管的，在渲染的时候会自动忽略空白行，如果有强迫症可以顺手删掉。

划重点：

下面中扩号内黄色高亮的地方是，发文后图片下面的备注名字，里面的img要全部删掉，或者替换成自己想添加的图片备注。一般情况下是删掉的。

直接用ctrl+H替换掉就可以了，在Typora按下ctrl+H，调出替换对话框，输入输入![img]，替换为![]。

这样所有图片的备注就完全被替换掉了，如果想单独给图片添加备注，直接在中括号内输入备注信息就可以了。

完成排版之后，可以再大纲里面看到文章的目录，这个目录渲染后会被值得买识别，变成文章目录。前面讲过了，值得买平台识别的目录从二级目录开始，我们设置的目录也要从二级目录开始。

切换到代码模式，复制代码：

再到张大妈富文本编辑器内粘贴：

右击选择Markdown转换：

转换完成。

然后把商品插入成卡片就可以了

七.文章同步

正常情况下，文章保存在这里的。

也可以自定义文件夹。

要是想实现同步功能，只要把两个文件夹同步就行了，上面我们说到过，一个是主题文件夹，一个是文章存储文件，这样就可以再不同设备实现码字的无缝衔接了。

下面是调教过的CSS渲染代买，可以根据上篇自行设置格式，直接用也可以。

.markdown-here-wrapper { /*Markdown Here 的全局配置，没有默认值*/

font-size: 14px; /*字号em默认是相对16px的大小，也可直接用px作单位*/

line-height:28px; /*行间距，可用百分比，数值倍数，像素设置，还包括text-indent缩进、letter-spacing字间距*/

word-spacing: 1px; /*字间距*/

letter-spacing: 1px; /*字母间距*/

margin: 0 3px 14px 3px;

}

pre, code {/*pre和code用于代码显示，code通常以元素框即代码块显示，pre则只保留代码中的空格与换行符*/

font-size: 14px; /*代码字体*/

font-family: Avenir, "PingFangSC-Light";

margin: auto 5px;

}

code { /*标签通常只是把文本变成 等宽字体*/

white-space:nowrap; /*如何处理元素内空白行，回车or忽略,nowrap不换行，pre-wrap换行*/

border: 1px solid #EAEAEA; /*边框，用于设置边框属性，1px为边线尺寸，solid意为实线，#EAEAEA为边框颜色*/

border-radius: 2px; /*给 div 元素添加圆角的边框*/

display: inline;/*inline 表示按照内联模式显示，它会和周围的元素在一行。如果是 display:block, 它会和周围的元素不在一行，自己单独一行。*/

}

pre { /*严格限制为等宽字体格式*/

font-size: 18px;

line-height: 1.4em; /*行高*/

display: block !important;

}

pre code {

white-space: pre;

overflow: auto;

border-radius: 3px;

padding: 1px 1px;

display: block !important;

}

strong, b{ /*strong 加粗，用粗体显示，也可以自定义自己的强调方式 */

color:#BF360C !important;

font-size:15px !important;

}

em, i { /*斜体*/

color: #BF360C !important;

}

hr { /*分割线*/

border: 0px dotted#BF360C; /*双跟分割线 粗细，solid颜色 #a5a5a5 */

border-top:1px dotted#BF360C !important;/*上分割线 粗细，颜色#ddd跟随主设定，solid类型-不写是跟随标题主色，替换了显示新颜色 */

border-bottom:0px dotted#BF360C !important ; /* 下分割线，粗细solid类型-不写是空心，颜色 */

margin:10px 0 10px 0 !important; /*外边距*/

}

a:link { /* 未被访问的链接 */

color:#009688 !important; /*颜色*/

font-style:normal !important; /*字重*/

}

a:visited {/* 已被访问的链接 */

color:#009688 !important; /*颜色*/

font-style:normal !important; /*字重*/

}

a:hover {/* 鼠标指针移动到链接上 */

color:#009688 !important; /*颜色*/

font-style:normal !important; /*字重*/

}

/*段落设置，内边距用padding*/

p {

font-family: Avenir, "PingFangSC-Light" !important;

padding: 0 0 !important;

text-align: justify !important;

font-size: 15px !important;

text-indent:0; /*首行缩进*/

}

table, pre, dl, blockquote, q, ul, ol { /*表格、预格式化、定义列表、块引用、短引用、无序列表、有序列表统一设置*/

margin: 10px 5px;

}

ul, ol { /*无序、有序列表通用设置*/

padding-left: 15px;

font-family: Avenir, "PingFangSC-Light" !important;

text-align: justify !important;

font-size: 14px !important;

}

li { /*列表中项目的设置*/

margin: 10px;

}

li p { /*列表中项目的段落的设置*/

margin: 10px 0 !important;

}

ul ul, ul ol, ol ul, ol ol {/*有序列表、无序列表的统一设置*/

margin: 0;

padding-left: 10px;

}

ul { /*无序列表的前缀，circle,square,好多种,同样有序列表ol也可以设置不同的标记*/

list-style-type: circle;

}

dl { /*自定义列表的设置*/

padding: 0;

}

dl dt { /*自定义列表项的设置*/

font-size: 14px;

font-weight: bold; /*字重*/

font-style: italic; /*字形*/

}

dl dd {

margin: 0 0 10px;

padding: 0 10px;

}

blockquote, q { /*引用块设置*/

border-left: 2px solid #BF360C;

padding: 0 10px;

color: #777;

quotes: none;

margin-left: 1em;

}

blockquote::before, blockquote::after, q::before, q::after {

content: none;

}

/*各级标题统一设置*/

h1, h2, h3, h4, h5, h6 {

margin: 7px 0 7px 0; /*段前后、左右缩进值*/

padding:5px 0 5px 0;/*内边距,控制和黑线的距离第一个数控制和上划线的距离.上右下左,留白距离、缩进值*/

font-style: bold !important;

color: #BF360C !important;

}

h1 {

font-size:16px !important;

color:#BF360C !important;/*颜色*/

text-align:center !important; /*标题位置,center,right,left*/

font-weight:bolder !important; /*字重bold加粗 、 normal正常、bolder更粗*/

letter-spacing: 3px !important;

border:2px solid #BF360C !important; /* 边框样式 */

}

h2 {

font-size:16px !important;

margin-top:3px 0 !important;

padding: 3px 15px !important;

text-align:center !important; /*标题位置,center,right,left*/

background-color: #BF360C !important;

color: white !important; /*颜色*/

font-weight:bolder !important; /*字重bold加粗 、normal正常、bolder更粗*/

letter-spacing: 3px !important;

font-variant: normal !important;/*normal 、small-caps*/

border-top:0 solid#BF360C !important;/* 粗细，颜色#ddd跟随主设定，solid类型-不写是跟随标题主色，替换了显示新颜色 */

border-bottom:0 solid#BF360C !important ; /* 粗细solid类型-不写是空心，颜色 */

}

h3 {

font-size:15px !important;

color:#BF360C !important;

padding: 5px 0 !important;

text-align:left !important; /*标题位置,center,right,left*/

width:auto !important;

padding:0 auto !important;

}

h4 {

font-size: 14px !important;

text-align:left !important; /*标题位置,center,right,left,justify*/

color:#BF360C !important;

padding: 0 0 0 7px !important;

border:1px dotted #BF360C !important;

font-weight:normal !important; /*字重*/

}

h5 {

font-size: 14px !important;

text-align:left !important; /*标题位置,center,right,left,justify*/

color:#BF360C !important;

padding: 0 0 0 7px !important;

border:1px solid #BF360C !important;

font-weight:normal !important; /*字重*/

}

h6 {

font-size: 14px;

color:white !important; /*颜色*/

font-style:normal !important; /*字重*/

padding: 0 0 0 7px !important;

background-color: #BF360C !important;

font-weight:normal !important; /*字重*/

}

table { /*表格元素的设置*/

padding: 0;

border-collapse: collapse;

border-spacing: 0;

font-size: 1em;

font: inherit;

border: 0;

margin: 0 auto;

}

tbody { /*表格主题的设置*/

margin: 0;

padding: 0;

border: 0;

}

table tr {

border: 0;

border-top: 1px solid #CCC;

background-color: white;

margin: 0;

padding: 0;

}

table tr:nth-child(2n) {

background-color: #F8F8F8; /*背景色*/

}

table tr th, table tr td { /*tr为行标签、th为表头单元格标签、td为普通单元格标签*/

font-size: 16px;

border: 1px solid #CCC;

margin: 0;

padding: 5px 10px;

}

table tr th {

font-weight: bold;

color: #eee;

border: 1px solid #BF360C; /*表头边框色*/

background-color: #BF360C; /*表头背景色*/

}

总结

好了，到此，这就是本文的全部内容了！整整测试了两天时间，

如果您觉得文章写的还不错的话，点赞、收藏、评论一条龙！

感谢大家的观看，我们下次再见！

往期热文推荐

自带黑科技！西门子热销家电深度盘点，速来抄作业创作立场声明：本文首发于什么值得买。使用经验分享，希望能对你有所帮助，有问题欢迎指正，期待深入交流~~一、前言白色家电作为减轻居家劳动强度的日常电器，与生活息息相关。生活是否高效、方便、舒适，很大程度取决于选择什么样的家电。家电选不好，劳动强度自然就上来了，像冰箱、洗衣机、燃气灶具等等都需要长时间工纵笔浮生| 赞78 评论33 收藏561查看详情

始于颜值、忠于体验—不容错过的13款家电，能够帮你解决11大家庭难题~年终将至，对于今年入手的家电大家多少都会有自己的使用感想，欢迎分享你心中的年度最佳电器，参与#2020年度家电盘点#活动，还能赢大额京东E卡，还不快来～创作立场声明：**声明：**本文首发于什么值得买，且文章内参与出场产品皆为自费购入，所推荐商品皆是使用后的真实感受，绝对不是云测评，文章图片皆本人所纵笔浮生| 赞4 评论3 收藏10查看详情

关键时刻能派上大用场的『神级网站』，岂能轻示于人？——2020年实用、有趣的网站吐血大汇总创作立场声明：两年以来收藏夹内整理的精华，强烈推荐收藏。本文首发于什么值得买。坚持独立的评价观点是笔者的底线，绝对不会因来源而有失偏颇，各位观众放心食用，然而每个人的观点、立场可能不同，有问题欢迎指正，期待深入交流~~【啰嗦几句】前面写过几期关于良心网站的推荐，可能看到好的网站就分享了，做得比较杂乱纵笔浮生| 赞1k 评论154 收藏14k查看详情