当前位置: 首页 → 技术圈 → 

CSS

技术是如何解决排版困扰的?

 

​近日,某在发文时遇到素材、排版和效率问题,便找到一插件让帮分析下。安装后发现,除去需要开发者权限外,还需要在其网站上扫码登录,这让自己内心咯噔了一下——职业的敏感性告诉自己,这种侵入式的插件很有可能存在安全或隐私泄露风险。

但,又有何工具能替代呢?

先前在发文时,一向的习惯是先在Word中编辑好,再复制或导入到公众号编辑器中。一来,是作为底稿,方便归档;另一个也是在于Word所提供功能的丰富性和快捷键的便捷性。但,复制之后,一些样式并不在公众号编辑器所提供的功能中却能正常显示,这不由得让自己怀疑直接使用HTML的可能性。

直到某日遇到布局、排版的问题时,观察到一些比较好的案例,在尝试直接复制和编辑HTML代码后,证实了这种猜测。

以下,试举几例(均已亲测可行):

1. 标题设置醒目色边框

此设计较为常见,用于较为显著地区分段落层次。(视频演示见公众号“黑匣子思维”。)

其他类似的设计还有:居中+上下边框居中+粗细双下边框等。

2. 圆角图片

给图片设置圆角也是较为常见的设计,可以让图片显得圆润,不那么棱角分明。

3. 带序号和背景图的标题

带序号的标题多用于篇幅较长、层次分明的文章,而加上装饰性的背景图,则让标题显得生动富有情趣,而不至于显得如论文般的枯燥。

但图片+序号的结合,若不借助于PS,恐怕难以应对不断增加的序号,因此,若要提高效率,便需借助一些技术手段。

4. 上标、下标

在引用资料或需要对原文加以备注、说明时,常涉及到数字上标的使用,但公众号编辑器中也没有提供此功能,除去从Word等处复制外,另一个简单的方式同样是通过代码实现:

上标:

<sup>1</sup>

下标:

<sub>2</sub>

 

以上示例不过班门弄斧,其他更为直接、有效的方式还包括:在任何一个支持源代码编辑的所见即所得编辑器(如:TinyMCE等)中编辑后复制到公众号编辑器中;或修改他人已设计好的网页再进行复制(或带格式复制后修改);或直接在Word中进行富文本编辑,等等,不一而足。

 

后记

技术来源于生活又回归生活,善加总结和利用,也是很有趣、很有意义的事情。😘

查看演示视频,学习干货,请扫描以下二维码👇:

公众号:黑匣子思维
 

*

*

*

*