最近在做 前端面试每日3+1 的开源项目,还想着怎么排版才美观呢,不巧,正好在掘金上看到的几篇文章排版都很好看。
例如,刘小夕小姐姐写的这篇文章 “这儿有20道大厂面试题等你查收”,她就是使用了HTML5的details和summary这两个标签,刚好掘金支持这种语法,不得不说掘金这方面比简书做得还好!
先上效果图:
折叠效果
折叠文本
这是我用来演示的内容...
折叠代码 —— 效果1
console.log('折叠代码 —— 效果1,使用了pre和code标签');
折叠代码 —— 效果2
console.log('折叠代码 —— 效果2,使用了pre和blockcode标签');
代码如下:
<details>
<summary>折叠文本</summary>
这是我用来演示的内容...
</details>
<details>
<summary>折叠代码 ——— 效果1</summary>
<pre><code>
console.log('折叠代码 ——— 效果1,使用了pre和code标签');
</code></pre>
</details>
<details>
<summary>折叠代码 ——— 效果2</summary>
<pre><blockcode>
console.log('折叠代码 ——— 效果2,使用了pre和blockcode标签');
</blockcode></pre>
</details>
文字颜色效果
大家可能注意到了,标题是有颜色的,大家知道markdown里有些是支持Html的,刚好掘金也支持font标签,这就能达到效果了。
1. 写一个字符串重复的repeat函数
代码如下:
<h3>
<font style="font-weight: bold" color="#FF8077">
1. 写一个字符串重复的repeat函数
</font>
</h3>
灵活运用这些小技巧,可以使页面排版更美观。