

上图参考了公众号“真格基金”的文章导航,由CSS代码编写完成。
目前微信公众号的文章导航大致分两种:图片和代码
采用图片的好处是方便快捷,一键上传;劣势则体现在画质可能受损,广经流传后变得模糊不清,而CSS代码则解决了这个问题!

下面分享“真格基金”的内容导航,并附上源码及操作方法。
> 真格基金 内容导航

> 内容导航源代码:
<table data-sort="sortDisabled" align="center" width="592" style="margin-top: 0px; margin-right: 0px; margin-left: 0px; padding: 0px; font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif; font-size: medium;">
<tbody style="margin: 0px; padding: 0px;">
<tr class="firstRow" style="margin: 0px; padding: 0px;">
<td align="center" valign="middle" width="192" style="margin: 0px; border-color: rgb(255, 255, 255); background-color: rgb(244, 242, 235);">
<span style="margin: 0px; padding: 0px; font-size: 14px;">
<strong style="margin: 0px; padding: 0px;">
<span style="margin: 0px; padding: 0px; color: rgb(128, 78, 33);">真格动态</span>
</strong></span>
</td>
<td align="center" valign="middle" width="168" style="margin: 0px; border-color: rgb(255, 255, 255); background-color: rgb(244, 242, 235);">
<span style="margin: 0px; padding: 0px; line-height: 22.4px; color: rgb(201, 188, 156); font-size: 14px;">真格课堂</span>
</td>
<td align="center" valign="middle" width="158" style="margin: 0px; border-color: rgb(255, 255, 255); background-color: rgb(244, 242, 235);">
<span style="margin: 0px; padding: 0px; line-height: 22.4px; color: rgb(201, 188, 156); font-size: 14px;">真格故事</span>
</td>
<td align="center" valign="middle" width="154" style="margin: 0px; border-color: rgb(255, 255, 255); background-color: rgb(244, 242, 235);">
<span style="margin: 0px; padding: 0px; line-height: 22.4px; color: rgb(201, 188, 156); font-size: 14px;">真格分享</span>
</td>
</tr>
<tr style="margin: 0px; padding: 0px;">
<td rowspan="1" colspan="4" align="center" valign="middle" style="margin: 0px; border-color: rgb(255, 255, 255); background-color: rgb(244, 242, 235);">
<span style="margin: 0px; padding: 0px; color: rgb(128, 78, 33); font-size: 14px;"><strong style="margin: 0px; padding: 0px;">这里有关于真格的一切。</strong></span><span style="margin: 0px; padding: 0px; color: rgb(128, 78, 33);"><strong style="margin: 0px; padding: 0px;"><br style="margin: 0px; padding: 0px;"/></strong></span>
</td>
</tr>
</tbody>
</table>
> 修改文字方法:
1.请使用电脑访问网站 新媒体排版
2.点击 源代码工具,复制上方源码进内容框
3.删除源代码中的文字部分,填写上所需设置的文字(建议每个栏目不超过4个字)

> 修改颜色方法:
- 修改背景色:
<td align=...>中,修改“background-color:”后的代码为指定颜色,如“#000”;
- 修改字体色:
<span style=...>中,修改“color:”后的代码为指定颜色,如“#000”;
修改完成后,点击源代码工具,你想要的就在那里了!只需复制到微信编辑器,你的内容导航就可以做好发布啦!
订阅头条号新媒体学徒
每周一到周五连载更新