丰富的版面这样实现

作为小白,虽说的版面设计,直接写发出来就很好看,但是读友友的文章,发现人家文章的版面更丰富,阅读体验更好。

比如说有黑粗的文字,有灰色块的引用,还有文章中显示蓝色文字,点上去就会直接跳转到另一个地方等等。

那么它们是怎么实现的呢?其实也并不复杂,且听我一一道来。

前篇我们推荐用Markdown编辑器,我们就来看看它是如何方便地实现这些功能的吧!

1.突出几个黑体字

直接看图,对,就是这么简单,在markdown编辑器下,想加粗的文字,前后各加两个“*”,敲文字的时候直接敲上就好了。

2.文章中的灰色块引用

直接看图,对,也是就这么简单,在markdown编辑器下,直接敲上“>”就好了。

3.蓝色内容跳转链接

我们上一篇(《写诗词的友友看过来~~》)知道了插入图片的方法,那么再说插文字链接那就不是个事了。看图。

先打开你要插入的文章,点开右下角“分享”,再点最下行中间的“复制链接”。

分享
复制链接

关掉这篇,打开新文章,进入编辑状态,找到要插入的地方,选择输入框上面的编辑条中的链接符,在出现的提示框中输入内容后,按“确定”就可以了。

插入链接
输入链接名称
OK!

就这样,OK了!

似乎有点麻烦,不过个人觉得Markdown最方便的就是这个插入链接,只要文字和链接匹配好后,以后无论往哪里搬,都可以直接复制过去,不用再插入、再匹配。

有个小细节提醒下,如果是引用的文章,那么输入的时候直接敲上书名号比较简单,如果忘记敲了也没关系。

友友看看上图橙框圈起来的地方,是不是很眼熟啊?对,实际上跟插入图片一样的,只是插入图片前面有一个感叹号引导,而插入文字链接就不用这个感叹号了。

如果想修改链接说明,只需要修改中括号中的内容就可以了,完全可以在这里把书名号加上。

再啰嗦一下,markdown编辑器下,不论是文本还是图片,链接的表现形式是类似的。

!——引导图片,不出现文章中;
[]——文章中直接呈现的文字说明;
()——链接地址,不出现在文章中。

牢记!、[]、()三个符号,您也会插入好看的链接。

如果显示的与期待的不一样,检查!、[]、(),百分之九十九的可能,是这仨符号没用对。这三组字符都是英文输入状态下的半角,且“](”之间没空格。您要么不小心弄掉了,要么用全角了,要么有空格了。

4.大号字体、斜体、删除形式

大号字体

大号字体

大号字体

大号字体
大号字体

在文字前面直接敲“#”,“#”编辑条中间就有,很方便。#的个数越多,字号越小。

也可以二级菜单(点编辑条的“A”)里直接选H1、H2、H3、H4,自己觉得怎么方便怎么来吧!

自带编辑菜单

仔细看一下这个二级菜单,我们上边说的“加黑加粗”、“引用”,这里都可直接选,B对应****,点右双引号,这一段前直接加上了“>”

点第二个倾斜“I”,会出来一对“**”,中间输入要倾斜的文字就可以了。

同样,点第三个划杠的“S”,出来四条“水波浪”,中间输入需要删除效果的文字就可以了。

5.插入分隔线


直接点三个“-”(英文状态下减号),一级编辑菜单最右边有。

需要注意的是,三个“-”一定要与前段空一行,否则出来的是大黑体。

空行
OK
不空就是这样……

俗话说,磨刀不误砍柴工,花点时间,把这块琢磨清楚,长远看,绝对是赚到了。

祝友友们:赚效率的高效率,赚完美的极完美,赚钻的钻多多~~~

推荐阅读:
《写诗词的友友看过来~~》

你可能感兴趣的:(丰富的版面这样实现)