阅读 1564

分享几个掘金专栏文章布局的小技巧

越来越多的人开始使用掘金专栏写博客,分享技术。我们知道掘金的文章编辑工具是支持markdown语法的,并且还与实时预览。可以说是一款非常强大的编辑工具了。但是,它还有另外一个强大的能力可能很多人不知道,那就是还支持html标签,或者说是没有过滤html标签~。

这意味着,掘金专栏的文章布局拥有无限的可能。

1. 修改字体颜色,大小,行高,字间距等。

我就是我,是颜色不一样的烟火

<span style="color: orange">我就是我,是颜色不一样的烟火</span>复制代码

天空海阔,要做坚强的泡沫

<p style="color: #ffe100; font-size: 30px; margin: 20px 0">天空海阔,要做坚强的泡沫</p>复制代码

2. 图片处理,可以自定义宽高。

<img width="300" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1491240132246&di=b6e11e9e1d56ca5dea76f8c5120d30eb&imgtype=0&src=http%3A%2F%2Fa4.att.hudong.com%2F38%2F47%2F19300001391844134804474917734_950.png">复制代码

3. 利用iframe引入外部demo,让你的文章可读性更高。

<iframe height='265' scrolling='no' title='Hi!' src='//codepen.io/elizaknep/embed/xqMzgd/?height=265&theme-id=0&default-tab=html,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='http://codepen.io/elizaknep/pen/xqMzgd/'>Hi!</a> by Beth Knepper (<a href='http://codepen.io/elizaknep'>@elizaknep</a>) on <a href='http://codepen.io'>CodePen</a>.
</iframe>复制代码

4. 更多可以想象的布局尝试,例如直接来个布局演示。


1

2

<div style="display:flex;height: 40px;">
    <div style="flex:1;border:1px solid red;">1</div>
    <div style="flex:1;border:1px solid red;">2</div>
</div>复制代码

怎么样,是不是没想到吧,赶紧去尝试一下,让你的文章更加丰富多彩具有更高的可读性!!!!!!!

我是无私奉献的好人,赞我吧,哈哈!!

关注下面的标签,发现更多相似文章
评论