刘健亮的微信排版教程-04

—原创教程  @刘健亮  出品—–

 

微信平台经常需要发布些图文消息,如何利用微信简单的编辑系统进行推送内容的排版,是很多微信君必须面对的问题。

 

(一)你有意识段落设计吗?

一个没有态度的微信君在编辑文本段落时,可能是直接复制的文本,也有可能是键盘直接敲打出来的文本。

 

如果你能在段首敲打2个空格(输入法全角状态),你可以实现首行缩进。如果你能在段尾打个ENTER回车键,那么段落之间结构会很分明。

 

微信中既然提供有序列表和无序列表功能,说明列表功能还是很实用的。

  • 项目一
  • 项目二
  • 项目三

如果有排版需要,段落格式(鼠标右击会出现菜单)中的左对齐、右对齐、居中对齐、两端对齐可以应用。

 

(二)你想成为高手吗?

如果你用过html中<blockquote>标签、并且懂一点CSS基础的话,那么你可以设计出高富帅的效果。

举些栗子

▷ 高富一:

雷锋网努力做好移动互联网的三个代表,代表移动互联网未来发展的方向,代表移动互联网的颠覆创新思潮,代表移动互联网创业者和从业者的利益。

▷ 高富二:

  雷者,万钧之势;锋者,锐利之芒;雷锋网与正在爆发的移动互联网革命同生同息,与越来越多投身这个行业的创业者和从业者共成雷霆之景,锋芒之相。

▷ 高富三:

联系作者:@刘健亮   (新浪微博)

效果怎么实现的呢?给高手点拨下,给<blockquote>设置CSS样式,比如border、color、background-color、padding等。在网页制作工具或其他地方设置好样式,再复制文本,文本的样式就会跑到微信中来啦!

考虑到有人听不明白,下面详细讲下这三个高富帅效果吧。

⊙ 高富一剖析:

<blockquote style=”padding:0px 20px;border-left:5px solid #c9c9c9;”>雷锋网努力做好移动互联网的三个代表,代表移动互联网未来发展的方向,代表移动互联网的颠覆创新思潮,代表移动互联网创业者和从业者的利益。</blockquote>

你不需要知道<blockquote>标签是什么意思,英文style暗示后面的代码是设置样式用的。“padding:0px 20px”作用是设置左边距为20px,”border-left:5px solid #c9c9c9;”意思是设置左边框,边框的粗细为5px,样式为实线(高富三样式为点状,dashed),边框颜色为#c9c9c9。关于文字的颜色就必要在代码中声明了,在微信中即可修改。

代码写好后怎么使用呢?不是直接复制微信就可以使用的,我们需要在其他地方把网页效果显示出来,再把文字复制到微信即可,而此时的文本保留了CSS样式。一个完整html的文件具有相应的格式,完整代码如下:

<html>

<head>

</head>

<body>

教程制作:@刘健亮

 <blockquote style=”padding:0px 20px;border-left:5px solid #c9c9c9;”>雷锋网努力做好移动互联网的三个代表,代表移动互联网未来发展的方向,代表移动互联网的颠覆创新思潮,代表移动互联网创业者和从业者的利益。</blockquote>

转载请注明作者

</body>

</html>

你只需把上方红色的文本复制到记事本,并保存为文件名.html形式,然后通过浏览器打开即可看到效果:

全选复制网页中所有东西在微信中黏贴,便修改成自己的效果,高富帅效果就诞生啦!

 

⊙ 高富二剖析:

高富二与高富一主要区别是四周都有边框,把border-left改成border即可。

完整代码如下:

<html>

<head>

</head>

<body>

教程制作:@刘健亮

 <blockquote style=”padding:0px 20px;border:2px solid #c9c9c9;”>雷者,万钧之势;锋者,锐利之芒;雷锋网与正在爆发的移动互联网革命同生同息,与越来越多投身这个行业的创业者和从业者共成雷霆之景,锋芒之相。</blockquote>

转载请注明作者

</body>

</html>

⊙ 高富三剖析:

高富三的边框样式为点状dashed,而非实线solid,另外添加了背景颜色:background-color:#116D8A;

完整代码如下:

<html>

<head>

</head>

<body>

教程制作:@刘健亮

 <blockquote style=”padding:0px 20px;border:2px dashed #c9c9c9;background-color:#116D8A;”>联系作者:@刘健亮   (新浪微博)</blockquote>

转载请注明作者

</body>

</html>

大家可以动手操作起来,也可以尝试修改其它参数,有什么不懂的可以微博联系@刘健亮

下一期预告

05期   微信排版教程之大有用图

 

–【微信排版教程目录索引】–

期数 | 文章标题
01期 | 微信排版进阶教程
02期 | 微信排版教程之字得其乐(一)
03期 | 微信排版教程之字得其乐(二)
04期 | 微信排版教程之高手有段
05期 | 微信排版教程之大有用图
06期 | 微信排版教程之表里如一

点击阅读原文可关注@刘健亮 微博

分享给您的好友:

您可能还喜欢…

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>