wordpress新站添加时间轴页面教程

广告合作

需要广告位置可以直接联系1272345426。

现在购买

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!如发现资源不能下载或者失效请联系QQ1272345426

久全技术网-www.52jqw.cn
久全技术网-www.52jqw.cn
摘要:如何为你的网站添加时间轴历程呢?本教程可以让你的worepress网站添加一个网站时间轴,教程代码简...
wordpress新站添加时间轴页面教程

wordpress新站添加时间轴页面教程

前言:

 

教程可以让你的worepress网站添加一个网站时间轴,教程代码简单易懂,详情看步骤操作。

 

步骤1:添加CSS代码

  PS:在博客主题style.css文件的代码最后一行或者主题设置自定义面板添加即可。有一些主题的CSS美化代码可能放在别的文件里面具体可以你直接浏览器F12查看源代码进行查看。


    /* 站点动态时间轴 */
    #teamnewslist ol{list-style:none;margin-left: 36px;padding-left: 14px;border-left: 2px solid #eee;font-size: 18px;color: #666;}
    #teamnewslist b{font-size: 12px;font-weight: normal;color: #999;display: block;position: relative;margin-bottom:5px;}
    #teamnewslist b::after{position: absolute;top: 6px;left: -22px;content: '';width: 14px;height: 14px;border-radius: 50%;background-color: #fff;border: 2px solid #ccc;box-shadow: 2px 2px 0 rgba(255,255,255,1), -2px -2px 0 rgba(255,255,255,1)}
    #teamnewslist li{list-style:none;margin: 0 0 20px 0;line-height: 100%;}
    #teamnewslist li:hover{color: #555;}
    #teamnewslist li:hover b::after{border-color: #C01E22;}
    #teamnewslist li:hover b{color: #C01E22;}

步骤2:添加html代码

PS:这个代码可以直接在编辑中选择文本模式也就是代码编辑文模式里面输入即可,具体自己看着办操作。


    <div id="teamnewslist">
     <ol>
      <li><b>20XX年XX月X日</b> 网站发展历程</li>
      <li><b>20XX年XX月X日</b> 网站发展历程</li>
           <li><b>20XX年XX月X日</b> 网站发展历程</li>
     </ol>
    </div>

总结:

以上就是时间轴代码,详情可以百度搜索久全技术网更多内容。

未经允许不得转载:作者:久全技术猿, 转载或复制请以 超链接形式 并注明出处 久全技术网
原文地址:《wordpress新站添加时间轴页面教程》 发布于2019-09-23

分享到:
赞(0) 打赏
久全技术网-aidezy.com 久全技术网-www.52jqw.cn
久全技术网-aidezy.com 久全技术网-www.52jqw.cn

评论 抢沙发

5 + 8 =


wordpress新站添加时间轴页面教程

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.0主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册