我们在有些 WordPress 网站希望用单页面设计一个时间轴的功能，比如会用到公司的简介信息和发展历史中。网上可以找到相关的 WordPress 时间轴插件，但今天站长要分享的是用CSS样式来实现时间轴功能。

CSS代码

如果你的 WordPress 网站用的是 Zibll 子比主题，那么，可以在网站管理后台 [Zibll主题设置] - [全局&功能] - [自定义代码] - [自定义CSS样式]，把下面的 css 代码复制粘贴到里面即可。

PS：时间轴字体大小修改 font-size:1.515rem 即可。

文章代码

然后新建文章或页面，将以下代码放入即可。

<div class="timeline">
    <div class="timenode">
        <div class="meta">
            <p></p>
            <p>2024年6月 系统仓储站上线</p>
            <p></p>
        </div>
        <div class="body">
            <p>2024年6月4日，上线系统仓储站：www.11zhang.com/msdn/</p>
        </div>
    </div>
    <div class="timenode">
        <div class="meta">
            <p></p>
            <p>2023年10月 网站备案</p>
            <p></p>
        </div>
        <div class="body">
            <p>2023年10月17日，网站完成ICP备案和公安备案</p>
        </div>
    </div>
    <div class="timenode">
        <div class="meta">
            <p></p>
            <p>2023年10月 网站迁移</p>
            <p></p>
        </div>
        <div class="body">
            <p>2023年10月4日，网站从香港迁移至国内阿里云</p>
        </div>
    </div>
        <div class="timenode">
        <div class="meta">
            <p></p>
            <p>2023年9月 网址导航上线</p>
            <p></p>
        </div>
        <div class="body">
            <p>2023年9月17日，上线网址导航：dog.11zhang.com</p>
        </div>
    </div>
    <div class="timenode">
        <div class="meta">
            <p></p>
            <p>2023年1月 建站</p>
            <p></p>
        </div>
        <div class="body">
            <p>2023年1月7日，选用WordPress程序完成建站</p>
        </div>
    </div>
</div>