微信文章排版小窍门

2014-08-25 22:08:56
使用浏览器自带的开发者工具,我们可以摆脱微信公众平台提供的微信编辑器的限制,制作更多丰富多彩的展现形式。

微信小编们真的不容易,每天不但要准备高质量的内容,卖萌耍贫,还要使得群发的文章尽量美观漂亮,吸引读者的眼球。

下面,我就给大家介绍一个小窍门,让您在文章排版的时候有更多的工具、样式可以使用,可以快速的做出绚丽多彩的效果来。

比如下面的效果,我们就是在微信提供的编辑器里实现的,是不是很好玩呢?

先别激动,如果这些图形还能够运动的话,那是不是就更有意思了呢?




假如,我们抛开微信不说,让我们的网页制作人员做一个网页,具有这样的效果,应该是很容易的事情,因为我们自己做网页,就可以随心所欲,html+css+javascript,可以做出很多的效果。

但是在微信中,我们不得不面对着微信的种种限制,

一来微信公众平台提供的编辑器功能有限,只能定义简单的几种效果,比如粗体、斜体、下划线等等,

另一方面,这个微信编辑器也过滤了很多标签,最主要的是不能使用javascript,这样就大大限制了网页的功能。

我们今天讲的办法就是使用浏览器的开发者工具,突破微信公众平台编辑器本身的功能局限,使用更多的标签,更多的效果。

通常,一些现代(高级)的浏览器都具有开发者工具,比如webkit内核的浏览器(chrome、safari)等都有inspector , firefox有firebug。

我们就以windows版本下的chrome浏览器为例,通过F12快捷键就可以方便的打开、关闭开发者工具,

打开开发者工具,我们的浏览器底部就多出了一个区域,如下图。



通过这个开发者工具,我们就可以直接在开发者工具的Elements(元素)里编辑微信编辑器里的内容了,就相当于具有了源代码编辑的功能,这样就使得我们的创意有了无限的可能。

1、文字加一个大的背景色



代码为:


<p style="
    background: #0ACA31;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 10px;
">糊涂僧,网址 http://www.hutuseng.com</p>


2、 发光的红太阳

其实就是带阴影的圆, 普通html中是没有圆形的标签的,就是矩形,但是矩形可以设置四个角的弧度,也就是圆角矩形,那么我们只要做一个正方形,然后四个角的圆半径等于正方形边长的一半,就相当于画了一个圆形。



代码如下:


	

<p style="width:200px;
height:200px;
background: #FF3D22;
border-radius: 100px;
text-align: center;line-height: 200px;font-size: 26px;
box-shadow: 5px 6px 55px #DAEC04;">
红太阳</p>


3、带边框和阴影的矩形


代码如下:

<p style="
    border-left: 5px solid #ff0000;
    text-indent: 10px;
    border: 1px solid #ccc;
    border-left: 9px solid #999;
    height: 50px;
    line-height: 50px;
">这是标题二</p>


4、带标题和简介的导读

 



代码为:

<fieldset 
style="background: #9DD8CC;border: 0px;">
<legend 
style="background: #5EC386;height: 30px;line-height: 30px;
box-shadow: 2px 2px 2px #51A21C;
width: 200px;text-indent: 10px;">导读·Introduction</legend>
作为甲午战争和日俄战争的主要战场,大连在战争史上曾遭受两次大的战争劫,沦为俄、日殖民地近半个世纪。这些老照片也是当年的缩影。
</fieldset>


5、倾斜的文字

 


代码如下:

<p style="background-color:yellow;
transform:rotate(9deg);
-webkit-transform:rotate(9deg);
box-shadow:5px 5px 5px #ccc;
margin-top:30px;
width: 200px;
height:40px;
 border-radius: 70px;
text-align: center;
line-height: 40px;">我是倾斜的文字</p>


6、会跑的文字


会跑的文字就相当于动画了,由于html5的canvas受到限制,但是仍然可以使用svg,这部分大家可以自己研究研究。


7、调用自己服务器上的视频


微信里的视频,我们只能上传到QQ视频里,如果我们自己的服务器上有视频文件的话,通过上面的方法,我们自己写video标签,就可以直接播放我们自己服务器上的视频了。


8、学习别人的设计


如果我们看到别人的微信文章样式很好看,又不知道别人是怎么做的,那么就可以用上面的方法,利用开发者工具看一下,就知道别人是怎么弄的了。


新媒体时代的编辑,也要学习一些基本的网络知识,能用的了photoshop,能使用edius、vegas,能压缩的了视频,会html+css,能做的了网页,也算是全才了。