上圖參考了公衆号“真格基金”的文章導航，由CSS代碼編寫完成。

目前微信公衆号的文章導航大緻分兩種：圖片和代碼

采用圖片的好處是方便快捷，一鍵上傳；劣勢則體現在畫質可能受損，廣經流傳後變得模糊不清，而CSS代碼則解決了這個問題！

下面分享“真格基金”的内容導航，并附上源碼及操作方法。

> 真格基金 内容導航

> 内容導航源代碼：

<table data-sort="sortDisabled" align="center" width="592" style="margin-top: 0px; margin-right: 0px; margin-left: 0px; padding: 0px; font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, 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”；

修改完成後，點擊源代碼工具，你想要的就在那裡了！隻需複制到微信編輯器，你的内容導航就可以做好發布啦！

訂閱頭條号新媒體學徒

每周一到周五連載更新

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!